화살표 함수

ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해봅시다. 보통 함수 표현식을 축약한 형태로 표시됩니다.

함수 표현식

const add = function (x, y) {
  return x + y
}

화살표 함수

const add = (x, y) => {
  return x + y
}

화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있습니다. 함수의 본문(body)에 return 문만 있는 경우, 화살표 함수는 return을 생략할 수 있습니다. 이 때 주의해야 할 점은 {} 중괄호(curly brace)는 사용하면 안됩니다.

() 소괄호(parentheses)를 사용하는 것은 가능합니다. 이는 일반적인 수식에서의 "괄호 치기"와 동일합니다.

const add = (x, y) => x + y
const add = (x, y) => (x + y)   // O, 정상 작동
const add = (x, y) => { x + y } // X, undefined 리턴 

만일 함수 내의 표현식이 두 줄 이상일 경우에는, return을 생략하기 보다는 중괄호와 return을 명시적으로 쓰는 것이 좋습니다.

화살표 함수는 클로저를 표현할 때 더욱 강력합니다. 다음은 클로저의 한 예입니다.

함수 표현식

const adder = function(x) {
  return function(y) {
    return x + y
  }
}
adder(5)(7) // 12

화살표 함수

먼저 function 키워드를 없애봅시다.

const adder = (x) => {
  return (y) => {
    return x + y
  }
}

가장 안쪽 return부터 없애봅시다. return 생략시에는 중괄호를 사용하지 않는 점을 기억하세요. 추가적으로, 파라미터가 단 한개라면, 소괄호를 생략할 수 있습니다. 이 점도 유의깊게 살펴보세요.

const adder = x => {
  return y => x + y
}