[JavaScript] What is this? this가 뭐야...

[JavaScript] What is this? this

많은 언어에서 this가 사용된다. 그러나 JavaScript에서의 this는 조금 특이한 점이 있다. mdn 문서를 확인해보자.

함수를 호출하는 방법에 따라 this가 달라진다고 되어 있다. 그리고 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정하려면 bind를 사용해야 한다고 한다. 이것들이 무슨 말일까? 한번 알아보도록 하자.

this

JavaScript에서의 this는 누가 나를 호출했는 지이다. 아래 코드를 확인해보자.

const obj = {
  display: function () {
    console.log("What is this", this);
  }
};

obj.display();

위 결과 값은 어떻게 나올까? 한번 예상해보자. 위 결과는 아래과 같다.

자기 자신이 나왔다. 즉 obj 객체가 출력되었다. 왜 그럴까? 위에 언급하였듯이 this는 누가 나를 호출했는 지가 중요하다. 여기서 호출한 것이 obj이므로 obj가 출력된 것이다. 그럼 아래 코드로 수정한 결과는 어떻게 나올까?

const obj = {
  display: function () {
    console.log("What is this", this);
  }
};

const tmpObj = obj.display;
tmpObj();

이번에도 obj 객체가 출력되었을까? 아니다 global 객체가 출력이 되었다.

결국 호출한 것이 뭔지 중요하다. 이번에는 tmpObj()로 호출을 하였기 때문에 global에서 호출한 것이다. 따라서 global 객체가 출력이 되었다.

그럼 tmpObj()을 사용하는데 this는 obj가 나오게 하고 싶으면 어떻게 할까? 이때 사용하는게 아까 말한 bind이다. bind는 호출한 것이 무엇인지 상관하지 않고 this를 고정시켜줄 수 있다. 위 코드를 아래와 같이 수정해보았다.

const obj = {
  display: function () {
    console.log("What is this", this);
  }
};

const tmpObj = obj.display.bind(obj);
tmpObj();

tmpObj를 선언할 때 obj.display에 obj를 binding 해주었다. 그럼 어떻게 될까? 결과를 확인해보자.

this는 헷갈리지만 어떻게 보면 단순하다. this === 나를 호출한 것, this를 고정하고 싶으면 binding 하면 됨. 이 2가지만 기억하면 된다.

참고자료

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.