8.1 call 메서드
JavaScript에서 call, bind, apply 메서드는 함수 실행 컨텍스트 관리를 하는 데 중요한 역할을 해. 이 메서드를 사용하면 함수를 호출할 때 this 값을 지정할 수 있거든. 이 메서드들은 객체 및 함수형 프로그래밍 작업에서 유용하며, 유연한 코드 관리를 위한 강력한 도구를 제공해. 각각 더 자세히 살펴보고 사용 예시들을 한번 봅시다.
call 메서드는 주어진 this 값과 콤마로 구분된 인수로 함수를 호출해. 이렇게 하면 함수가 실행되어야 하는 컨텍스트를 명시적으로 지정할 수 있어.
문법:
func.call(thisArg, arg1, arg2 ...);
예시:
이 예시에서 greet 함수는 person 컨텍스트로 호출되어 객체 person의 name 속성을 사용할 수 있게 해줘.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.call(person, 'Hello', '!'); // Output: Hello, John!
8.2 apply 메서드
apply 메서드는 call과 비슷하지만 인수를 배열로 전달해. 인수 배열이 있을 때 함수를 호출하고 싶을 때 편리해.
문법:
func.apply(thisArg, [argsArray]);
예시:
이 예시는 이전 예시와 비슷하지만 인수는 배열로 전달된다는 점만 다르지.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.apply(person, ['Hello', '!']); // Output: Hello, John!
8.3 bind 메서드
bind 메서드는 새로운 함수를 생성하는데, 이 함수는 호출될 때 주어진 this 값을 설정해. bind에 전달된 인수는 새로운 함수에 고정되지. 이 기능은 고정된 컨텍스트의 함수를 생성하는 데 유용해.
문법:
const boundFunc = func.bind(thisArg, arg1, arg2 ...);
예시:
이 예시에서는 boundGreet라는 새로운 함수가 생성되고, 이 함수는 항상 person 객체의 컨텍스트에서 실행돼.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Output: Hello, John!
8.4 메서드 사용에 대한 상세 설명
1. 메서드 상속에 call 사용:
call 메서드는 한 객체의 메서드를 다른 객체가 상속받도록 할 때 주로 사용돼. 이렇게 하면 명시적인 상속 없이 메서드와 속성을 차용할 수 있어.
이 예시에서는 Product 생성자가 Food 객체의 컨텍스트에서 호출되어 name과 price 속성을 상속할 수 있게 해줘.
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price, category) {
Product.call(this, name, price);
this.category = category;
}
const cheese = new Food('Cheese', 5, 'Dairy');
console.log(cheese); // Output: Food { name: 'Cheese', price: 5, category: 'Dairy' }
2. 배열 인수 전달에 apply 사용:
apply 메서드는 인수 배열을 함수에 전달하고자 할 때 유용해. 함수는 개별 인수를 요구하잖아.
여기서 numbers 배열은 sum 함수에 개별 인수로 전달돼.
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // Output: 6
3. 고정된 컨텍스트 함수 생성에 bind 사용:
bind 메서드는 고정된 컨텍스트의 함수를 생성하는 데 사용되며, 특히 이벤트 및 콜백에서 유용해.
여기서 getX 함수는 bind를 통해 module 객체에 고정되어 함수 호출 시 x 값을 올바르게 가져올 수 있게 해줘.
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // Output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // Output: 42
8.5 실제 생활의 예
메서드 배열 차용에 call 사용 예시:
여기서 call을 사용하여 arguments 객체에 배열 forEach 메서드를 사용해.
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // Output: 1, 2, 3
배열 결합에 apply 사용 예시:
여기서 apply를 사용하여 두 배열을 배열 push 메서드를 통해 결합해.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.prototype.push.apply(array1, array2);
console.log(array1); // Output: [1, 2, 3, 4, 5, 6]
부분 함수 생성에 bind 사용 예시:
double 함수는 bind를 통해 첫 번째 인수가 2로 고정된 채로 생성돼.
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10
GO TO FULL VERSION