JavaScript 화살표 함수

화살표 함수 표현(arrow function expression)은 기본적인 함수(function) 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩하지 않습니다. 화살표 함수의 이름은 항상 anonymous(익명)이며 화살표 함수는 메소드 함수가 아닌 곳에 가장 적합합니다.

 

const allItem = ['new', 'use', 'new', 'use'];

// ES5 Style
var usingItem = allItem.filter(function(use) {return use == 'use'});
usingItem // ['use','use']

// ES6 Style
var usingItem = allItem.filter(use => use == 'use');
usingItem // ['use','use']

위 코드는 es5와 es6를 비교한 예시입니다. 구문에서 중괄호, 괄호, 세미콜론 등이 빠지니 코드가 간단 해졌습니다. 위 예시는 인자가 1개일 경우에 대한 예시입니다.  인자가 2개 이상인 경우에는 인수들을 괄호에 넣어야 합니다.

var values = [1,2,3,4,5];

var totel = values.reduce((a, b) => a + b, 1);
totel  // 16

 

화살표 함수는 자신의 this가 없습니다. 그러나 화살표 함수를 둘러싸는 lexical scope의 this가 사용됩니다. 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다. 따라서 this현재 범위에 없는 것을 검색하는 동안 화살표 기능 this은 포함된 범위에서 를 찾습니다.

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // this는 Person 객체를 참조
  }, 1000);
}

var p = new Person();

 

화살표 함수는 생성자로 사용될 수 없으며 new와 함께 사용하면 오류가 발생합니다.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

 

그 외 기타 사용방법

//  빈 변수의 화살표 함수는 undefined를 반환 
let empty = () => {};

(() => 'foobar')();
// "foobar" 반환

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

// 더 간결한 promise 체인
promise.then(a => {
  // ...
}).then(b => {
  // ...
});