bind

bind?

bind는 JavaScript에서 함수의 this를 원하는 객체에 묶어서(바인딩해서) 새로운 함수를 반환하는 메서드입니다.

보통 함수 안에서 this는 호출되는 방식에 따라 달라지는데요:

• 일반 함수 호출 → this는 undefined (strict mode) 또는 window (non-strict mode)
• 객체의 메서드로 호출 → this는 그 객체
• 이벤트 핸들러 → 호출 방식에 따라 달라짐

이렇게 this가 헷갈리니까, 특정 객체에 강제로 고정시키는 역할을 하는 게 bind입니다.

function greet(this: any, message: string) {
  console.log(`${message}, ${this.name}`);
}

const person = { name: '지민' };

const sayHello = greet.bind(person);

sayHello("안녕"); // 출력: "안녕, 지민"

• 위 예시에서 greet.bind(person)은 this가 항상 person을 가리키는 새로운 함수를 만들어 반환합니다.

 

---

 

bind의 특징

1. this 고정

함수가 어떻게 호출되든, this는 바뀌지 않습니다.

const obj = { name: '지민' };

function printName(this: any) {
  console.log(this.name);
}

const boundFn = printName.bind(obj);

boundFn(); // "지민"
setTimeout(boundFn, 1000); // "지민" (여전히 유지)

• 일반 함수였다면 setTimeout에서 this가 undefined가 되지만, bind를 사용했기 때문에 안전합니다.

---

2. 인자 부분 적용 (Partial Application)

bind는 this 뿐만 아니라 앞부분 인자도 미리 고정할 수 있습니다.

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

const double = multiply.bind(null, 2); // a = 2 고정

console.log(double(5)); // 10

 

 

 

---

 

3. bind와 call, apply의 차이

• bind: 새로운 함수를 반환 (즉시 실행 X)
• call: this를 바인딩하고 함수를 즉시 실행 (인자를 쉼표로 전달)
• apply: this를 바인딩하고 함수를 즉시 실행 (인자를 배열로 전달)

function greet(this: any, message: string) {
  console.log(`${message}, ${this.name}`);
}

const person = { name: '지민' };

greet.call(person, "안녕");  // 즉시 실행
// 출력: "안녕, 지민"

greet.apply(person, ["하이"]); // 즉시 실행
// 출력: "하이, 지민"

const boundGreet = greet.bind(person);
boundGreet("헬로"); // 나중에 실행 가능

 

 

예시

React (클래스형 컴포넌트)

 

옛날 React에서는 클래스형 컴포넌트에서 이벤트 핸들러의 this 문제를 해결하기 위해 bind를 자주 사용했습니다.

class MyButton extends React.Component {
  name = "지민";

  handleClick() {
    console.log(this.name);
  }

  render() {
    return <button onClick={this.handleClick.bind(this)}>클릭</button>;
  }
}

 

 

Angular/TypeScript

Angular에서는 보통 bind 대신 함수를 사용합니다.

화살표 함수는 자신만의 this를 가지지 않고, 상위 스코프의 this를 자동으로 가져오기 때문입니다.

class ExampleComponent {
  name = '지민';

  // 함수 → this가 자동으로 컴포넌트 인스턴스를 가리킴
  logName(){
    console.log(this.name);
  }
}

 

 

 

 

정리

• bind는 함수의 this를 고정하고 새로운 함수를 반환한다.
• 일부 인자를 미리 적용할 수 있다.
• bind는 call/apply와 달리 함수를 즉시 실행하지 않는다.
• React 클래스형 컴포넌트에서는 필수였지만, 최근에는 화살표 함수 사용으로 줄어드는 추세다.
• Angular/TypeScript 환경에서는 거의 화살표 함수로 대체된다.