자바스크립트 call, apply, bind 설명

call과 apply 메소드는 기본적으로 함수를 호출하는 역할을 합니다. 그렇다면 기존 함수 호출과 차이점은 무엇일까요? 바로 해당 메소드를 사용해 함수를 '실행'하면, 함수의 첫 번째 인자로 전달하는 객체에 this 를 '바인딩'할 수 있다는 것입니다. 이를 통해 유사 배열 arguments 객체에 배열 메서드를 사용할 수 있습니다. 반면, bind는 첫 번째 인자를 this에 바인딩하지만 함수를 '실행하지 않으며', 새로운 함수를 반환합니다.

 

call

call을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩합니다.

function logName (a, b, c) {
  console.log(this.name);
  console.log(a + b + c);
}

const person = {
    name: 'Hwi'
};

logName.call(person, 1, 2, 3);
// Hwi 
// 6

apply

apply을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩합니다. call과의 차이점이라면 인자를 배열의 형태로 전달한다는 것입니다. 이때, 인자로 배열 자체가 전달하는 것이 아니라 배열의 요소들이 값으로 전달됩니다.

function logName (a, b, c) {
  console.log(this.name);
  console.log(a + b + c);
}

const person = {
    name: 'Hwi'
};

logName.apply(person, [1, 2, 3]);
// Hwi
// 6

bind

bind는함수의 첫 번째 인자에 this 를 바인딩한다는 점은 같지만, 함수를 실행하지 않으며 새로운 함수를 반환합니다. 즉, 반환된 새로운 함수를 실행해야 원본 함수가 실행됩니다.

function logAge (a, b, c) { // 원본 함수
  console.log(this.age);
  console.log(a + b + c);
}

const person = {
    age: 31
};

const myAge = logAge.bind(person, 1); // 새로운 함수

myAge(2, 3);
// 31
// 6

마치며

call 메소드는 함수를 실행하고, 첫 번째 인자에 this 를 바인딩하며, 이후의 값을 함수의 인자로 전달합니다. bind 메소드는 함수를 실행하고, 첫 번째 인자에 this 를 바인딩하며, 이후의 값을 배열의 형태로 받아 차례로 함수의 인자로 전달합니다. bind 메소드는 함수를 실행하지 않으며, 첫 번째 인자에 this를 바인딩한 새로운 함수를 반환합니다. 각 메소드를 통해 전달할 수 있는 인자의 갯수에는 제한이 없습니다.