ECMAScript 6 - Arrow Function

ECMAScript 6 - Arrow Function

 

Arrow Function(화살표 함수)는 함수 표현의 축약형이며 () => {...} 사용하여 함수를 간결하게 표현할 수 있다.
arrow 함수의 경우 this 주의. 자바스크립트의 경우 this는 바인딩 객체가 정의된 것이 아닌 누가 호출하는지에 따라 this 객체가 동적으로 결정되는데 arrow 함수의 경우 this는 상위 스코프의 this이다.

• 화살표 함수의 경우 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

// 함수 사용법
 () => { ... };
(x) => { ... };
 x  => { ... }; // 매개변수가 하나인 경우 소괄호가 없어도 됨.

(x) => { return x }; //return 이 필요한 경우
(x) => x; // 중괄호가 없다면, 암묵적 return
(x) => (x); // 소괄호의 경우, 암묵적 return

(x) => { // 중괄호의 경우 return 표현 필요.
  ...
  return x;
}

// es6
// 화살표 함수의 경우 this는 상위 스코프.
this.nums.forEach((v) => {
    if (v % 5 === 0)
        this.fives.push(v)
})

// es5
//  variant 1
// 일반함수의 경우 this는 
var self = this;
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        self.fives.push(v);
});

//  variant 2
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        this.fives.push(v);
}, this);

//  variant 3 (since ECMAScript 5.1 only)
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        this.fives.push(v);
}.bind(this));

기존의 경우 this를 다른 객체 that에 담아두고 해당 변수에 접근.

function NumberEx() {
  var that = this
  that.num = 0;
  setInterval(function add() {
    // setInterval 안에서의 this 는 NumberEx의 this가 아니므로 다른 변수에 this 를 지정하여 씁니다.
    that.num++;
    console.log(that.num);
  }, 1000);
}

화살표 함수의 경우 자신의 this가 바인드 되지 않기 때문에 상위 스코프의 this 사용

function NumberEx() {
  this.num = 0

  setInterval(() => {
    this.num++ // this is from NumberEx
  }, 1000)
}

참고

• ECMAScript2015
• es6-arrow-function
• ECMAScript6