[js] bind

1. 개요

JavaScript의 bind() 메서드는 함수의 this 값을 명시적으로 설정하고, 선택적으로 인자를 고정할 수 있도록 도와주는 메서드이다. bind()를 사용하면 원본 함수를 변경하지 않고, this가 특정 객체를 가리키는 새로운 함수를 생성할 수 있다.

2. 문법

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

• thisArg: 바인딩할 this 값.
• arg1, arg2, ...: 바인딩할 함수의 기본 인자들.

3. 동작 방식

1. bind()는 새로운 함수를 반환하며, 원본 함수의 this를 thisArg로 고정한다.
2. 인자를 함께 전달하면, 고정된 인자를 가지는 새로운 함수를 생성할 수 있다.
3. 원본 함수는 변경되지 않는다.

4. 예제

기본적인 this 바인딩

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

const greetBound = person.greet.bind(person);
greetBound(); // "Hello, my name is Alice"

인자 고정

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // 10

5. 활용 사례

• 이벤트 핸들러에서 this를 명확하게 설정할 때.
• 클래스 메서드에서 this 바인딩을 유지할 때.
• setTimeout 내에서 객체 메서드를 호출할 때.

6. 결론

bind() 메서드는 JavaScript에서 this 바인딩을 명확하게 제어하는 중요한 도구이다. 이를 적절히 활용하면 코드의 일관성을 유지하고, this 관련 오류를 방지할 수 있다.