JavaScript Function Bind
JavaScript bind() Method: 함수에서 this 바인딩 및 부분 적용
JavaScript의 bind() 메서드는 함수를 호출하지 않고, this 값과 일부 인자를 고정한
새로운 함수를 반환하는 메서드입니다. **bind()**는 함수를 호출할 시점과 호출 방식을 더 유연하게 관리할 수 있도록
도와주며, 특히 이벤트 핸들러나 콜백 함수에서 유용하게 사용됩니다.
이 가이드는 JavaScript의 bind() 메서드에 대한 설명과 다양한 실용 예시를 제공합니다.
1. bind() 메서드의 기본 개념
bind() 메서드는 함수를 호출하지 않고, this 값과
미리 정의한 인자를 고정한 새로운 함수를 반환합니다. 반환된 함수는 나중에 호출될 때도 고정된
**this**와 인자를 유지합니다.
1.1. bind() 메서드 구문
functionName.bind(thisArg, arg1, arg2, ...);
thisArg: 함수에서 **this*로 사용할 객체를 지정.arg1, arg2, ...: 함수에 미리 고정할 인자. 선택 사항이며, 고정되지 않은 인자는 함수가 호출될 때 전달 가능합니다.
1.2. bind() 메서드의 주요 특징
this값을 고정한 새로운 함수를 반환합니다.- 인자도 미리 고정할 수 있으며, 추가 인자는 호출 시점에 전달 가능합니다.
- 즉시 호출되지 않고, 나중에 호출할 수 있는 함수가 반환됩니다.
2. bind() 사용 예시
2.1. 기본 사용 예시
const person = {
name: 'Alice',
greet: function(greeting) {
console.log(`${greeting}, my name is ${this.name}`);
}
};
const greetPerson = person.greet.bind(person); // `this`를 person에 고정
greetPerson('Hello'); // Hello, my name is Alice
greet()함수는 **this*가person객체에 바인딩되며, **bind()*를 통해this값이 고정된 새로운 함수를 반환합니다.- *
greetPerson()*은 나중에 호출되지만, **this*는 이미 **person*에 고정된 상태입니다.
3. 부분 적용 함수 (Partial Application)
- *
bind()*를 사용하면 미리 일부 인자를 고정할 수 있습니다. 이를 **부분 적용(Partial Application)**이라고 하며, 나머지 인자는 함수가 호출될 때 전달합니다.
3.1. 부분 적용 예시
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2); // `a`를 2로 고정
console.log(double(5)); // 10 (2 * 5)
- *
multiply.bind(null, 2)*는a값을 2로 고정한 새로운 함수를 반환합니다. - 반환된
double()함수는 나중에 호출될 때b값만 전달받아 곱셈을 수행합니다.
3.2. 추가 인자 전달
function greet(greeting, name) {
console.log(`${greeting}, ${name}!`);
}
const greetHello = greet.bind(null, 'Hello'); // `greeting`을 'Hello'로 고정
greetHello('Alice'); // Hello, Alice!
greetHello('Bob'); // Hello, Bob!
- *
greet.bind(null, 'Hello')*는 **greeting*을 **'Hello'**로 고정하고, **name*은 함수 호출 시점에 전달됩니다. - 부분 적용을 통해 특정 인자를 미리 고정하여 코드를 더 간결하게 만들 수 있습니다.
4. bind()와 이벤트 핸들러
- *
bind()*는 이벤트 핸들러에서this값을 고정할 때 자주 사용됩니다. 특히 DOM 이벤트에서는 **this*가 이벤트를 발생시킨 DOM 요소를 가리키기 때문에, 객체 메서드에서 **this*를 고정해야 할 때 유용합니다.
4.1. 이벤트 핸들러에서 this 고정
const button = document.getElementById('myButton');
const person = {
name: 'Alice',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
button.addEventListener('click', person.greet.bind(person)); // `this`를 person에 고정
- *
person.greet.bind(person)*는this를person에 고정한 함수로, 이벤트가 발생할 때도 **this가person*을 가리킵니다. - 이 방식은 이벤트 핸들러에서
this가 의도치 않게 변경되는 문제를 방지합니다.
5. bind()와 call(), apply()의 차이점
bind(), call(), **apply()**는 모두
this 값을 설정할 수 있지만, 함수 호출 방식과 시점에 차이가 있습니다.
bind(): 새로운 함수를 반환하며, 즉시 호출되지 않음. **this*와 일부 인자를 고정할 수 있습니다.call(): 함수를 즉시 호출하며, **this*를 설정하고 인자를 개별적으로 전달합니다.apply(): 함수를 즉시 호출하며, **this*를 설정하고 인자를 배열로 전달합니다.
5.1. 차이점 예시
function greet(greeting, punctuation) {
console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}
const person = { name: 'Alice' };
// bind(): 새로운 함수 반환, 나중에 호출
const greetPerson = greet.bind(person, 'Hello');
greetPerson('!'); // Hello, my name is Alice!
// call(): 즉시 호출
greet.call(person, 'Hi', '!'); // Hi, my name is Alice!
// apply(): 즉시 호출, 인자를 배열로 전달
greet.apply(person, ['Hi', '!']); // Hi, my name is Alice!
6. bind()로 상속된 메서드 호출
- *
bind()*는 상속된 메서드에서this를 고정하여 부모 클래스의 메서드를 자식 클래스에서 사용할 때 유용하게 사용됩니다.
6.1. 상속에서 bind() 사용 예시
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a sound.`);
};
function Dog(name) {
Animal.call(this, name); // 부모 생성자 호출
}
Dog.prototype = Object.create(Animal.prototype);
const myDog = new Dog('Rex');
const speakBound = myDog.speak.bind(myDog); // `this`를 myDog에 고정
speakBound(); // Rex makes a sound.
- *
Animal*의speak()메서드를 **bind()*를 사용해 **this*를 자식 클래스의 객체에 고정하여 호출할 수 있습니다. - 이는 상속 구조에서 부모 메서드를 재사용할 때 유용합니다.
7. bind()와 클래스에서의 사용
ES6 클래스에서도 **bind()**는 이벤트 핸들러나 콜백 함수에서
**this**를 올바르게 설정하기 위해 자주 사용됩니다.
7.1. 클래스에서의 bind() 사용 예시
class Person {
constructor(name) {
this.name = name;
this.greet = this.greet.bind(this); // `this`를 고정
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
const alice = new Person('Alice');
setTimeout(alice.greet, 1000); // Hello, my name is Alice
this.greet = this.greet.bind(this): **this*가Person객체를 가리키도록 고정합니다.- *
setTimeout()*과 같은 비동기 함수에서는 **this*가 변경될 수 있으므로, **bind()*를 통해this를 고정하여 올바르게 사용합니다.
요
약
JavaScript의 bind() 메서드는 함수 호출 시 this 값을 고정하고, 인자를
부분적으로 적용하여 유연하게 함수 호출을 제어할 수 있는 강력한 도구입니다.
this값을 고정한 새로운 함수를 반환하여 나중에 호출할 수 있습니다.- *부분 적용(Partial Application)**을 통해 일부 인자를 미리 고정하고, 나머지 인자는 호출 시점에 전달할 수 있습니다.
- 이벤트 핸들러나 비동기 콜백에서 **
this*가 의도치 않게 변경되는 문제를 방지하는 데 유용합니다. call(), **apply()*와 달리 즉시 호출되지 않고, 나중에 호출할 함수를 반환합니다.- *
bind()*는 클래스와 이벤트 기반 프로그래밍에서 자주 사용되며, 코드의 가독성과 재사용성을 높이는 중요한 기능입니다.