자바스크립트 bind 언제 쓰냐

 

Function.prototype.bind() - JavaScript | MDN

 

 

bind() 메서드가 실무에서 사용되는 주요 경우

 

1. 이벤트 핸들러에서 this 컨텍스트 고정

<button id="myButton">Click Me</button>

const myObject = {
  name: 'MyObject',
  handleClick: function(event) {
    // bind를 사용하지 않았다면 여기서 this는 보통 <button> 요소를 가리킵니다.
    console.log(`클릭 이벤트 발생!`);
    console.log(`this의 name 속성:`, this.name); // bind 덕분에 myObject의 name에 접근
    console.log(`이벤트 타입:`, event.type);
  }
};

const button = document.getElementById('myButton');

// --- bind를 사용하지 않은 경우 (주석 처리) ---
// button.addEventListener('click', myObject.handleClick);
// 이 경우, handleClick 내부의 this는 버튼 요소(<button>)가 되어 this.name은 undefined 또는 빈 문자열이 됩니다.

// --- bind를 사용하여 this를 myObject로 고정한 경우 ---
button.addEventListener('click', myObject.handleClick.bind(myObject));
// 이제 handleClick 내부의 this는 항상 myObject를 가리킵니다.

console.log("버튼을 클릭해 보세요.");

설명: myObject.handleClick 메서드를 이벤트 리스너로 사용할 때, bind(myObject)를 통해 handleClick 함수 내부의 this가 클릭된 버튼 요소가 아닌 myObject 자체를 가리키도록 고정합니다. 이를 통해 메서드 안에서 this.name과 같이 객체의 속성에 올바르게 접근할 수 있습니다.

 

2. 비동기 콜백에서 this 컨텍스트 고정 (setTimeout 예시)

const timerObject = {
  message: '시간이 다 됐습니다!',
  logMessage: function() {
    // bind를 사용하지 않았다면 여기서 this는 전역 객체 또는 undefined입니다.
    console.log(this.message); // bind 덕분에 timerObject의 message에 접근
  }
};

// --- bind를 사용하지 않은 경우 (주석 처리) ---
// setTimeout(timerObject.logMessage, 1000);
// 1초 후 실행 시 logMessage 내부의 this는 전역 객체 또는 undefined가 되어 this.message는 예상대로 출력되지 않습니다.

// --- bind를 사용하여 this를 timerObject로 고정한 경우 ---
setTimeout(timerObject.logMessage.bind(timerObject), 1000);
// 1초 후 실행 시 logMessage 내부의 this는 timerObject가 되어 메시지가 올바르게 출력됩니다.

console.log("1초 후 메시지가 출력될 것입니다.");

 

설명: setTimeout의 콜백 함수로 timerObject.logMessage를 전달할 때, 기본적으로 콜백 내부의 this는 전역 객체(window) 또는 undefined가 됩니다. bind(timerObject)를 사용하여 logMessage가 실행될 때 this가 timerObject를 가리키도록 고정합니다.

 

3. 객체에서 메서드만 분리 시 this 유지

const calculator = {
  value: 10,
  add: function(a) {
    // bind를 사용하지 않았다면 여기서 this는 예상과 다를 수 있습니다.
    return this.value + a;
  }
};

// 메서드만 별도 변수에 할당
const addMethod = calculator.add;

// --- bind를 사용하지 않은 경우 ---
// console.log(addMethod(5));
// addMethod를 독립적으로 호출하면 this는 전역 객체 또는 undefined가 되어
// this.value는 예상대로 10이 아니므로 NaN 또는 오류가 발생할 수 있습니다.


// --- bind를 사용하여 this를 calculator로 고정한 새로운 함수 생성 ---
const boundAddMethod = calculator.add.bind(calculator);

// boundAddMethod를 호출하면 this가 calculator로 고정되어 있습니다.
console.log(`bind 사용 결과: ${boundAddMethod(5)}`); // 출력: bind 사용 결과: 15

 

설명: calculator.add 메서드를 addMethod라는 변수에 할당하면, addMethod는 더 이상 calculator 객체의 메서드로 취급되지 않습니다. addMethod(5)와 같이 독립적으로 호출하면 this가 깨집니다. bind(calculator)를 통해 this가 항상 calculator를 가리키는 새로운 함수 boundAddMethod를 만들어 사용하면 이 문제를 해결할 수 있습니다.

 

4. 부분 적용 (인자 미리 설정)

const displayInfo = function(prefix, suffix, data) {
  console.log(`${prefix} ${data} ${suffix}`);
};

// --- 'Log:' 접두사와 '.' 접미사를 미리 설정한 새로운 함수 생성 ---
const logWithSuffix = displayInfo.bind(null, 'Log:', '.'); // this는 중요하지 않아 null 사용

// 이제 logWithSuffix 함수는 data 인자 하나만 받으면 됩니다.
logWithSuffix('데이터1'); // displayInfo('Log:', '.', '데이터1') 와 동일하게 작동
logWithSuffix('데이터2'); // displayInfo('Log:', '.', '데이터2') 와 동일하게 작동

console.log("인자가 미리 설정된 함수를 호출했습니다.");

 

설명: displayInfo 함수는 세 개의 인자를 받지만, bind(null, 'Log:', '.')를 사용하여 this는 무시하고(null 사용), 첫 두 인자('Log:', '.')를 미리 고정한 새로운 함수 logWithSuffix를 만들었습니다. 이제 logWithSuffix는 나머지 마지막 인자(data)만 받아도 displayInfo 함수가 올바르게 실행될 수 있도록 준비되었습니다. 이것이 바로 '부분 적용'입니다.

이 예제들을 통해 bind()가 this 고정과 인자 사전 설정이라는 두 가지 주요 역할을 어떻게 수행하는지 이해하실 수 있을 것입니다.

 

 

---

 

• this 컨텍스트 고정: 이것이 bind()를 사용하는 가장 주된 목적이자 이유라고 할 수 있습니다. 메서드가 원래 객체의 this를 잃어버리는 상황에서 this를 명시적으로 고정하기 위해 사용됩니다.
• 부분 적용 (인자 미리 설정): 인자를 미리 설정하는 기능도 bind()의 유용한 활용법이지만, this 컨텍스트 문제 해결만큼 자주 사용되지는 않거나 다른 방법(클로저 등)으로 대체되기도 쉽습니다.

const greet = (greeting, name) => {
  console.log(`${greeting}, ${name}!`);
};

// 'Hello'를 첫 번째 인자로 미리 고정한 새로운 함수를 만듭니다.
const sayHello = greet.bind(null, 'Hello');

sayHello('World'); // 여기서 'World'는 두 번째 인자로 전달됩니다.
// 결과: Hello, World!

sayHello('Jane'); // 여기서 'Jane'은 두 번째 인자로 전달됩니다.
// 결과: Hello, Jane!

 

---

 

bind()는 자바스크립트 함수의 내장 메서드입니다. bind()를 호출하면 원본 함수의 this 값을 영구적으로 고정하고, 선택적으로 일부 인자를 미리 설정한 새로운 함수를 생성하여 반환합니다. 여기서 중요한 점은 bind()를 호출한다고 해서 원본 함수가 즉시 실행되는 것은 아니라는 것입니다. bind()는 "나중에 실행될 함수의 환경을 미리 설정해두는" 역할을 합니다.

실무에서 bind()가 활용되는 두 가지 주요 경우

1. this 컨텍스트 고정
   • 문제: 자바스크립트에서 함수의 this 값은 함수가 어떻게 호출되느냐에 따라 달라집니다. 객체의 메서드를 변수에 할당하거나 콜백 함수로 전달할 때, 원래 메서드가 속해 있던 객체와의 연결이 끊어지면서 this가 예상치 못한 값(예: 전역 객체나 undefined)을 가리키게 되는 문제가 자주 발생합니다.
   • bind()의 역할: bind()는 이렇게 this 컨텍스트가 깨지는 것을 방지하고, 메서드를 호출할 때 this가 항상 원래 의도했던 객체를 가리키도록 고정시켜 줍니다.
   • 실무 예시:
     • 이벤트 핸들러: DOM 요소에 이벤트 리스너를 붙일 때 객체의 메서드를 콜백 함수로 사용하는 경우 (element.addEventListener('click', myObject.handleClick.bind(myObject))) handleClick 내부의 this가 클릭된 element가 아닌 myObject를 가리키게 만듭니다.
     • 비동기 콜백: setTimeout, setInterval, Promise의 then 등 비동기 작업의 콜백 함수로 객체 메서드를 사용할 때 this를 유지하기 위해 사용합니다.
     • 클래스 컴포넌트 메서드: React 클래스 컴포넌트 등에서 컴포넌트 인스턴스의 메서드를 이벤트 핸들러 등으로 전달할 때 this가 컴포넌트 인스턴스를 가리키도록 bind를 사용했습니다 (최근에는 화살표 함수나 클래스 필드 문법으로 대체되는 경향이 있습니다).
2. 부분 적용 (Partial Application) - 인자 미리 설정
   • 문제: 어떤 함수는 여러 개의 인자를 받는데, 이 함수를 다른 함수(예: 위 예시의 combine)의 콜백으로 전달해야 할 때가 있습니다. 이때 콜백을 호출하는 함수는 미리 정해진 개수(예: 하나)의 인자만 전달하도록 되어 있어, 원래 함수가 필요로 하는 모든 인자를 한 번에 전달받기 어렵습니다.
   • bind()의 역할: bind()는 this 값 고정뿐만 아니라, bind() 호출 시 두 번째 인자부터 전달된 값들을 새로 생성된 함수가 호출될 때 원본 함수로 전달될 인자들의 맨 앞에 고정시켜 줍니다. 이렇게 일부 인자를 미리 설정해두고 나머지 인자는 나중에 받아 처리하는 것을 부분 적용이라고 합니다.
   • 실무 예시:
     • 범용 함수 특수화: 특정 설정값이나 데이터를 미리 가지고 동작하는 함수를 범용 함수로부터 만들 때 사용합니다. (위 예시의 showResult 함수처럼, 메시지 텍스트를 미리 설정해둔 결과 출력 함수를 만드는 경우)
     • 이벤트 핸들러에 추가 데이터 전달: 이벤트 객체 외에 특정 데이터를 이벤트 핸들러 함수에 추가로 넘겨야 할 때 bind()의 두 번째 인자부터 그 데이터를 넘겨서 사용하기도 합니다 (역시 화살표 함수와 클로저로 대체되는 경우가 많습니다).

---