군것질 JavaScript - this와 bind

상황에 따라 바뀌는 this

JavaScript에서 this는 함수를 불러오는 방법에 의해 결정된다. 선언 시 정해지는 것이 아닌, 함수를 불러올 당시에 결정되며, 함수를 불러오는 주체가 this가 된다.

글만으로는 이해가 어려울 수 있으니, 간단한 예시 코드를 통해 이해해보도록 하자. 다음과 같은 객체가 있다. 하나의 숫자값과 함수를 가지고 있는 간단한 내용의 객체이다.

const 객체1 = {
	테스트값: 42,
   테스트함수: function() {
   	return this
   },
};

콘솔 창에 객체1.테스트함수()를 찍으면 다음이 반환되는 것을 볼 수 있다. 테스트함수를 불러오는 주체가 객체1이기 때문에 this는 객체1이 되고, 객체1의 정보를 반환하는 것이다.

그렇다면 함수를 불러오는 주체를 다르게 설정하게 되면 어떨까?

const 객체2 = 객체1.테스트함수
console.log(객체2()) 

객체2는 객체1.테스트함수를 상수로 설정한 것이기 때문에 사실상 같다. 하지만 객체2를 통해 테스트함수를 불러올 때 우리는 아주 다른 결과를 마주하게 된다. 같은 함수를 불러온 것인데 결과는 왜 다를까?
계속해서 this는 함수를 불러올 때 그것을 불러오는 주체에 따라 정해진다고 하였다. 객체1.테스트함수()는 객체1이 함수를 불러오는 주체가 되어 this가 되기 때문에 객체1을 반환했다.

한편, 객체2는 객체1의 테스트함수를 호출하는 것은 같지만, 호출하는 주체는 window가 된다. widow가 this가 되었으므로, window의 정보가 나타나는 것이다.

더 확실한 증거를 얻고 싶어 불러오는 함수에 다음을 추가했다.

console.log(this===객체1)

결과는 객체1.테스트함수()일 때 true, 객체2일 때 false로 나와 this가 호출되는 상황마다 바뀌는 것을 알 수 있었고, 함수를 불러오는 주체가 this로 설정되는 것을 알게 되었다.

this를 설정할 수 있는 bind

우리는 함수를 호출하는 객체가 누구냐에 따라 달라지는 JavaScript의 this의 특징을 알게 되었다. 하지만, 이러한 유동성은 때에 따라 개발에 방해되는 요소로 작용할 가능성도 있다. this를 컨트롤 하려면 함수를 불러오는 주체를 바꿔야하는데 이 과정이 어려울 수 있기 때문이다.

ES5에서 this를 컨트롤하기 위해 bind라는 기능이 등장했다. bind를 통해 어떠한 것이 this가 될 것인지 설정할 수 있는 것이다.

const 객체3 = 객체2.bind(객체1)
console.log(객체3())

bind 테스트를 위해 위와 같은 새로운 상수를 정의하였다. 만약, 기존의 this라면 객체3 역시, window가 함수를 불러오는 객체가 될 것이기 때문에 window의 정보가 반환될 것이다.

하지만, 객체3은 객체2와 같지만 bind를 통해 객체1이 this가 되도록 설정하였다. this가 객체1이기 때문에 객체3은 객체1과 같은 정보를 반환하게 된다.

참고자료

MDN, this 공식 문서
this 관련 유튜브 영상