ES6 신상(?) JS 화살표함수!

화살표함수

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

화살표 함수의 특징

• call, apply, bind를 사용할 수 없다.
• 화살표 함수의 실행은 this를 결정짓지 않는다.

함수 표현식

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

화살표 함수

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

화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있다.
화살표 함수는 함수 본문에 return 문만 있는 경우 return 문 생략이 가능하다 하지만 주의해야 할 점은 {}도 사용하면 안된다.
()소괄호 사용은 가능하다. 이는 일반적인 수식에서의 괄호와 동일하다.

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

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

화살표 함수는 클로저를 표현할 때 더욱 강력하다.

함수표현식

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

adder(10)(5) // 15

화살표 함수

function 없애기

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

가장 안쪽 리턴 없애기

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

나머지 리턴도 없애기

const adder = (x) => (y) => x + y
//파라미터가 하나이기 때문에 소괄호도 생락할 수 있다.
const adder = x => y => x + y

이와 같이 클로저는 연속된 여러 개의 화살표로 표시할 수 있다.