[JavaScript] Bind()이란?

Bind()이란

새롭게 바인딩한 함수를 만드는 함수로, 바인딩한 함수는 원본 함수 객체를 감싸는 함수로써, 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 된다.

 

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

const unboundGetX = module.getX;
console.log(unboundGetX());  //undefined

 

unboundGetX에 변수 module의 getX함수를 받아와 실행시킨 코드이다. getX의 return값인 x : 42. 즉, 42가 출력될 것으로 예상했지만 예상과 달리 undefined가 실행되었다.

 

즉, unboundGetX함수의 this에는 name이라는 프로퍼티가 존재하지 않았던 것이고 자연스래 window객체를 참조하게 되고 window에 존재하지 않으므로 undefined가 호출된 것이다.

 

반면, bind를 활용한다면?

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

const unboundGetX = module.getX;
console.log(unboundGetX());

const boundGetX = unboundGetX.bind(module);   // bind 사용
console.log(boundGetX()); //42

 

unboundGetX에 bind 메서드를 이용해 module객체를 인자로 받았다. 그 후 새로만든 boundGetX 객체에 넣어 호출하면 원하는 값을 얻을 수 있다.
정확히 말하자면 unboundGetX의 this에 module을 전달한 것이다.

---

사라진 this

• 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다.

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

setTimeout(user.sayHi, 1000); // Hello, undefined!

• setTimeout에 객체에서 분리된 함수인 user.sayHi가 user를 잃어버리고 전달되기 때문이다.
• 인수로 전달받은 함수를 호출할 때, this에 window를 할당한다.

bind

let boundFunc = func.bind(context);

• 모든 함수는 this를 수정하게 해주는 내장 메서드 bind를 제공한다.
• func.bind(context)는 함수처럼 호출 가능한 특수 객체를 반환한다.

// func.bind(context, ...args)는 this가 context로 고정되고 인수도 고정된 함수 func를 반환함
let user = {
  firstName: "John",
  say(phrase) {
    alert(`${phrase}, ${this.firstName}!`);
  }
};

let say = user.say.bind(user);

say("Hello"); // Hello, John (인수 "Hello"가 say로 전달되었습니다.)
say("Bye"); // Bye, John ("Bye"가 say로 전달되었습니다.)

 

---

참고

[JavaScript] bind()

Javascript Binding과 함께 알아보는 apply(), call(), bind()

 

함수 바인딩