bind

bind
this 키워드를 명시적으로 설정하기 위해 사용하는 메서드
나중에 실행
bind는 함수를 즉시 실행하지 않고, this가 바인딩된 새로운 함수를 반환한다. 나중에 필요할 때 호출하거나 이벤트 리스너에서 자주 사용한다.

const newFunc = func.bind(thisArg)

bind() 메서드는 주로 함수 호출 시 this의 컨텍스트를 고정하기 위해 사용된다.
JavaScript에서 this의 값은 함수가 어떻게 호출되는지에 따라 동적으로 결정되기 때문에 혼란을 줄 수 있다.
bind()는 이 문제를 해결하여, 어떤 방식으로 함수를 호출하든 this가 항상 원하는 객체를 가리키도록 만든다.

// 새로운 함수 = 원본 함수.bind(thisArg, arg1, arg2, ...)
const newFunc = originalFunc.bind(thisObject, 'value1', 'value2');

thisObject: newFunc이 호출될 때 this로 바인딩될 객체이다.
arg1, arg2, ...: 원본 함수에 전달할 초기 인자들이다. 이는 부분 적용 기법에 해당된다.

예제

this 컨텍스트 고정하기

객체의 메서드를 다른 곳에 전달할 때 this가 바뀌는 문제를 해결하는 데 유용하다.

const user = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// setTimeout의 콜백 함수로 user.greet를 직접 전달하면
// 'this'가 전역 객체(window)를 가리켜서 name을 찾지 못합니다.
setTimeout(user.greet, 1000); // 출력: Hello, my name is undefined

// bind()를 사용하여 'this'를 user 객체로 고정
const boundGreet = user.greet.bind(user);
setTimeout(boundGreet, 1000); // 출력: Hello, my name is John