Arrow Function

Arrow Function / 화살표 함수

ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해보자.

보통 함수 표현식을 축약한 형태로 표시된다.

 

원래의 함수 표현식 :

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

화살표 함수 사용 :

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

* function 키워드를 화살표로 축약 가능하다.

* () 소괄호(parentheses)를 사용하는 것은 가능

* 함수의 본문(body)에 return 문만 있는 경우, 화살표 함수는 return을 생략 가능하다.

※ 이 때 주의해야 할 점은 {} 중괄호(curly brace)는 사용하면 안 된다.

 

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

 

그리고, 화살표 함수는 클로저를 표현하기 유용하다.

 

예시로, 아래와 같은 함수 표현식이 있다.

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

이를 화살표 함수로 아래와 같이 바꿀 수 있다.

const adder = x => y => x + y

그러나 화살표 함수는 다음과 같은 주의해야할 특징들이 있다.

* call, apply, bind를 사용할 수 없다.

* 화살표 함수의 실행은 this를 결정짓지 않는다.

---