자바스크립트(JavaScript) 함수, 함수 표현식과 화살표 함수

오늘은 자바스크립트 함수에 대해 공부한 것을 정리해 보겠습니다.함수의 정의와 특징, 선언과 호출, 인자와 반환값 처리 마지막으로 함수 표현식과 화살표 함수를 통해 함수를 정의하는 방법에 대해 알아보았습니다.

함수의 정의와 특징

함수란 쉽게 얘기하면 특정 작업을 수행하는 코드 블록을 말합니다. 이러한 함수를 사용하는 이유는 간단합니다. 코딩을 하다 보면 반복적으로 수행해야 하는 코드를 매번 작성할 필요 없이 함수 호출만으로 간단하게 코딩하기 위해서입니다.

보다 세부적으로 들어가면 함수는 코드를 논리적인 단위로 분리하여 더 구조적으로 만들 수 있고 각 함수가 하나의 특정 작업만 수행하기 때문에 코드의 가독성과 관리가 용이 해집니다.

또한 기능에 문제가 생겼을 때 그 기능만을 수정하면 되기 때문에 유지보수가 쉬워지며, 복잡한 동작을 간단한 인터페이스로 추상화할 수 있어 사용자는 함수의 내부 동작을 신경 쓰지 않고 함수가 제공하는 기능만 사용할 수 있습니다.

함수의 특징

자바스크립트 함수의 첫 번째 특징으로 함수가 다른 변수와 동일하게 취급된다는 것입니다. 때문에 함수는 변수에 할당할 수 있고 다른 함수의 인자로 전달되며 함수에서 반환될 수 있습니다.

두 번째로 이름 없이 정의될 수 있습니다. 익명 함수는 주로 콜백 함수로 사용되며, 콜백 함수에 대해서는 다음에 보다 자세히 알아보겠습니다.

세 번째로 호이스팅(hoisting)이라는 기능으로 함수의 호출보다 함수를 아래에서 선언해도 문제없이 수행됩니다. 호이스팅이란 끌어올린다는 의미로 코드가 실행되기 전 선언문들을 최상단으로 올려 실행시킨다는 것을 의미합니다.

네 번째로 함수 표현식, 화살표 함수 등 다양하고 간결한 방식으로 함수를 정의할 수 있습니다.

이 외에도 많은 특징들이 있지만 오늘 공부할 내용에 해당되는 특징만 나열해 보았습니다.

함수의 선언과 호출

가장 기본적인 함수 선언 방법으로 function 키워드를 사용한 방법입니다. function 키워드를 써주고 함수의 이름과 인자가 들어갈 소괄호, 함수가 수행할 코드가 작성되는 중괄호를 작성해 주면 됩니다.

function add( num1 , num2 ) {
  return num1 + num2;
}

함수의 호출은 간단합니다. 함수의 이름 뒤에 괄호를 붙여서 호출하며, 괄호 안에는 필요한 인자를 전달해 주면 됩니다.

console.log(add(1,2));

또한 위의 특징에서 설명한 것과 같이 호이스팅 기능에 의해 선언된 함수를 코드가 실행 시 가장 위로 끌어올려 실행하기 때문에 호출과 선언의 순서를 바꿔줘도 문제없이 동작합니다.

 greet();  //함수의 호출

 function greet() {
   console.log("hello")
 };

함수 인자와 반환 값

함수는 여러 개의 인자를 받을 수 있으며 return 키워드를 사용하여 값을 반환합니다. 반환 값이 없을 경우 “undefined”를 반환합니다. 또한 return 키워드가 나오면 함수가 종료되기 때문에 return 뒤에 나오는 코드들은 실행되지 않습니다.

function add( num1 , num2 ) {
  return num1 + num2;
};

console.log(add(1,2));

함수 표현식

함수 표현식은 위에서 설명한 자바스크립트 함수의 특징 중 첫 번째 특징을 이용한 것이며,

함수를 변수에 할당하는 방식을 말합니다.

const greet1 = function greet_name(name) { 
  console.log(`hello ${name}`)
};

greet1("JAVASCRIPT")

여기서 함수의 이름은 없어도 되고 있어도 상관없습니다.

두 번째 코드처럼 함수의 이름을 적어주지 않는 것을 익명함수라고도 합니다.

const greet2 = function (name) { 
  console.log(`hello ${name}`)
};

greet2("JAVASCRIPT2")

여기서 또 주의할 점은 이렇게 함수 표현식을 통해 선언된 함수는 값으로 취급되기 때문에

function 키워드를 통한 함수 선언 방식과 다르게 호이스팅 되지 않습니다.

화살표 함수

화살표 함수는 함수를 빠르고 간결하게 생성할 수 있도록 도와주는 자바스크립트의 문법입니다. 먼저 함수 표현식에서 function 키워드를 지우고 소괄호와 중괄호 사이에 화살표를 넣어서 만들어줍니다.

const sub = (num1, num2) => { 
  return num1 - num2
};

console.log(sub(3,2));

만약 아래와 같이 인자가 하나이면서 값을 반환하기만 한 간단한 함수라면,

인자를 받는 중괄호와 return 키워드도 삭제해 간단하게 코드를 작성할 수 있습니다.

const double = num1 => num1*2;

console.log(double(3))

마무리

오늘은 이렇게 자바스크립트의 함수에 대해 간단하게 공부한 내용을 정리해 보았습니다. 이 외에도 콜백 함수, Closure, 고차 함수, 즉시 실행 함수 표현식, 나머지 매개변수 등 함수가 가진 특징에 대해서도 공부해야 하며, 가장 중요한 배운 것들을 어디에 사용하는지에 대해서도 공부해 보고 기록을 남겨보겠습니다.

저작자표시 비영리 변경금지

디스이즈데브