(Javascript) 헷갈리는 this 고정시키기. bind, apply, call 사용법, 차이점

 

 

객체의 메서드를 호출하거나, 생성자 함수 또는 클래스로 새로운 인스턴스를 만들 때, this를 많이 사용한다.

 

다른 언어와 달리 자바스크립트에서 this는 상황에 따라서 다른 것을 가리키는 경우가 있기에

 

종종 this가 무엇을 가르키는지 헷갈릴 때가 많다.

 

따라서 이번 포스팅에서는 이런 헷갈리는 this가 가리키는 것을 아예 고정시키는 메서드

 

bind, apply, call 각각의 사용법 그리고 차이점에 대해서 설명하고자 한다.

 

 

 

 

참고로 this에 관해서는 아래 포스팅에서 자세히 설명해 두었다. 

(Javascript) this란 무엇인가? this 사용방법

 

 

 

bind

bind 메서드를 사용해 함수를 호출하면, 원하는 값으로 해당 함수 내의 this 값을 영구적으로 고정시킬 수 있다.

 

이 점에서는 apply, call과 유사하지만 차이점이 있다면, 

 

 bind는 함수를 즉시 호출하지 않고, 나중에 호출할 때 사용된다는 것이다.

 

따라서 언제 호출 될지 모르는 이벤트 핸들러, 콜백 함수에서 사용하면 좋다.

 

bind 매서드는 나중에 호출돼야 되기 때문에 원래의 함수와 동일한 동작을 하는 새로운 함수를 만들어 this값을 고정시킨다.

 

따라서 apply나 call을 사용할때보다 더 많은 메모리가 사용된다. 

 

const grape = { cost: 3000 };

function getCost() {
  return this.cost;
}

const boundGetCost = getCost.bind(grape); //this를 grape로 bind
console.log(boundGetCost()); // 3000

 

 

 

call, apply

위에서 설명했듯이 call과 apply는 this 값을 고정할 수 있고,

 

함수를 즉시 호출한다는 점에서 공통점을 갖고 있다. (즉시 호출하기에 bind와 달리 새로운 함수를 만들지 않는다)

 

둘의 차이점이 있다면 call은 인자들을 쉼표로 구분하여 전달받고, apply는 인자들을 배열로 전달받는다는 것이다.

 

참고로 bind도 call처럼 인자들을 쉼표로 구분하여 전달받는다.

 

사실 apply를 사용하는 대신 call에 확산 연산자(...)를 사용하면 동일한 결과를 낼 수 있다. (굳이 apply를 쓸 필요가 없다)

 

const grape = { cost: 3000 };

function getCost() {
  return this.cost;
}

function getCost(prefix, suffix) {
  return `${prefix} ${this.cost} ${suffix}`;
}

console.log(getCost.call(grape, 'Cost is', '₩')); // Cost is 3000₩
console.log(getCost.apply(grape, ['Cost is', '₩'])); // Cost is 3000₩

 

 

 

 

 

정리 

bind와 call, apply를 정리하면서 해당 포스팅을 마무리한다. 

특징	bind	call	apply
this	this 고정
반환	새로운 함수 반환	새로운 함수 반환x
호출시점	함수 나중 호출	함수 즉시 호출
인자	쉼표로 인자를 구분해서 받음		배열로 인자를 받음