[JS] bind 메소드로 this 제어하기

bind 메소드는 자바스크립트에서 함수를 호출할 경우 사용할 수 있는 내장 메소드이다.

 

기본 문법은 다음과 같다.

function.bind(thisArg, [arg1, arg2, ...])

 

- thisArg: this가 가리킬 객체를 지정

- arg: 함수의 인자로 전달할 값

 

이 때 thisArg는 선택옵션이며, null을 지정할 수도 있다.

bind 메소드를 사용하면 새로운 함수를 반환한다는 점도 알아두자.

 

MDN에 나와있는 예제로 이해해보자.

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

module 이라는 객체를 생성하고, 그 안에 변수 x와 getX를 저장하였다.

 

console.log(getX);

// 결과: 42

getX에서 this가 가리키는 대상은 getX가 포함된 module 객체이므로 올바르게 출력된다.

 

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope

//결과: undefined

getX의 값을 unboundGetX라는 변수에 새로 저장하고 해당 변수를 출력하자 undefined 에러가 발생한다.

 

왜일까?

 

module.getX = function() { return this.x }이므로,

첫 줄 코드는 const unboundGetX = function() { return this.x }와 같다

 

이때 unboundGetX 내에는 function() { return this.x }라는 값만 존재할 뿐 x라는 대상이 없으므로 this.x는 아무것도 가리킬 수 없게 된다.

 

이때 사용할 수 있는 내장 메소드가 bind이다.

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());

//결과: 42

unboundGetX 함수에 bind 메소드를 활용하여 this가 가리킬 대상을 module로 지정하는 함수를 반환한 후, 새로운 변수 boundGetX에 저장하고 출력하자 올바른 값이 출력된다.

글 위에서 전역변수로 선언한 module 객체에는 x라는 프로퍼티가 들어있기 때문에, this가 module 객체를 가리키게 될 경우 올바르게 작동하는 것이다.

 

이처럼 bind 메소드는 this가 값으로 들어있는 함수에 활용하여 this가 가리킬 대상을 임의로 지정하는 새로운 함수를 반환하는 기능을 한다. 함수를 다루다 보면 매우 자주쓰게 되는 기본 메소드이다.

 

추가적으로 bind 함수와 비교하여 apply 메소드와 call 메소드도 공부하면 좋을 것이다.

추후에 포스팅하겠다.