[JavaScript] 화살표 함수 (Arrow Function)

화살표 함수 (Arrow Function Expression)는 기존의 함수 선언식에서 function 키워드가 생략함과 동시에 더 간소화한 형태의 함수 선언입니다.

 

화살표 함수의 사용 가능한 구문은 다음과 같습니다.

() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
	statements
}

param => {
	statements
}

(param1, paramN) => {
	statements
}

 

형식을 화살표 (=>) 기준으로 나눈다면, 화살표의 좌항은 매개변수를, 우항에는 함수로 사용될 표현식이나 statement“s”들이 들어가게 됩니다.

좌항에서 매개변수가 만약 한 개라면 소괄호가 생략될 수 있으나, 매개변수가 없거나 다수인 경우에는 소괄호가 요구됩니다. 만약 매개변수가 한 개일 때, 디폴트 값을 사용한다면 소괄호를 생략할 수 없습니다.

(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression

 

우항에서는 만약 함수의 내용이 한 줄짜리 코드로 끝난다면 중괄호가 생략될 수 있습니다. 그리고 표현식의 결과 값을 반환하고자 하는 값으로 인식하여 return 키워드도 내재적으로 포함됩니다. 만약 함수 내용이 두 줄 이상으로 넘어간다면, 중괄호로 내용을 묶어주어야 하고 반환하고자 하는 내용에 return 키워드도 붙여주어야 합니다.

const func = (x) => x * x;

const func2 = (x, y) => {
	return x + y;
};

 

만약 반환하고자 하는 값이 Object literal인 경우, 소괄호로 값을 한번 더 묶어야 합니다. 그 이유는 자바스크립트 엔진이 화살표 다음에 오는 중괄호를 statements가 시작되는 것으로 인식하여 내부의 내용을 statements로 해석하기 때문입니다. 

const func = () => { foo: 1 }; // Syntax Error

const func = () => ({ foo: 1 });

 

화살표 함수의 추가적인 특징들에 대해서 설명하겠습니다.

1) function 연산자 사용 X

2) 메서드로 사용 X, this도 사용할 수 없습니다. 화살표 함수의 this는 본인을 호출한 객체의 상위 레벨의 this로 설정되기 때문입니다.

3) 매개변수와 화살표 사이에서 line break는 불가능합니다. 단, 매개변수들을 묶는 소괄호 안이나 함수 내용을 묶는 소괄호나 중괄호 안에서는 자유롭게 line break가 가능합니다.

4) 화살표의 연산 순위, 화살표 자체가 연산자는 아니기 때문에 상호작용하는 방법이 다릅니다. 하지만 우선순위를 따지게 되면 연산자들보다는 우선순위가 낮기 때문에 괄호로 묶어주는 것이 꼭 필요합니다.