call, apply, bind

📌 목차

• Introduction
• What is call?
• What is apply?
• What is bind?
• Usage
• Conclusion
• Reference

📌 Introduction

안녕하세요. 이번 포스팅에서는 가장 헷갈리는 call, apply, bind에 대해서 알아보겠습니다.

📌 What is call?

먼저 call을 정의하기 전에 해당 예제를 봐주세요.

const example = (a, b, c) => {
  console.log(a + b + c);
};
example(1, 2, 3); // 6
example.call(null, 1, 2, 3); // 6

example을 실행시킨 것과 마찬가지로 example.call도 똑같은 결과를 보냅니다. 눈치를 채신분도 있겠지만 call의 첫번 째 인자 뒤에는 example에 들어가는 인자를 나열합니다. 그렇다면 null은 무엇일까요? 정답은 바로 this를 대체하는 것입니다.

const obj1 = {
  name: 'eddie',
  greeting: function () {
    console.log(`Hi, ${this.name}`);
  },
};

const obj2 = {
  name: 'claire',
};

obj1.greeting(); // Hi, eddie
obj1.greeting.call(obj2); // Hi, claire

이렇게 첫번째 인자로 this를 대체 시켜줄 수 있습니다.

📌 What is apply?

apply도 call과 비슷합니다. 다음 예제를 보겠습니다.

const example = (a, b, c) => {
  console.log(a + b + c);
};
example.apply(null, [1, 2, 3]); // 6

call과 마찬가지로 첫번째 인자는 this를 대체하는것이고 call과 다른점은 두번째 인자에 array로 example에 들어가는 인자를 지정합니다.

const obj1 = {
  name: 'eddie',
  greeting: function () {
    console.log(`Hi, ${this.name}`);
  },
};

const obj2 = {
  name: 'claire',
};

obj1.greeting.apply(obj2); // Hi, claire

📌 What is bind?

그렇다면 bind는 뭘까요? call과 apply 처럼 this를 대체한다는 점에선 같지만 실행을 시켜주지는 않습니다. 다음 예제를 한번 보겠습니다.

const obj1 = {
  name: 'eddie',
  greeting: function () {
    console.log(`Hi, ${this.name}`);
  },
};

const obj2 = {
  name: 'claire',
};

const greetingClaire = obj1.greeting.bind(obj2);
greetingClaire(); // Hi, claire

이 처럼 call과 apply는 바로 실행을 시켜주는 반면 bind는 this만 바꿔준 형태로 return을 시켜줍니다.

📌 Usage

call, apply, bind는 이런식으로도 응용이 가능합니다.

function example2() {
  console.log(arguments.join()); // error;
}

위의 코드는 arguments가 유사 배열이기 때문에 실제적으로는 배열의 함수를 사용할 수 없습니다. 하지만 call을 사용한다면 달라지죠.

function example2() {
  console.log(Array.prototype.join.call(arguments));
}

example2('eddie', 2, true); // eddie,2,true

📌 Conclusion

이번 포스팅에서는 자주 쓰이지는 않지만 context를 효율적으로 변경하는 call, apply, bind에 대해서 알아보았습니다. this라는 것은 항상 까다롭기 떄문에 알고 있으면 유용하게 쓰일 수 있습니다.

📌Reference

• 제로초