[JS ES6+] 화살표 함수 (=>) 사용법

화살표 함수

바로 코드부터 보자.

let func = (arg1, arg2, ...argN) => expression

 

이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어진다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다.

아래 함수의 축약 버전이라고 할 수 있다.

 

let func = function(arg1, arg2, ...argN) {
  return expression;
};

 

좀더 예를 들어보면

 

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

 

이런 식으로 인자와 반환되는 결과를 작성하면 된다.

 

let sayHi = () => alert("안녕하세요!");

sayHi();

 

이렇게 인자가 아예 없을 수도 있다.

 

중괄호를 열고 여러줄을 입력했다면

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

요약

화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용하다. 본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 한다.

1. 중괄호 없이 작성: (...args) => expression – 화살표 오른쪽에 표현식을 둔다. 함수는 이 표현식을 평가하고, 평가 결과를 반환한다.
2. 중괄호와 함께 작성: (...args) => { body } – 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 한다. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 한다.