[JavaScript] call, apply, bind

this를 사용하다 보면 call, apply, bind라는 메서드가 자주 등장한다. 이번에는 이 메서드들에 관하여 설명하겠다.

call

모든 함수는 call 메서드를 가지고 있다. 함수의 call 메서드를 호출할 때 인자로 객체를 전달하면 그 객체를 함수의 this에 할당하고 함수를 호출한다. 예시는 다음과 같다.

function hello(){
    console.log(`Hello ${this}!`);
}
hello.call('Mike'); // Hello Mike!

다음과 같이 hello라는 함수의 call 메서드를 호출하고 인자로 Mike라는 문자열을 전달하면 hello라는 함수의 this에 Mike가 할당하여 호출함을 확인하였다. 만약 함수가 인자를 전달받아야 한다면 다음과 같이 call 메서드에 this에 할당할 객체 다음으로 전달하면 된다.

function hello(place){
    console.log(`Hello ${this} in ${place}!`);
}
hello.call('Mike','Korea'); // Hello Mike in Korea!

apply

apply 메서드 역시 모든 함수가 메서드로 가지고 있다. call은 매개 변수를 직접 받지만 apply는 매개 변수를 배열로 받는다는 차이가 있다.

function hello(place){
    console.log(`Hello ${this} in ${place}!`);
}
hello.apply('Mike',['Korea']); // Hello Mike in Korea!

apply를 좀 더 유용하게 사용하는 경우는 두 배열을 하나의 배열로 합치는 경우이다. 예제는 다음과 같다.

var arr1 = [1, 2];
var arr2 = ['a', 'b'];
arr1.push.apply(arr1,arr2);
console.log(arr1); // [1, 2, "a", "b"]

이는 push를 이용하여 배열에 다른 배열의 요소를 요소로 삽입하는 경우다. 만약 배열의 push 매서드에 배열을 인자로 전달하면 배열 자체를 배열에 넣는다.

bind

console.log(

bind 역시 마찬가지로 모든 함수가 메서드로 가지고 있다. 함수의 bind 메서드를 호출할 때 인자로 객체를 전달하면 그 함수의 this를 객체로 할당한 함수를 반환한다. call이나 apply와 달리 함수를 호출하지 않고 함수를 반환한다. 예제는 다음과 같다.

function hello(place){
    console.log(`Hello ${this} in ${place}!`);
}
helloMike = hello.bind('Mike',['Korea']);
helloMike(); // Hello Mike in Korea!