화살표 함수(Arrow Function)

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

기존의 함수 정의 방식

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

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

화살표 함수를 이용한 함수 정의

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

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

화살표 함수의 다양한 문법

화살표 함수를 정의하는 방식은 간단한 자바스크립트 표현식부터 {} 를 이용한 선언 방식까지 여러 방법이 있습니다.

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 바인딩의 변화

업데이트 예정