🔍 화살표 함수란?
함수를 정의하는 방법으로는 함수선언문 과 함수표현식을 배웠었다.
// 함수선언문
function sum (x, y) {
return x + y;
}
// 함수표현식
const subtract = function (x, y) {
return x - y;
}ES6가 등장하며 더욱 간략하게 함수를 정의할 수 있는 화살표 함수(Arrow Function)가 생겼다.
// 화살표 함수
const multiply = (x, y) => {
return x * y;
}이 화살표 함수로 함수를 정의할 때 생략할 수 있는 몇가지 규칙이 있다. 자세히 알아보자.
📌 1) 매개변수가 한 개일 때 소괄호를 생략할 수 있다.
() => { ... } // 매개변수가 없을 경우, 소괄호 생략 ❌
x => { ... } // 매개변수가 한 개인 경우, 소괄호 생략 ⭕
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호 생략 ❌📌 2) 함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 중괄호를 생략할 수 있다.
const squre = x => x * x
const square = x => { return x * x }
const square = function (x) {
return x * x
}위 코드 3개는 동일하게 작동한다.
※ 이때 코드블록 내부가 값으로 평가 될 수 있으면 return키워드를 생략할 수 있다. ※
(상위 코드 2개가 이를 증명한다.)
🔍 화살표 함수와 일반 함수의 차이점
- this를 가지지 않는다.
- arguments를 지원하지 않는다.
- new와 함께 호출할 수 없다.
- 이벤트 메소드에 콜백함수로 쓰면 안된다.
- 화살표 함수는 super가 없다.
📚 요약
화살표 함수는 본문이 한 줄이 아닌 함수를 작성할 때 유용하다.
본문이 한줄이 아니라면 다른 방법으로 화살표 함수를 작성해야한다.
1> 중괄호 없이 작성
(...args) => expression// 화살표 오른쪽에 표현식을 둔다.
함수는 이 표현식을 평가하고 평가 결과를 반환한다.
2> 중괄호 작성
(...args) => { body }// 본문이 여러 줄로 구성되어있다면 중괄호를 사용해야한다.
다만, 이 경우 반드시return지시자를 사용해 반환값을 명기해 주어야한다.
