let pow = function (x) { return x * x; };
let pow = (x) => x * x;
function 8글자를 더 치지 않아도 되고, 깔끔해진다.
하지만, 편하고 간단하다고 무턱대도 쓰면 안 된다.
let whatIsThis = () => {
console.log(this); // window
};
위 코드와 같이 this가 일반 함수 선언식과는 다르게 작동한다.
화살표 함수는 this에 바인딩할 객체가 동적으로 결정된다는 것을 뜻한다.
크게 문제될 것은 아니지만, 이 특성때문에 화살표 함수로 된 class와 같은 생성자 함수로는 사용하지 못한다는 걸 의미한다.
// 화살표 함수
const person = {
name: 'Lee',
sayHi: () => console.log(`Hi ${this.name}`)
};
person.sayHi(); // Hi undefined
// 일반 함수
const person = {
name: 'Lee',
sayHi() { // === sayHi: function() {
console.log(`Hi ${this.name}`);
}
};
person.sayHi(); // Hi Lee
// 화살표 함수 프로토타입
const person = {
name: 'Lee',
};
Object.prototype.sayHi = () => console.log(`Hi ${this.name}`);
person.sayHi(); // Hi undefined
// 일반 함수 프로토타입
const person = {
name: 'Lee',
};
Object.prototype.sayHi = function() {
console.log(`Hi ${this.name}`);
};
person.sayHi(); // Hi Lee
화살표 함수의 this = 상위 객체를 가리키고 있기에 적용이 되지 않는다.
그래서 콜백 함수 혹은 간단히 함수를 표현하고 싶을 때만 사용하는 것이 좋다고 생각한다.
다른 생성자 함수와 같이 this가 들어가야 할 곳은 되도록이면 사용하지 않는 편이 좋다.
자바스크립트를 처음 배웠을 때 신기했던 문법 중 하나가 화살표 함수였는데, 아무것도 모르고 화살표 함수로 this를 사용했다가 오류가 났던 경험이 생각나네요 ㅎㅎ 코드가 간단해져서 너무 편하지만 개념을 잘 모르고 사용하면 위험하니 숙지해두는 게 중요할 것 같네요 ㅎㅎ 오늘도 수고하셨습니다 🤗🤗