call, apply, bind의 차이를 설명해 주세요

this

call, apply, bind의 차이를 설명해 주세요

예상 시간: 5분

30초 답변

세 메서드는 모두 함수 호출 시점의 this를 직접 지정하기 위해 사용합니다. call과 apply는 함수를 바로 실행한다는 점이 같고, 인자를 넘기는 방식만 다릅니다. call은 fn.call(thisArg, a, b)처럼 나열하고, apply는 fn.apply(thisArg, [a, b])처럼 배열로 넘깁니다.

bind는 fn.bind(thisArg)처럼 새 함수를 만들어 나중에 실행할 수 있게 합니다.

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

bind로 만든 함수에 다시 bind를 호출하면 this가 바뀌나요?

이미 bind로 고정된 this는 다시 bind를 호출해도 바뀌지 않습니다. 새로 인자를 더 붙일 수는 있지만, 처음 고정된 this가 유지됩니다.

function sayName() {
  return this.name;
}
 
const bound = sayName.bind({ name: "A" });
const rebound = bound.bind({ name: "B" });
 
rebound(); // "A"

이 질문은 bind가 원본 함수를 수정하는지, 아니면 새 함수를 만드는지 확인하려는 질문에 가깝습니다. 답할 때 “첫 번째 bind 결과 함수의 this는 이미 고정된다”고 말하면 됩니다.

bind로 this를 고정했는데 new로 호출하면 어떻게 되나요?

이건 꽤 끈질긴 꼬리질문입니다. bound function을 new로 호출하면, bind로 넘긴 thisArg는 무시되고 새로 생성된 객체가 this가 됩니다. 다만 bind로 미리 넣어둔 인자는 유지됩니다.

function Person(name) {
  this.name = name;
}
 
const BoundPerson = Person.bind({ name: "ignored" }, "Joon");
const person = new BoundPerson();
 
console.log(person.name); // "Joon"

그래서 bind는 this를 항상 절대적으로 이긴다고 말하면 틀릴 수 있습니다. constructor 호출에서는 예외가 있습니다.

call/apply의 첫 번째 인자로 null이나 undefined를 넘기면 어떻게 되나요?

strict mode인지에 따라 달라집니다. strict mode가 아닌 일반 함수에서는 null이나 undefined가 전역 객체로 대체될 수 있습니다. strict mode에서는 그대로 null 또는 undefined가 this로 들어갑니다.

function showThis() {
  "use strict";
  return this;
}
 
showThis.call(null); // null

이 질문은 this가 함수 선언 위치가 아니라 호출 방식과 strict mode 영향을 받는다는 점을 확인하려는 질문입니다.

부가 설명

function introduce(prefix, suffix) {
  return `${prefix} ${this.name}${suffix}`;
}
 
const user = { name: "Joon" };
 
introduce.call(user, "Hi", "!");
introduce.apply(user, ["Hi", "!"]);
 
const boundIntroduce = introduce.bind(user, "Hi");
boundIntroduce("!");

결과는 비슷하지만, 사용하려는 상황이 조금 다릅니다.

지금 바로 호출해야 하고 인자가 이미 나열되어 있으면 call
지금 바로 호출해야 하고 인자가 배열로 준비되어 있으면 apply
나중에 호출할 콜백으로 넘겨야 하면 bind

요즘은 spread syntax 덕분에 apply의 사용 빈도가 줄었습니다.

introduce.call(user, ...["Hi", "!"]);

그래도 apply를 알아야 하는 이유는 오래된 코드나 라이브러리 내부에서 아직 보일 수 있고, “인자 배열을 펼쳐 호출한다”는 의도가 드러나는 경우가 있기 때문입니다.

한 줄 정리

call과 apply는 this를 바꿔 즉시 실행하고, bind는 this가 고정된 함수를 나중에 쓰려고 만들어 둡니다.