[JavaScript] Arrow Functions and this

헤헤헤헤이 ~~~ 하우즛 고잉? ㅋㅋㅋ 캐나다에 살면서 출근할 때 가장 많이 하는 인사말 같아요. 동기 여러분! 하우즛 고잉? ㅋㅋㅋㅋ 오늘은 어제에 이어서 Arrow Functions에서 this를 사용하는 방법 알아보도록 하죠. 가즈아!

 

Arrow Functions and this

화살표 함수(Arrow Functions)는 몇가지 다른 사항과 제한이 있습니다.

1. 자체의 this나 super에 대한 바인딩이 없고, 메서드로 사용하면 안 됩니다.  <- 이 제한사항이 포인트
2. new.target 키워드가 없습니다.
3. 일반적으로 범위(Scope) 지정할 때, call과 apply 그리고 bind 메서드에 적합하지 않습니다.
4. 생성자(Constructors)로 사용할 수 없다.
5. 내부에서 yield를 사용할 수 없다.

위의 제한 사항은 MDN Web Docs의 내용을 참조하였습니다. 링크_영어 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions 한국어 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

Arrow function expressions - JavaScript | MDN

 

아래의 코드를 보면서 1. 자체의 this나 super에 대한 바인딩이 없고, 메서드로 사용하면 안 됩니다. 의 설명을 덧붙여 보겠습니다.

 

// JavaScript

const macBookPro16 = {
  display : 'Liquid Retina XDR display',
  memory : '32GB',
  storage : '1TB SSD',
  mention : () => {
    console.log(`2021 맥북프로16인치의 디스플레이는 ${this.display} 입니다.`);
  }
};

macBookPro16.mention();

// 출력 : 2021 맥북프로16인치의 디스플레이는 undefined 입니다.

아니 이게 머선일이고?! 어제 this 키워드를 사용했을 땐 잘 당겨 오더니, 오늘은 undefined로 뜨네...

 

아까 화살표 함수는 자체의 this나 super에 대한 바인딩이 없다고 했는데, 그 말인즉슨 어제 포스팅한 내용과는 다르게 다른 지역 범위에 있는 값을 this로 당겨 올 수가 없다는 말이 됩니다. 아래의 그림을 보도록 합시다.

 

화살표 함수는 this를 전역 범위(Global Scope)에서 당겨오려고 하고 그 값은 정해지지 않았으니 undefined로 뜨게 됩니다. 

 

---

그렇다면 어찌해야 하오?

화살표 함수를 쳐내고 메서드(객체 안에 있는 함수)로 만들면 제대로 출력이 됩니다.

 

 

빨간 밑줄처럼 바꾸어주면 제대로 출력이 되는 아주 대견한 모습을 볼 수 있습니다.

 

---

오늘의 느낌

점점 복잡해지지만 난 절대 지지 않지 캬캬캬캬캬캬