자바스크립트 apply, call, bind

자바스크립트의 숫자, 배열, 문자열 등이 메서드를 가지고 있듯이 함수 역시 메서드를 가지고 있다. 그 중에 중요한 세 가지를 한 번 짚어보려고 한다. 

함수의 실행 방법

자바스크립트에서 함수를 실행하는 방법에는 세 가지가 있다. 함수명 뒤에 ()를 붙이는 것, 그리고 함수의 기본 메서드인 call과 apply를 이용하는 것이다. 아래의 예시 코드를 보자.

function greet (name) {
  return 'Hello ' + name;
}
 
console.log(greet('World'));
console.log(greet.call(null, 'World'));
console.log(greet.apply(null, ['World']));
 

call과 apply 모두 null 다음에 함수의 인자를 넘겨주는 것을 알 수 있다. 맨 앞에 위치한 null은 함수에 적용할 this를 의미한다. 다음을 보면 알 수 있다.

function greet (name) {
  return 'Hello ' + name + ' '+ this.tag;
}
const tag = { tag: 'Everybody' };
 
console.log(greet.call(tag, 'World')); // Hello World Everybody'
 

apply와 call의 차이

위에서도 살펴봤듯이 apply와 call은 첫 번째 인자로 바인딩할 this를 넘겨주고 그 다음부터 함수의 인자를 넘겨준다. 다만, call은 일반적인 함수의 실행과 똑같이 넘겨주는 반면 apply는 배열로 넘겨준다는 점이 차이점이다. 

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

함수의 this를 바꿔주는 bind

bind는 함수의 this를 바꿔주는 역할을 한다. 바꿔주기만 하고 실행은 하지 않는다. bind는 화살표 함수가 나오기 이전에 콜백함수에서 가리키는 this가 달라 원하는 대로 동작하지 않을때 사용하던 메서드이다. 아래는 this가 달라서 원하는대로 동작하지 않는 경우이다.

function Person (name) {
  this.name = name;
}
 
Person.prototype.greet = function (callback) {
  callback();
}
 
const sayHelloByKorean = function () {
  console.log('안녕 ' + this.name);
}
 
const person = new Person('Apple');
person.greet(sayHelloByKorean);
 

sayHelloByKorean 함수 내부에서 this.name을 참조하고 있지만 sayHelloByKorean의 this는 undefined이므로 에러를 발생시키게 된다. 원하는대로 동작하기 위해선 sayHelloByKorean 함수에 person을 bind 시켜주면 된다.

function Person (name) {
  this.name = name;
}
Person.prototype.greet = function (callback) {
  callback();
}
const sayHelloByKorean = function () {
  console.log('안녕 ' + this.name);
}
const person = new Person('Apple');
person.greet(sayHelloByKorean.bind(person));