[javascript] 화살표 함수(Arrow Function)

화살표 함수 표현은 전통적인 함수표현(function)의 간편한 대안이다.

 

사용할 수 없는 경우

• this나 super에 대한 바인딩이 없고, methods로 사용될 수 없다.
• new.target 키워드가 없다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
• 생성자로 사용할 수 없다.
• yield를 화살표 함수 내부에서 사용할 수 없다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions 에서 자세하게 확인 가능하다.

 

기본 사용 문법

//전통적인 함수표현
const func = function(arg1, arg2, ...argN) {
  return expression;
};

//화살표 함수 표현
const func = (arg1, arg2, ...argN) => expression

예시

//전통적인 함수표현
const sum = function(a, b) {
  return a + b;
}

//화살표 함수 표현
const sum = (a, b) => a + b;

화살표 함수 표현은 무명함수를 생성한 후 변수에 담는 방식이다.

function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현할 수 있다.

 

 매개변수가 하나 또는 없는 경우

// 매개변수가 하나뿐인 경우 괄호는 선택사항
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호만 사용 가능
() => { statements }

예시

// 매개변수가 하나뿐인 경우 괄호는 선택사항
const double = num => num * 2;

// 매개변수가 없는 함수는 괄호만 사용 가능
const print = () => console.log("print");

 

화살표 함수를 이용한 예제

items 배열중 짝수만 골라 4를 곱한다음 총 합을 구하는 로직이다.

화살표 함수를 사용하면 아래와 같이 간단히 작성할 수 있다.

const items = [1, 2, 3, 4, 5, 6];

const result = items
  .filter((num) => num % 2 === 0)
  .map((num) => num * 4)
  .reduce((a, b) => a + b, 0);