bind 메서드

bind 메서드는 JavaScript의 함수 메서드 중 하나로, 특정 객체를 this로 영구적으로 바인딩한 새로운 함수를 반환합니다.

📌 bind()의 주요 특징

1. 원본 함수는 변경되지 않고, 새로운 함수를 반환합니다.
2. 첫 번째 인자로 this로 사용할 객체를 지정할 수 있습니다.
3. 이후 추가적인 인자를 넘기면 해당 인자들이 기본값으로 설정됩니다.

---

✅ bind() 기본 예제

자바스크립트

const person = {
  name: "철수",
  greet: function () {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  },
};

const sayHello = person.greet.bind(person); // person 객체를 this로 바인딩
sayHello(); // "안녕하세요, 저는 철수입니다."

 

---

✅ bind()를 활용한 부분 적용 함수(Partial Application)

bind()를 사용하면 특정 인수를 미리 설정할 수 있습니다.

 

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

const double = multiply.bind(null, 2); // 첫 번째 인자를 2로 고정
console.log(double(5)); // 10 (2 * 5)

---

✅ bind()를 사용해야 하는 경우

1. this를 유지해야 하는 경우 (이벤트 핸들러, setTimeout 등)
2. 부분 적용 함수(Partial Application)를 만들 때
3. 특정 객체의 메서드를 다른 변수에 할당할 때

---

🚀 bind()대 call()대apply()

메서드특징

bind	새로운 함수 반환 (즉시 실행 X)
call	즉시 실행 + this 변경 가능
apply	call과 같지만 배열로 인자 전달

 

function say(age) {
  console.log(`${this.name}은 ${age}살입니다.`);
}

const user = { name: "지훈" };

say.call(user, 25);  // 즉시 실행 ("지훈은 25살입니다.")
say.apply(user, [30]); // 즉시 실행 ("지훈은 30살입니다.")

const boundFunc = say.bind(user);
boundFunc(28); // 새로운 함수 반환 후 실행 ("지훈은 28살입니다.")

---

✅ bind()를 활용하면 좋은 예시: setTimeout 문제 해결

  콜백 함수 내부에서의 this 는 전역 객체를 바라보기 때문에 bind 를 사용하여 해결이 가능하다.
  this 바인딩 참조 :  https://yongar2002.tistory.com/63

const counter = {
  count: 0,
  increase: function () {
    console.log(++this.count);
  },
};

setTimeout(counter.increase.bind(counter), 1000); // this를 유지하여 올바르게 실행됨

---

🎯 정리

• bind()는 새로운 함수를 반환하며, this를 영구적으로 바인딩
• 첫 번째 인자로 this, 이후 인자로 기본값을 설정 가능
• call()/apply()는 즉시 실행하지만 bind()는 새로운 함수 생성
• 이벤트 핸들러, setTimeout, 부분 적용 함수 등에 유용