binding에 대해

binding은 JS에서 중요하게 사용되는 개념 중 하나이다.

 

객체 내에 선언된 메서드에 this 가 사용되었을 때

객체 외부에서 해당 메서드를 호출하면 this가 자신이 속해있는 객체를 레퍼런스 하지 못했다.

 

예를 들어

this.x = 9;
let module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

let retrieveX = module.getX;
retrieveX(); 	// 9

// module과 바인딩된 'this'가 있는 새로운 함수 생성
let boundGetX = retrieveX.bind(module);
boundGetX(); // 81

// 출처: MDN Web Docs

 

위와 같은 결과가 발생하는 이유는 this의 동작 방식이 나에게 익숙한 Java에서의 방식과 다르기 때문이었다.

(this의  동작방식은 여기서 확인 가능합니다.)

 

bind는 어찌보면 생성자와 비슷한 역할을 한다고 볼 수 있다.

위 예시에서 module이라는 객체의 getX 함수를 retrieveX에 저장하면 retrieveX의 this는 더 이상 module 객체를

바라보지 않는다.

 

이때 boundGetX  함수에 module 객체를 바인딩 해주면 결과적으로 아래와 같이 기존 함수를 오버라이딩한 것처럼 새로운 함수를 생성한다.

boundGetX === getX() { return module.x; }

 

바인딩을 통한 새로운 함수, 객체의 생성의 장점은 기존 것의 변경에 무관하게 작동한다는 것이다.

규모가 큰 프로젝트일수록 this의 관리가 어려운 상황에 놓이는데 binding을 통해 조금 더 명확한 프로그래밍이 가능할 것 같다.

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

module.getX();	// 100
boundGetX();  // 81

 

정말 공부할 내용이 많은 것 같다.