[자바스크립트] ES6+ 화살표 함수

화살표 함수

화살표 함수는 ES6에서 도입된 새로운 함수 표현 방식으로 함수를 간결하게 정의할 수 있다. 주로 익명 함수의 사용을 줄이고 코드를 간결하게 만드는데 사용된다.

 

아래의 예시처럼 => 기호로 정의되며, 매개변수 하나인 경우 괄호를 생략할 수 있다. 함수의 몸체가 한줄인 경우 중괄호 {}와 return 키워드를 생략할 수 있다.

// 기본 구문
const add = (a, b) => {
    return a + b;
};

// 한 줄 표현 시 중괄호와 return 생략 가능
const multiply = (a, b) => a * b;

console.log(add(2, 3));      // 5
console.log(multiply(2, 3)); // 6

 

화살표 함수와 Scope

함수 내부에서의 this 바인딩 방식이 있다. 화살표 함수는 자신만의 this를 생성하지 않고, 상위 스코프의 this를 사용한다.

function Counter() {
    this.count = 0;

    setInterval(() => {
        this.count++;
        console.log(this.count);
    }, 1000);
}

const counter = new Counter();