화살표 함수(Arrow Function)

화살표 함수란?

화살표 함수는 function 키워드 대신 화살표를 사용하여 기존의 함수 정의 방식을 간략화 한다. 표현뿐 아니라 내부 동작도 간략화된다. 특히 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.

화살표 함수 문법

함수 정의

• 화살표 함수는 함수 표현식으로 정의해야 한다.

const multiply = (x, y) => x + y;
multiply(2, 3) // 6

매개변수 선언

• 매개변수가 여러개면 () 소괄호 안에 선언한다.

const arr = (x, y) => { ... };

• 매개변수가 하나라면 소괄호를 생략할 수 있다.

const arr = x => { ... };

• 매개변수가 없다면 소괄호를 생략할 수 없다.

const arr = () => { ... };

함수 몸체 정의

• 함수 몸체가 하나의 문으로 구성된다면 중괄호를 생략할 수 있다.

const power = x => x * 2;
power(2); // 4

• 몸체 내부의 문이 표현식이 아닌 문이라면 중괄호를 생략할 수 없다.

const arrow = () => const x = 1; //SyntaxError

const arrow = () => { const x = 1 };

화살표 함수와 일반 함수의 차이

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.
2. 중복된 매개변수 이름을 선언할 수 없다.
3. 화살표 함수 내부에서 참조한 this는 상위 스코프의 this를 그대로 참조한다.