[ES6+] 화살표 함수(Arrow function)에 대하여 - 2 (this)

[ES6] 화살표 함수(Arrow function)에 대하여 - 1 (표현식)

[ES6] 화살표 함수(Arrow function)에 대하여 - 1 (표현식)

위 게시글에 이어서 화살표 함수(Arrow function)에 대해 배워보자.

 

이번에 다룰 내용은 화살표 함수와 항상 같이 따라다니는 this에 대해서 알아보고자 한다.

---

ES5 문법에서 사용하던 일반함수의 this는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정되는데,

이와 달리 ES6문법에서 사용되는 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.

 

본문에서는 ES5와 ES6 this문법의 가벼운 비교를 통해 ES6문법에서의 this에 대해 알아보자.

(ES5 와 ES6 this의 정확한 차이점은 본문 하단의 링크를 찾아가서 읽어보자 차이점이 한눈에 보일것이다.)

---

1. ES5 일반 함수의 this

var mine = {
  it : 'it',
  mod : 3,
  records : [1, 2, 3, 4, 5, 6],
  mineRecord : function() {
    console.log(this); // mine{}

  return this.records.filter(function(x){
      console.log(this); //window
      return x % (this.mod || 2) == 0;
    });
  }
}

mine.mineRecord() // [2, 4, 6]

 

스코프를 설명하기 위해 객체 안에 함수를 선언하고 사용하였다.

 

위 예제처럼 ES5에서의 this는 mineReocrd() 함수 바로 안에서는 this가 mine{} 객체를 가리키지만,

그 안에서 사용되는 filter() 함수에서의 this는 전역객체인 window를 카리킨다.

 

그래서 return 되는 값을 보면 this.mod를 찾지 못해 [2, 4, 6] 을 반환하는것을 볼 수 있다.

 

이렇게 this의 의미가 달라지는 이유는

생성자 함수와 객체의 메소드를 제외한 모든 함수 내부의 this는 전역 객체를 가리키기 때문이다.

이를 방지하기위해 this를 담아둘 변수를 지정하거나, 함수에 bind()를 시켜주는 방법이 있긴하다.

 

2. ES6 화살표 함수의 this

let mine = {
  it : 'it',
  mod : 3,
  records : [1, 2, 3, 4, 5, 6],
  mineRecord : function() {
    console.log(this); // mine{}

  return this.records.filter( (x) => {
      console.log(this); // mine{}
      return x % (this.mod || 2) == 0;
    });
  }
}

mine.mineRecord() // [3, 6]

 

1번 예제와 동일한데 filter() 함수만 화살표 함수로 바꾸었더니 결과가 [3, 6] 이 나왔다. 

 

이는 this.mod 를 정확하게 찾았다는 의미이며,

본문 처음에 설명한 것처럼 ES6 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다는 의미이다.

---

그래도 화살표 함수를 무턱대로 사용해서는 안된다.

언제나 화살표 함수의 this는 상위 스코프의 this를 가리킨다는 특성 때문에,

this의 사용법에 따라 ES5의 this와 ES6의 this를 정확히 알고 잘 사용하는것이 좋다.

 

대부분 사용해서는 안되는 곳이라고 하면 생성자 함수, addEventListener 콜백 함수 등이 존재하기는 하는데,

그냥 ES5와 ES6의 this에 대해 정확히 알고 넘어가는것이 더 중요하다 생각된다.

---

참고 : https://devowen.com/245

JS #2. this에 대한 모든 것(ES5, ES6)

 

참고 : https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb