JavaScript Function Apply
JavaScript apply() Method: 함수 호출 시 this와 인자 배열 전달
JavaScript의 apply() 메서드는 함수를 호출하면서 this 값을 명시적으로 지정하고,
인자를 배열로 전달할 수 있는 내장 함수입니다. **apply()**는 함수를 호출하는 방식을 제어할 때 유용하며, 특히
인자가 동적으로 결정될 때 사용하기 좋습니다.
이 가이드는 JavaScript apply() 메서드의 개념과 사용법을 설명하고, 실용적인 예시를 제공합니다.
1. apply() 메서드의 기본 개념
- *
apply()*는 함수 호출 시this를 특정 객체에 바인딩하고, 인자를 배열 또는 유사 배열 객체로 전달할 수 있게 해주는 메서드입니다.call()메서드와 비슷하지만, 인자를 배열로 전달한다는 점에서 차이가 있습니다.
1.1. apply() 메서드 구문
functionName.apply(thisArg, [argsArray]);
thisArg: 함수에서 **this*로 사용할 객체를 지정.argsArray: 함수에 전달할 인자 배열 또는 유사 배열 객체.
1.2. apply() 메서드의 주요 특징
- 함수의
this값을 명시적으로 설정할 수 있습니다. - 인자는 배열 또는 유사 배열 객체로 전달됩니다.
- 즉시 함수를 호출합니다.
2. apply() 사용 예시
2.1. 기본 사용 예시
function greet(greeting, punctuation) {
console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}
const person = { name: 'Alice' };
greet.apply(person, ['Hello', '!']); // Hello, my name is Alice!
greet()함수는 **this*로person객체를 받으며, 인자는 배열로 전달됩니다.- *
apply()*는person객체를 **this*로 바인딩하여 함수를 호출하고, **greeting*과punctuation값을 배열로 전달합니다.
3. apply()와 call()의 차이점
- *
apply()*와 **call()*은 모두 함수의this값을 명시적으로 설정할 수 있지만, 인자를 전달하는 방식에서 차이가 있습니다. apply(): 인자를 배열 또는 유사 배열 객체로 전달합니다.call(): 인자를 개별적으로 나열하여 전달합니다.
3.1. apply()와 call() 비교 예시
function introduce(greeting, age) {
console.log(`${greeting}, my name is ${this.name} and I am ${age} years old.`);
}
const person = { name: 'Bob' };
// apply() 사용
introduce.apply(person, ['Hello', 25]); // Hello, my name is Bob and I am 25 years old.
// call() 사용
introduce.call(person, 'Hello', 25); // Hello, my name is Bob and I am 25 years old.
4. apply()를 사용한 배열 합치기
- *
apply()*는 배열 메서드와 결합하여 배열을 처리할 때 매우 유용하게 사용할 수 있습니다. 특히Math.max(), **Math.min()*와 같은 함수에 배열을 전달하여 최댓값이나 최솟값을 구할 수 있습니다.
4.1. 배열에서 최댓값 구하기
const numbers = [1, 2, 3, 4, 5];
const maxNumber = Math.max.apply(null, numbers);
console.log(maxNumber); // 5
- *
Math.max()*는 개별적인 인자를 받아 최댓값을 반환하지만, **apply()*를 사용하면 배열을 직접 전달할 수 있습니다. - *
thisArg*로 **null*을 전달하면 **this*는 중요하지 않으므로 생략할 수 있습니다.
4.2. 배열에서 최솟값 구하기
const numbers = [1, 2, 3, 4, 5];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 1
- *
Math.min()*도 같은 방식으로 배열을 전달해 최솟값을 구할 수 있습니다.
5. apply()와 유사 배열 객체
유사 배열 객체는 배열처럼 인덱스로 접근할 수 있지만, 배열 메서드를 직접 사용할 수 없습니다.
**apply()**는 이런 유사 배열 객체를 처리할 때 유용하게 사용됩니다.
5.1. arguments 객체와 apply()
function sum() {
return Array.prototype.reduce.apply(arguments, [(acc, num) => acc + num, 0]);
}
console.log(sum(1, 2, 3, 4)); // 10
- *
arguments*는 유사 배열 객체이므로, 배열 메서드인 **reduce()*를 직접 사용할 수 없습니다. - *
apply()*를 사용하여arguments객체를reduce()메서드로 처리할 수 있습니다.
6. apply()와 bind()의 차이점
- *
apply()*와 **bind()*는 함수 호출 시this를 바인딩할 수 있지만, 호출 시점과 인자 처리 방식이 다릅니다. apply(): 함수를 즉시 호출하면서 **this*와 인자 배열을 전달합니다.bind(): 새로운 함수를 반환하여 나중에 호출할 수 있으며, 인자도 미리 고정할 수 있습니다.
6.1. bind() 사용 예시
function greet(greeting, punctuation) {
console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}
const person = { name: 'Alice' };
const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Hello, my name is Alice!
- *
bind()*는 **this*와 일부 인자를 고정한 새로운 함수를 반환합니다. - *
apply()*는 즉시 호출하는 반면, **bind()*는 나중에 호출할 수 있는 함수를 반환합니다.
7. 함수 호출 제어를 위한 apply() 사용
- *
apply()*는 함수 호출 시this와 인자 전달을 유연하게 처리할 수 있기 때문에, 함수 호출을 제어하는 상황에서 매우 유용합니다.
7.1. 함수를 동적으로 호출하기
function executeFunction(func, thisArg, argsArray) {
func.apply(thisArg, argsArray);
}
function printMessage(message) {
console.log(message);
}
executeFunction(printMessage, null, ['Hello, world!']); // Hello, world!
- *
executeFunction()*은 **apply()*를 사용하여 동적으로 함수를 호출하고, 인자 배열을 전달합니다. - 이 방식은 동적 함수 호출이나 인자 처리가 필요한 상황에서 유용합니다.
요약
JavaScript의 apply() 메서드는 함수 호출 시 this를 명시적으로 설정하고,
인자를 배열로 전달할 수 있는 강력한 기능을 제공합니다.
- *
thisArg*로this값을 지정할 수 있으며, 인자 배열을 사용하여 동적으로 인자를 전달합니다. - *
call()*과는 달리, 인자를 배열로 전달하며, 두 메서드 모두 함수를 즉시 호출합니다. - 배열 메서드와 결합하여 최댓값, 최솟값 등을 구할 때 유용하게 사용할 수 있으며, 유사 배열 객체에서도 활용할 수 있습니다.
- *
bind()*와 달리 즉시 함수가 호출되며, 동적으로 함수를 실행하거나 제어할 때 자주 사용됩니다.
이러한 호출 방식을 적절히 사용하면 코드 재사용성과 유연성을 높일 수 있습니다.