화살표 함수

화살표 함수

ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표(=>)를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다.

// 화살표 함수
const add = (x,y) => x + y;
console.log(add(2,5)); // 7

화살표 함수는 기존의 함수보다 표현만 간략한 것이 아니라 내부 동작 또한 간략화되어 있다.

주요 특징

this 바인딩

화살표 함수는 this 키워드를 자신을 감싸는 렉시컬 환경(lexical context)에 바인딩한다. 일반적인 함수 표현식은 호출 방식에 따라 this가 달라지지만, 화살표 함수는 정의된 위치에서의 this 값을 그대로 사용한다. 이 특징 때문에 화살표 함수는 메서드나 이벤트 핸들러에서의 콜백 함수로 자주 사용된다.

function Person() {
    this.age = 0;

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

const p = new Person(); // 1 2 3 4 ...

아래의 경우에는 this가 전역 객체를 가리키므로 의도하지 않은 값이 생긴다.

function Person() {
    this.age = 0;

    setInterval(function() {
        this.age++;
        console.log(this.age);
    }, 1000);
}

const p = new Person(); // NaN NaN NaN ...

사실 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라 부른다.

argument 객체 없음

화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조한다.

(function(){
  const foo = () => console.log(arguments); // [Arguments] { '0' : 1, '1' : 2 }
  foo(3,4);
}(1,2));