자바스크립트에서는 호출과 상관없이 this를 지정하 수 있습니다. call, apply, bind 메소드가 이를 지원하죠.

call

바로 예제를 확인해보겠습니다.

function sayHello(salt, name) {
  this.salt = salt;
  this.name = name;
  return `${this.salt}! ${this.name}`;
}

const min = {};

sayHello.call(min, 'hi', 'seung'); // hi! seung

call 메소드는 함수안에서 사용된 this를 어떤 객체로 사용할지 정해줍니다. 위의 예제에서 sayHello에 사용된 this를 min 객체로 할당했죠. call의 매개변수가 더 있다면 함수의 매개변수로 전달됩니다. 즉, 각각 salt name 매개변수에 전달된 셈이죠.

apply

apply는 call 메소드와 거의 같습니다. 매개변수를 받는 방식만 다르죠. call은 일반적인 함수처럼 매개변수를 받지만 apply는 배열로 받습니다. 쉽죠?

function sayHello(salt, name) {
  this.salt = salt;
  this.name = name;
  return `${this.salt}! ${this.name}`;
}

const min = {};

sayHello.apply(min, ['hi', 'seung']);

sayHello.apply(min, array);
sayHello.apply(min, ...array); // 위의 표현과 같습니다.

bind

bind를 사용하게 되면 this를 영구히 바꾸게 됩니다. 따라서 찾기 어려운 버그의 원인이 될 수 있습니다.

const minji = {};
const inho = {};

function update(birthDate) {
	this.birthDate = birthDate;
}

const updateMinji = update.bind(minji, 1994);

updateMinji(inho, 1997);

console.log(minji); // {birthDate: 1994}
console.log(inho); // {}

먼저 bind를 사용해서 this를 minji로 할당했고 birthDate 매개변수에 1994를 전달했습니다.

이후에 this를 inho로 변경하고 싶고 birthDate를 1997로 바꾸고 싶다면 변경이 될까요? 안됩니다. bind의 동작 특성때문이죠.