[JS] 함수를 호출하는 call / apply / bind 차이점

함수 호출을 하는 방법은 함수의 이름 옆에()을 붙이는 방법으로 널리 쓰이고 있다.

자주 사용되진 않지만 함수를 호출하는 방법은 그 밖에 call, apply라는 함수를 사용하여 호출할 수 있다.

 

function foo(a, b, c) {
  console.log(a + b + c);
};
foo(1, 2, 3); // 6
foo.call(null, 1, 2, 3); // 6
foo.apply(null, [1, 2, 3]); // 6

 

1. Function.prototype.call()

두 개의 매개변수를 받는 함수이다. MDN에 따르면 아래와 같은 인자를 넘겨주어야 한다.

• thisArg: func 호출에 제공되는 this의 값
• arg1, arg2, ...: func이 호출되어야 하는 인수

간단하게 말해 첫번째 인자는 this로 설정하고 싶은 객체를 넘겨주는 것이고

두 번째 인자는 흔히 우리가 함수의 매개변수 인자를 넘겨주는 것과 동일하다.

const obj = { name : 'Jin' }

function introduce(age) {
  console.log(`안녕 내 이름은 ${this.name}이고 나는 ${age}살이야`);
};

introduce(21); // 안녕 내 이름은 이고 나는 21살이야
introduce.call(obj, 21); // 안녕 내 이름은 Jin이고 나는 21살이야

 

위 코드에서 call함수로 호출할 때 첫 번째 인자에 obj 객체를 this로 넘겨주었다.

두 번째 인자에는 매개변수로 받는 age를 넘겨주었다.

즉, call 함수는 어떤 객체의 this를 넘겨줄지 결정하여 함수를 호출할 수 있는 함수이다.

2. Function.prototype.apply()

call함수와 크게 다르지 않다.

두 개의 매개변수를 받는 함수이다. MDN에 따르면 아래와 같은 인자를 넘겨주어야 한다.

• thisArg: func 호출에 제공되는 this의 값
• argsArray: func이 호출되어야 하는 인수를 지정하는 유사 배열 객체

첫 번째 인자는 call과 같은 this로 사용할 객체를 지정한다.

두 번째 인자가 call과 차이가 있는데 배열이나 유사 배열 객체를 인자로 넘겨주어야 한다.

 

this를 변환하여 배열을 매개변수로 호출하고 싶을 때 사용하면 된다.

정리하자면 call과 유일하게 다른 점은 넘겨주는 인자가 배열이냐 아니냐의 차이가 있다. 

3. Function.prototype.bind()

bind 함수는 또한 call과 차이점은 단 한 가지다. 함수를 호출하느냐 안 하느냐.

두 개의 매개변수를 받는 함수이다. MDN에 따르면 아래와 같은 인자를 넘겨주어야 한다.

• thisArg: 바인딩 함수가 타깃 함수의 this에 전달하는 값
• arg1, arg2, ...: func이 호출되어야 하는 인수

첫 번째 인자는 call과 같은 this로 사용할 객체를 지정한다.

두 번째 인자 또한 call 같은 인수로 받는다.

 

 

const obj = { name : 'Jin' }

function introduce(age) {
  console.log(`안녕 내 이름은 ${this.name}이고 나는 ${age}살이야`);
};

const bindIntroduce = introduce.bind(obj, 21);
bindIntroduce(); // 안녕 내 이름은 Jin이고 나는 21살이야

 

 

차이점은 호출을 하지 않는다는 것이다. bind 함수를 사용하면 call함수를 실행하는 함수를 리턴한다.

다시 말해 변수에 할당하여 호출하는 형태로 사용된다.