=> (화살표 함수, Arrow Function)
: ES6 이후 등장한 화살표 함수는 함수 표현식의 한 종류로, 함수 표현식을 더욱 간결하게 작성할 수 있다. 하지만 몇가지 제안점이 있고 모든 상황에 사용할 수는 없다.
즉 화살표 함수는 함수 표현식을 간결하게 작성하여 사용하지만 제한사항이 있다.
- this나 super에 대한 바인딩이 없고, methods로 사용될 수 없다.
- new.target키워드가 없다.
- 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
- 생성자(Constructor)로 사용할 수 없다.
- yield를 화살표 함수 내부에서 사용할 수 없다.
1. 일반적인 함수 표현식
//함수 표현식
let add = function(num1, num2) {
return num1 + num2;
}2. 화살표 함수로 변환 -> function이라는 단어가 없어지고 괄호 뒤쪽에 화살표(=>)가 생김
//화살표 함수
let add = (num1, num2) => {
return num1 + num2;
}3. 코드 본문이 한줄이고, 리턴문이 있으니 아래처럼 바꿀 수 있다.
//화살표 함수
let add = (num1, num2) => (
num1 + num2;
)
// 리턴문은 중괄호를 일반괄호로 변경할 수 있다.4. 리턴문이 한 줄이라면 괄호도 생략이 가능하다.
//화살표 함수
let add = (num1, num2) => num1 + num2;5. 인수가 하나라면 괄호를 생략할 수 있다.
//화살표 함수
let sayHello = name => `Hello, ${name}`;6. 인수가 없는 경우 괄호를 생략할 수 없다.
//화살표 함수
let world = () => 'Hello World';7. 리턴문이 있다고 해도 리턴 전 여러줄의 코드가 있을 경우 일반 괄호를 사용할 수 없다.
let add = (num1, num2) => {
const result = num1 + num2; //리턴 전 다른 코드줄
return result;
} //중괄호 생략 불가
let add = (num1, num2) => num1 + num2;
// const를 지우고 이렇게 변형 가능하다.
위에 예제들처럼 훨씬 간결하게 함수를 표현할 수 있다.정리하자면
- 기존 함수 표현식에서 function 키워드를 삭제하고 인자를 받는 매개변수의 괄호()와 코드 블록{} 사이에 화살표 (=>)만 넣어주면 화살표 함수이다.
- 함수 내부의 내용이 반환값(return)만 있다면 코드블록인 중괄호{}와 return을 생략할 수 있다.
- 또하나 생략 가능한 것으로 인자가 하나만 받는다면 매개변수의 괄호()도 생략이 가능(주의: 인자가 없으면 생략 불가)하다.
1.매개변수가 하나일 경우 ()생략가능
2.없거나 2개이상일경우 ()생략불가능
3.본문이 단순 return(식or값)일 경우 {}생략가능
4.return 값이 객체일경우 {}생략 불가능
🍀 번외 - 객체 리터럴
const person = (name, age) => ({
name: name,
age: age
});객체 리터럴을 화살표 함수로 반환하는 경우, 중괄호{}를 함수 몸체로 사용하게 되면, 이는 함수 몸체로 해석되어 객체가 아닌 블록문으로 처리되기 때문에 객체를 반환하기 위해서는 괄호()를 사용하여 객체 리터럴을 감싸주어야 한다.
그리고 this 바인딩을 하지않는다는 것도 다시한번 기억하기..!!!!
const erun - {
name: 'erun',
normal: function(){
console.log(this.name);
},
arrow: () => {
console.log(this.name);
}
}
erun.normal(); // 'erun' 출력
erun.arrow(); // undefined 출력💡 실행 컨텍스트 생성시 this 바인딩을 하지 않는다.
참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
