[JavaScript] call, apply and bind

자바스크립트에서는 함수도 객체로 다뤄진다. call(), apply(), bind()는 모두 함수 실행을 제어하기 위해 사용되는 메소드이다. call()과 apply()는 ES5에 도입된 문법이고 bind()는 그후 ES5에 도입되었다.

함수를 즉시 실행하고자 할 때는 call()과 apply()를 사용하고, bind()는 나중에 bound된 함수를 리턴 받아 사용하므로 이후에 실행될 함수를 생각하며 써야 한다.

const user = {
    name: 'Hannah'
}
const profile = function (location, language) {
    return `${this.name} is a ${language} programmer, who lives in ${location}`;
}

console.log(profile.call(user, 'Seoul', 'JavaScript'));
// Hannah is a JavaScript programmer, who lives in Seoul

const arguments = ['Seoul', 'JavaScript'];
console.log(profile.apply(user, arguments))
// Hannah is a JavaScript programmer, who lives in Seoul

 

call()과 apply()는 각각 첫 번째 인자로 받는 값을 this 컨텍스트로 설정한다. 차이점은 apply()가 두 번째로 받는 파라미터가 배열이라는 점이다. ES6의 전개연산자를 사용하면 사실 아래처럼도 사용할 수 있다.

 

console.log(profile.call(user, ...arguments));
// Hannah is a JavaScript programmer, who lives in Seoul

bind()는 즉시 실행되지 않는다. 앞서 설명한 것처럼 바운드된 함수가 리턴되어 나중에 호출된 때에 받아오게 된다. bind()는 첫 번째 파라미터로 바운드된 함수가 호출되는 타겟 함수 내 this 컨텍스트를 설정해주기 위해 사용된다.

const bound = profile.bind(user);
console.log(bound(...arguments)); // Hannah is a JavaScript programmer, who lives in Seoul

위 코드에서 보는 것처럼 먼저 컨텍스트를 설정해준 함수를 만들고, 나중에 필요할 때 새로운 파라미터와 함께 호출해준다.

 

화살표 함수와는 약간의 차이가 있으니 알아두면 좋다. bind(this)를 사용할 때는 함수의 한정된 버전을 만든다면, 화살표 함수는 아무것도 바인딩하지 않고 단지 this를 갖지 않을 뿐이다. 그래서 외부에서 this를 찾는다.

 

Reference

practical application of apply, call, and bind
arrow function