[JS ES6]-[4] 화살표 함수 사용 못하는 경우 핵심만 이해하기(중급)

안녕하세요

이번 글에서는 자바스크립트에서의  화살표함수 사용 못하는 경우와 해결법 핵심만 알려드리겠습니다.

 

이번 글에선, 화살표 함수를 사용 못하는 경우를 나열할 겁니다.
그럼 화살표 함수를 못쓰면 function 키워드 사용하면 되지 않나?라고도 생각하실 수 있는데요.
하지만 function 키워드는 this 키워드를 예측하기 어려워진다고 저번 글에서 배웠었죠?

그리고 나중에 호이스팅을 배울건데,
function 키워드는 var처럼 호이스팅 되기 때문에 코드를 예측하기 힘들어져요.

결론은 대부분 화살표 함수를 쓰고,
못쓰는 경우엔 function 대신 아래 방법으로 해결하는걸 추천 드릴게요!

 

1. 메서드 

const cat = {
  name: "meow";
  call_name: () => console.log(this.name);
}

cat.call_name(); //undefined

call_name의 메서드의 this는 자신을 호출한 객체 cat이 아니라 함수 선언 시점의 상위 객체인 전역 객체를 가리키게 됩니다.

그래서 cat 객체의 name 값을 가져오지 못하게 됩니다.

 

 

 

1.1대신 메서드 축약형 사용

const cat = {
  name: "meow",
  call_name() {
    console.log(this.name);
  } 
}

cat.call_name(); //meow

ES6에서는 메서드를 선언할 때, function 키워드를 생략한 축약 표현을 사용할 수 있습니다.

 

2. 생성자 함수(constructor)

const Person = () => {};
const kim = new Person();  //Person is not defined

화살표 함수를 생성자함수로 사용하면 에러가 납니다. 생성자 함수로는 사용할 수 없게 만들어졌습니다.

 

2.2 대신 클래스 사용

class Person {
 constructor(name) {
    this._name = name;
  }
}

let kim = new Person('kim');

console.log(kim.name);  //kim

클래스로 객체를 생성하면, 함수보다 더 명확하게 표현할 수 있습니다.

 

3. addEventListener()의 콜백함수

const button = document.getElementById("button");
button.addEventlistener("click", () => {
  console.log(this);  //window
});

addEventLIstener의 콜백함수에서는 this에 e.currentTarget이 바인딩되도록 정의되어 있습니다 이처럼 이미 this값이 정해져 있는 콜백함수의 경우, 화살표 함수를 사용하면 기존 바인딩 값이 사라지고 상위 객체(이 경우엔 전역 객체)가 바인딩되기 때문에 의도 한 대로 동작하지 않을 수 있습니다.

 

3.1 대신 e.currentTarget 사용

const button = document.getElementById("button");
button.addEventlistener("click", (e) => {
  console.log(e.currentTarget);  //button
});

 

원래 eventlistener 안에서의 this는 e.currentTarget을 가리킵니다.

그래서 this 대신에 e.currentTarget을 사용하면 됩니다.