#TIL : 나만 모르고 있었던 this 💡

테스트 문제를 풀고 나서 this 개념이 부족하다는 사실을 알게 되었다. this 개념을 공부하고 다시 한번 정리 차원에서 작성해본다.

 

객체 fruites의 메서드 humanNames를 호출했을 때 아래와 같은 답을 출력해야 한다.

 

fruites.humanNames(); // [ "Kate loves apple", "Jenny loves apple"];

 

아래와 같이 작성했다. 왜 내가 원하는 답이 나오지 않을까? 역시나 this 바인딩의 문제였다.

 

var fruites = {
  name: 'apple',
  human: [
    { name: 'Kate', age: 20 },
    { name: 'Jenny', age: 20 }
  ],
  humanNames: function () {
    return this.human.map(function(value) {
    console.log(this); // ??
      return `${value["name"]} plays ${this.name}`;
  })
 }
};

 

콜백 함수의 경우, this는 전역 객체에 바인딩된다. 당연히 this.name의 this는 window 객체가 된다. 따라서 전역 객체에 name이 정의되어 있지 않기 때문에 ["Kate loves ", "jenny loves "] 값이 반환되었다.

 

위의 코드의 this.name 부분을 "apple"이라고 명시해주면 제일 좋지만, 나는 this.name을 어떻게든 사용해보고 싶었다. 

 

해결 방법으로는 this를 명시적으로 바인딩 해주면되었다. 

 

1 ) map() 메서드 인자로 사용된 this는 map() 메서드에서 콜백 함수를 실행할 때 this로 사용되는 값이다.

var fruites = {
  name: 'apple',
  human: [
    { name: 'Kate', age: 20 },
    { name: 'Jenny', age: 20 }
  ],
  humanNames: function () {
    return this.human.map(function(value) {
    console.log(this);//?
      return `${value["name"]} plays ${this.name}`;
  }, this)
 }
};

 

2 ) bind() 메서드를 이용해서 this를 명시적으로 바인딩한다.

 

var fruites = {
  name: 'apple',
  human: [
    { name: 'Kate', age: 20 },
    { name: 'Jenny', age: 20 }
  ],
  humanNames: function () {
    return this.human.map(function(value) {
    console.log(this);//?
      return `${value["name"]} plays ${this.name}`;
  }.bind(this))
 }
};

 

위의 2개의 코드를 굳이 저렇게까지 this에 바인딩을 해서 객체의 프로퍼티에 접근할 필요가 있을까? 의문이 들 수 있지만, 함수 호출 방식에 따라 결정되는 this 패턴을 스스로 적용해보고 싶었다.

 

---

 

레퍼런스 코드에서는 화살표 함수를 사용해서 문제를 해결했다. 

 

var fruites = {
  name: 'apple',
  human: [
    { name: 'Kate', age: 20 },
    { name: 'Jenny', age: 20 }
  ],
  humanNames: function () {
    return this.human.map(value => value.name + " loves apple");
 }
};

 

함수 호출 시, 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 결정된다고 했다. 그런데 화살표 함수 호출시, this에 바인딩할 객체는 상위 스코프의 this를 가리킨다. 여기서 this는 객체 fruites다.

 

결론적으로 함수 호출 방식에 따라 결정되는 this와 화살표 함수가 선언될 때 this에 바인딩할 객체가 결정되는 차이점을 알고 있었더라면 해당 문제를 쉽게 해결할 수 있었을 것이다. 

 

정리하자면, 함수 호출 방식에 의해 this에 바인딩할 객체는 동적으로 결정된다면 화살표 함수의 this는 화살표 함수 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.