FrontEndJavaScript

[JS] bind

FrontEnd, JavaScript

bind

Function객체에서 기본적으로 가지고 있는 메소드 중 call, apply, bind를 많이 사용하는데 이 세 가지의 차이점을 알아보자.

우선 call과 apply는 함수를 즉시 호출하고 컨텍스트를 수정할 때 사용된다.
(call과 apply에 대해 자세히 알아보기)

그러나 bind는 해당 함수를 나중에 이벤트에서 유용한 특정 컨텍스트로 호출할 때 사용된다.

정리하면, call과 apply는 즉시 함수를 호출하지만 bind는 나중에 실행될 때 함수를 호출하기 위한 올바른 컨텍스트를 갖게되는 함수를 반환한다.

bind를 사용하여 비동기 콜백 및 이벤트에서 컨텍스트를 유지 관리할 수 있고, 특정 함수에 대해 원본 함수와 동일한 본문을 갖는 바인딩된 함수를 만든다.

다음 예제를 보자.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Button(content) { 
  this.content = content;
};
 
Button.prototype.click = function() {
  document.write(this.content + ' clicked');
};
 
var myButton = new Button('OK');
myButton.click(); // OK clicked
 
var looseClick = myButton.click;
looseClick(); // undefined clicked
 
var boundClick = myButton.click.bind(myButton);
boundClick(); // OK clicked

9행에서 Button형 객체인 myButton를 만들었고, 인자 값은 OK이다. 이 때, 10행과 같이 myButton.click()을 실행하면, 프로토타입 체인에 의해서 OK clicked가 정상적으로 출력이 된다.

하지만 12행에서는 myButton.click을 looseClick에 담고, 13행에서 looseClick()을 실행했다. 그러나 이렇게 하면, 12행에서 이미 click 함수가 종료되었기 때문에 13행에서는 this.content를 찾을 수 없게 되어 undefined가 뜬다.

bind 메소드는 이와 같은 문제를 해결해준다. bind 메소드는 특정 함수에 대해 원본 함수와 동일한 본문을 갖는 바인딩된 함수를 만들기 때문에, 16행에서 boundClick()을 실행하면 정상적으로 OK clicked가 출력이 된다.


bind의 인자 추가 기능

1
2
3
4
5
6
7
8
9
var sum = function(a, b) {
  return a + b;
};
 
var add1 = sum(10, 5);
document.write(add1); // 15
 
var add2 = sum.bind(null, 5);
document.write(add2(10)); // 15

5~6행은 일반적인 함수 호출방법이다. sum이라는 함수에 인자를 전달하여 return된 값을 add1에 저장하고, 출력한다.

그러나 8행을 보면, 첫 번째 인자로 null이 주어졌고, 이후에 9행에서 add2의 인자값으로 10이 주어졌다.

이렇게 bind를 사용하면 나중에 인자값을 추가할 수 있으며 이 인자는 원래 함수의 매개변수로 전달한다. 나중에 바인딩 된 함수에 전달하는 모든 추가 매개변수는 바인딩된 매개변수 다음에 전달된다.

Share