화살표 함수 표현은 전통적인 함수표현의 간편한 대안.
하지만, 화살표 함수는 몇 가지 제한점이 있음.
- this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
- new.target키워드가 없습니다.
- 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
- 생성자(Constructor)로 사용할 수 없습니다.
- yield를 화살표 함수 내부에서 사용할 수 없습니다.
구문
기본 구문
1. (매개변수1, …, 매개변수N) => { statements }
2. (매개변수1, …, 매개변수N) => expression
3. (매개변수1, …, 매개변수N) => { return expression; }
// 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
// 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
// 매개변수가 하나뿐인 경우 괄호는 선택사항:
1. (매개변수가 하나) => { statements }
2. 매개변수가 하나 => { statements }
// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }
JS.INFO
요약
화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다. 본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 합니다.
1. 중괄호 없이 작성: (...args) => expression
– 화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.
2. 중괄호와 함께 작성: (...args) => { return body }
– 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 합니다.
모던자바스크립트
// 매개변수 지정 방법
() => { ... } // 매개변수가 없을 경우
x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
// 함수 몸체 지정 방법
x => { return x * x } // single line block
x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.
() => { return { a: 1 }; }
() => ({ a: 1 }) // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.
() => {
const x = 10;
return x * x;
}; // multi line block.
