작성자 : 장기효

검수자 : 배광식

Arrow Function

화살표 함수(Arrow Function)는 ES6의 새로운 함수 정의 방식이다.

[ES5] 함수 정의 방식

기존 자바스크립트의 함수 정의 방식은 아래와 같다.

var a = function() {
    // ...
};

[ES6] 화살표 함수를 이용한 함수 정의

화살표 함수를 이용한 함수 정의 방식은 아래와 같다.

var a = () => {
    // ...
};

화살표 함수의 다양한 문법

화살표 함수를 정의하는 방식은 single javascript expression부터 {} 를 이용한 statement 방식까지 여러 가지가 있다.

1. 단순한 자바스크립트 표현식

단순한 자바스크립트 표현식의 경우 아래와 같이 간소화 문법을 사용할 수 있다.

() => 10 + 20;

2. 함수 선언 방식

복잡한 자바스크립트 선언문이 들어갈 경우에는 {}를 사용하여 아래와 같이 구현한다.

() => {
    print();
    log();
    return 10 + 20;
};

3. 전달 인자(parameter)가 하나인 경우

인자를 1개만 선언하는 경우 인자를 받을 때 사용하는 소괄호() 를 생략할 수 있다.

const a = num => { return num * 10 };
const b = num => num * 10;
a(10); // 100
b(10); // 100

화살표 함수로 this 유효 범위 문제 해결하기

기존 자바스크립트에서 비동기 처리 로직(콜백 함수 등)의 this는 전역 객체(window)를 가리킨다.

function A() {
    this.name = 'is this the same this?';
    setTimeout(function() {
        console.log("callback function's this : ", this); // window
    }, 2000);
    return console.log("A's this : ", this); // A{}
}
var a = new A();

위와 같은 콜백 함수에서 함수 내부의 컨텍스트를 접근하려면 아래와 같은 방법을 써야 했다.

function A() {
    this.name = 'is this the same this?';
    var self = this;
    setTimeout(function() {
        console.log("callback function's this : ", self); // A{}
    }, 2000);
    return console.log("A's this : ", this); // A{}
}
var a = new A();

ES6에서는 화살표 함수로 위의 코드를 아래와 같이 구현할 수 있다.

function A() {
    this.name = 'is this the same this?';
    setTimeout(() => {
        console.log("callback function's this : ", this); // A{}
    }, 2000);
    return console.log("A's this : ", this); // A{}
}
const a = new A();

결과적으로 화살표 함수를 사용하면 this의 유효 범위가 화살표 함수를 실행한 함수 내부로 변경된다. 달리 말하면 비동기 처리를 위해 새롭게 생성된 실행 컨텍스트의 전역 유효범위가 아닌 화살표 함수를 호출한 함수의 컨텍스트로 남아있게 된다.