call, apply, bind 의 차이를 말해보세요.

call(), apply(), bind() 의 차이는?

차이를 물어보았지만, 먼저 공통점에 대해 간단히 얘기하며 설명하자면, Function.prototype 아래에 있는 메서드들입니다.

그리고 세 함수 모두 this 를 바인딩하는 것과 관련이 있습니다.

Function.prototype.call()

call() 의 역할은 간단히 설명하자면, 첫번째 인자를 this 로 이용하고 이후의 인자들은 함수의 인자로 이용됩니다.

아래의 코드로 설명할 수 있습니다.

function printProductStock(stock) {
  console.log(`Product name is ${this.name}`);
  console.log(`Product price is $${this.price}`);
  console.log(`There are ${stock} left in stock`);
}

const product1 = {
  name: "mouse",
  price: "10",
};

printProductStock.call(product1, 3);

/*
> "Product name is mouse"
> "Product price is $10"
> "There are 3 left in stock"
*/

printProductStock(3);

/*
> "Product name is "
> "Product price is $undefined"
> "There are 3 left in stock"
*/

printProductStock 는 this 가 없다면, 정상적인 메세지를 남길 수 없는 함수입니다. 하지만, 함수 스코프 내부에서 this 에 정의된 값이 없습니다. 이 때, call() 을 이용해 this 를 바인딩할 수 있습니다.

Function.prototype.apply()

function printProductStock(stock) {
  console.log(`Product name is ${this.name}`);
  console.log(`Product price is $${this.price}`);
  console.log(`There are ${stock} left in stock`);
}

const product1 = {
  name: "mouse",
  price: "10",
};

printProductStock.apply(product1, [3]);

/*
> "Product name is mouse"
> "Product price is $10"
> "There are 3 left in stock"
*/

함수의 인자를 배열로 받는다는 것이 apply() 와 call() 과 단 한가지 다른 점입니다.

Function.prototype.bind()

function printProductStock(stock) {
  console.log(`Product name is ${this.name}`);
  console.log(`Product price is $${this.price}`);
  console.log(`There are ${stock} left in stock`);
}

const product1 = {
  name: "mouse",
  price: "10",
};

const printMouseStock = printProductStock.bind(product1);

printMouseStock(3);

bind 는 this 가 바인딩된 함수를 반환합니다. bind 의 두번째 인자부터는 새롭게 반환되는 함수에 고정적으로 넘겨줄 인자를 순서대로 삽입할 수 있습니다.

bind(thisArg);
bind(thisArg, arg1);
bind(thisArg, arg1, arg2);
bind(thisArg, arg1, arg2, /* …, */ argN);