Arrow Function

    () => { ... } // 매개변수가  없을 때
     a => { ... } // 매개변수가 한개 / 소괄호 생략 가능
(a, b) => { ... } // 매개변수가 여러 개/ 소괄호 생략 불가

a => a * a // 한 줄에 리턴값만 바로 넘겨주는 구문이라면 묵시적 return이 이렇게 가능하다
a => { return a * a }  // 함수 바디 리턴 기본 방식

() => { return { a: 1 }; }
() => ({ a: 1 })  //객체 반환시 리턴 생략하고 소괄호 사용 가능

() => {          //여러 줄일때는 대괄호 이용한다
  const a = 'abc';
  return a;
};

Arrow Function은 함수 키워드 대신 => 를 사용하여 좀 더 간결하게 함수를 선언할 수 있는 방법으로, ES6에서 등장했다. 그러나 모든 상황에서 Arrow Function이 적절한 것은 아니고, 기본적으로 익명함수로 사용하는 방식이기 때문에 제한적인 용도로 사용하는 것이 좋다.

Arrow Function은 ES6에서 등장했기 때문에, 전통적 방식의 (ES5 이전의) 함수 호출과 비교하면 이해가 수월하다.

const getDiscount = rate => price => rate * price;

var getDiscount = function getDiscount(rate) {
  return function (price) {
    return rate * price;
  };
};

 

첫 번째 라인의 함수는 Arrow Function의 형태이고, 아래 함수는 해당 함수를 ES5이전의 전통적인 형태로 표현한 것이다. 함수 내부의 클로저 함수를 생성하여 합성함수와 비슷하게 처리되는 것을 확인할 수 있다

Arrow Function과 일반 함수의 가장 큰 차이는 this 이다. 일반 함수의 this는 기본적으로 window(전역객체)를 가리키는데, 이는 함수를 호출 할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정되는 자바스크립트의 함수호출방식에 의해 결정되는 것이다. 

그러나 Arrow Function의 this는 함수를 선언하는 시점에서 this에 바인딩할 객체가 정적으로 결정된다. 따라서 일반 함수와 다르게 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라고 한다.

Arrow Function은 콜백함수로 쓰기 좋고 간편하지만, this가 가리키는 특성의 차이 때문에 메소드 함수나 prototype에 할당하게 되면 window 객체를 가리키게 되어 의도와 다르게 동작할 수 있다. 또한 생성자 함수는 prototype 프로터티를 가지며 prototype 객체의 constructor를 사용하는데 ArrowFunction은 프로퍼티를 갖고 있지 않아 생성자 함수로 사용할 수 없다. 마지막으로 addEventListener 함수의 콜백함수로 화살표를 정의할 경우 마찬가지로 this가 상위 컨텍스트인 전역 객체 window를 가리키는 문제가 생겨 전통적인 방식의 일반함수를 사용해야한다.

Arrow function의 많은 부분은 https://poiemaweb.com/es6-arrow-function을 참고했다.