ES6 Arrow function

ES6에는 Arrow Function이 추가되었다.

처음 접했을 때는 낯설었지만 개인적으로 요새 function보다 arrow function을 더 많이 쓰고 있다.

그 이유는 문법적 간결성과 this 바인딩 때문이다.

기본 문법

 
(param1, param2, …, paramN) => { statements }

예를 들면 다음처럼 사용할 수 있다.

 

let sum = (num1, num2) => { return num1 + num2; }

let result = sum(1, 2);

이 예제만 봤을 때는 그닥 뭐가 편한지 모를 수도 있지만, 콜백 함수를 쓸 때 편리한 점이 많다.

다음 예제는 배열의 map 메서드를 사용해 요소의 값을 1씩 증가시킨다.

let numbers = [1, 2, 3, 4, 5];

numbers.map((item) => {
    return item + 1;
});

arrow function에서는 파라메터가 1개일 때는 괄호를 생략할 수 있다.

let numbers = [1, 2, 3, 4, 5];

numbers.map(item => {
    return item + 1;
});

또한 예제와 같이 한 문장으로 바로 리턴하는 경우에는 대괄호와 return 문을 생략할 수도 있다.

let numbers = [1, 2, 3, 4, 5];

numbers.map(item => item + 1);

코드가 굉장히 간단해졌다.

위의 함수는 다음의 함수와 같다.

 
function sum(num1, num2) {
    return num1 + num2;

}

그리고 다음처럼 줄여서 사용할 수도 있다.

let sum = (num1, num2) => num1 + num2;

이제 arrow function에서 this 바인딩에 대해 알아보자.

자바스크립트에서 함수는 각각 고유한 this 스코프를 가진다. 그래서 setInterval, setTimeout, addEventListener, forEach, map, filter 등을 호출할 때는 항상 this를 지역 변수에 할당해서 사용하거나 bind 메서드를 통해 this 스코프를 변경한 함수를 호출하곤 했었다.

var handler = {
  doSomething: function () {
    var self = this;
    setInterval(function () {
      self.callMethod(); 
    }, 100);
  },
 
  callMethod: function () {
 
  }
}

이런 때에 arrow function을 사용하면 편리하다.

arrow function은 자체적인 this 스코프가 없고 부모의 this를 공유한다. 그래서 위의 코드는 arrow function을 통해 다음처럼 변경할 수 있다.

var handler = {
  doSomething: function () {
    setInterval(() => this.callMethod(), 100);
    /*
     또는 다음처럼 사용할 수 있다.
 
      setInterval(() => {
        this.callMethod();
      }, 100);
    */ 
  },
 
  callMethod: function () {
 
  }
}

arrow function이 일반 함수보다 편리하기는 하지만 함수의 모든 기능을 지원하지는 않는다. 하지만 우리가 흔히 사용해오던 익명 함수 표현식을 대체하는데 유용할 듯하다.

마지막으로 일반 함수와의 차이점을 정리하면 다음과 같다.

new 사용 불가

     arrow function은 [[Construct]]가 없어 new를 사용하면 예외가 발생한다.

     

arguments 없음

     arrow function에서는 arguments를 통해 파라메터에 접근할 수 없다.

     

     이를 대체할 수 있는 방법은 있다. 바로 나머지 인자(rest parameters)를 이용하면 된다.

     

 
var fnPrint2 = (...args) => console.log(args[0]);
 

     

prototype 없음

     일반 함수처럼 prototype이 없다.