[JavaScript] 자바스크립트 화살표 함수 정리

화살표 함수

기존의 함수 표현을 대체할 간결한 표현이지만, 모든 경우에 사용할 수 없고 제한적이다.

 

## 차이점 & 한계

• this, super에 대한 바인딩이 없다.
• new, new.target 키워드가 없다.
• 일반적으로 스코프를 지정할때 쓰는 call, apply, bind 함수 등에 적합하지 않다.
• 생성자로 이용될 수 없다.
• 함수 내에 yield를 쓸 수 없다.

## 기존 방식과 화살표 함수 비교

// 기존 이름없는 함수
function (a) {
	return a + 100;
}

// 화살표 함수로 변경시

// 1. 'function'을 제거하고 arrow를 인자와 중괄호 사이에 넣기
(a) => { 
	return a + 100;
}

// 2. 중괄호와 'return'을 제거하기 -- return은 함축되어 있다.
(a) => a + 100;

// 3. 인자의 소괄호 제거하기.
a => a + 100;

 

{중괄호}와 {소괄호} 그리고 return이 요구되는 케이스 들이 있다.

•  인자가 여러개거나, 하나도 없으면 {소괄호}를 써야한다.

// 기존 이름 없는 함수
function (a, b) {
	return a + b + 100;
}

// 화살표 함수
(a, b) => a + b + 100;

// 기존 이름 없는 함수 (인자 없음)
let a = 4;
let b = 2;
function () {
	return a + b + 100;
}

// 화살표 함수 (인자 없음)
let a = 4;
let b = 2;
() => a + b + 100;

 

• 만약 함수 body가 여러라인이 필요하다면 {중괄호}와 return이 필요하다.

// 기존 이름없는 함수
function (a, b) {
	let chuck = 42;
	return a + b + chuck;
}

// 화살표 함수
(a, b) => {
	let chuck = 42;
	return a + b + chuck;
}

 

이름 있는 함수는 변수 처럼 생성될 수 있다.

// 기존 함수
function bob (a) {
	return a + 100;
}

// 화살표 함수
let bob = a => a + 100;
bob(10) // 110;

 

 

Ref. 

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions