1. Declaring Arrow Function

Arrow function(화살표 함수)를 쓰면 function 키워드 대신 화살표를 사용하여 함수를 훨씬 간략한 방법으로 선언할 수 있습니다.

// 매개변수 지정 방법
() => {...}     // 매개변수가 없을 경우
x => {...}      // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => {...} // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => {return x * x} // single line block
x => x * x          // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으면 암묵적으로 return된다. 위 표현과 동일하다.

() => { return {a: 1}; }
() => ({a: 1}) // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

// multi-line block
() => {
  const x = 10;
  return x * x;
};

2. 화살표 함수의 호출

// ES5
var pow = function (x) { return x * x;};
console.log(pow(10)); // 100

// ES6
const pow = x => x * x;
console.log(pow(10)); // 100

콜백 함수로도 사용이 가능하고 일반적인 함수 표현보다 훨씬 간결하다.

// ES5
var arr = [1, 2, 3];
var pow = arr.map(function(x) { // x는 요소값
  return x * x;
});
console.log(pow); // [1, 4, 9]

const arr = [1, 2, 3];
const pow = arr.map(x => x * x);
console.log(pow); // [1, 4, 9]

Reference

• https://poiemaweb.com/es6-arrow-function