Arrow function를 사용하는 경우

ES6으로 업데이트되면서 자바스크립트에는 화살표 함수(Arrow function)가 생겼다

화살표 함수는 어떤 경우에 사용할까

 

1. 간결한 문법으로 함수 코드를 작성하고 싶은 경우

Arrow 함수는 일반 함수보다 문법이 간단하다

예시

// 일반 함수
const add = function(a, b) {
    return a + b;
};

// Arrow 함수
const add = (a, b) => a + b;

 

인자 => 명령어의 형식

인자가 여러 개인 경우 괄호로 묶어야 하며

명령어가 여러 줄인 경우 중괄호를 사용하고 return 문을 명시해야 한다

 

2. this 바인딩

일반 함수 내부에서 this는 window를 가리킨다

Arrow 함수는 자신의 this를 가지지 않고 외부 컨텍스트의 this를 그대로 사용한다

예시

function Counter() {
    this.count = 0;

    // 일반 함수
    setInterval(function() {
        this.count++; // 여기서 this는 전역 객체를 참조
        console.log(this.count);
    }, 1000);
}

const counter = new Counter(); // count가 증가하지 않음

// Arrow 함수
function Counter() {
    this.count = 0;

    setInterval(() => {
        this.count++; // 여기서 this는 Counter의 this를 참조
        console.log(this.count);
    }, 1000);
}

const counter = new Counter(); // count가 정상적으로 증가함

 

3. 짧은 코드로 콜백 함수 작성

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

// 일반 함수
const doubled = numbers.map(function(num) {
    return num * 2;
});

// Arrow 함수
const doubled = numbers.map(num => num * 2);