# JavaScript - Function apply() Method

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript에서 가장 강력하고 유연한 메서드 중 하나를 배울 것입니다: apply() 메서드. 이 튜토리얼의 끝까지 따라오시면 apply()를 마스터하실 수 있을 것입니다! 이 흥미로운 여정을 함께 시작해봅시다.

What is the Function apply() Method?

The apply() 메서드는 주어진 this 값과 배열(또는 배열처럼 보이는 객체)으로 인수를 제공하여 함수를 호출할 수 있게 해주는 내장 JavaScript 함수입니다. 마치 함수 실행 방식을 통제할 수 있는 마법의 지팡이를 가진 것 같습니다!

Why is apply() important?

1. 함수 호출 방식에 대한 유연성을 제공합니다.
2. 다른 객체의 메서드를 빌릴 수 있게 합니다.
3. 가변적인 인수 개수를 다룰 때 매우 유용합니다.

이제 문법을 살펴보고 몇 가지 예제를 통해 알아보겠습니다!

Syntax of apply()

apply() 메서드의 기본 문법은 다음과 같습니다:

functionName.apply(thisArg, [argsArray])

이를 간단히 설명하자면:

• functionName: 호출하고 싶은 함수입니다.
• thisArg: 함수 호출 시 제공되는 this 값입니다.
• argsArray: functionName을 호출할 때 사용할 인수를 지정하는 배열이나 배열처럼 보이는 객체입니다.

이제 약간 혼란스러울 수 있지만, 걱정 마세요! 많은 예제를 통해 명확하게 이해하실 수 있도록 도와드리겠습니다.

Examples of apply() in Action

Example 1: Basic Usage

간단한 예제부터 시작해보겠습니다:

function greet(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = { name: 'Alice' };

greet.apply(person, ['Bob']);

출력 결과:

Hello, Bob! My name is Alice.

이 예제에서:

1. greet 함수를 정의하고 this.name을 사용합니다.
2. person 객체를 생성하고 name 속성을 추가합니다.
3. apply()를 사용하여 greet를 호출하며 this를 person으로 설정하고 'Bob'을 인수로 전달합니다.

apply()는 함수 내부에서 this가 무엇을 가리키는지 설정할 수 있게 해주는 마법 같은 기능입니다. 멋지죠?

Example 2: Using apply() with Math.max()

Math.max()를 사용한 실용적인 예제입니다:

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

출력 결과:

7

이 경우:

1. 숫자 배열을 가집니다.
2. apply()를 사용하여 이 배열을 Math.max()에 직접 전달합니다.
3. null을 첫 번째 인수로 사용합니다. Math.max()는 this를 사용하지 않습니다.

이 방법은 숫자 배열을 가지고 최댓값을 찾을 때 매우 유용합니다!

Example 3: Borrowing Array Methods

이제 메서드를 빌리는 방법을 보겠습니다:

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

const actualArray = Array.prototype.slice.apply(arrayLike);

console.log(actualArray);

출력 결과:

['a', 'b', 'c']

이 상황에서 무엇이 일어나고 있을까요?

1. 배열처럼 보이지만 실제로는 배열이 아닌 객체를 가집니다.
2. Array.prototype의 slice() 메서드를 빌립니다.
3. apply()를 사용하여 slice()를 우리의 배열처럼 보이는 객체에 적용하여 실제 배열로 변환합니다.

이는 DOM 요소나 다른 배열처럼 보이는 객체를 다루는 데 매우 유용합니다!

Example 4: Applying Functions with Multiple Arguments

약간 더 복잡한 예제를 시도해보겠습니다:

function introduce(greeting, hobby) {
  console.log(`${greeting}, I'm ${this.name}. I love ${hobby}!`);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Diana' };

introduce.apply(person1, ['Hi there', 'coding']);
introduce.apply(person2, ['Hello', 'painting']);

출력 결과:

Hi there, I'm Charlie. I love coding!
Hello, I'm Diana. I love painting!

이 예제에서:

1. introduce 함수를 정의하고 두 개의 인수를 받습니다.
2. 두 개의 person 객체를 생성합니다.
3. apply()를 사용하여 각 사람에 대해 introduce를 호출하고 다른 인수를 전달합니다.

이 예제는 apply()가 여러 인수와 다른 this 값을 사용하여 호출될 수 있음을 보여줍니다.

Comparison of Function Methods

apply()와 형제 메서드 call()과 bind()을 비교해보겠습니다:

메서드	문법	설명
apply()	func.apply(thisArg, [argsArray])	주어진 this 값과 인수 배열로 함수를 호출합니다
call()	func.call(thisArg, arg1, arg2, ...)	apply()와 비슷하지만 인수가 개별적으로 전달됩니다
bind()	func.bind(thisArg, arg1, arg2, ...)	고정된 this 값과 초기 인수로 새로운 함수를 생성합니다

각각의 메서드는 사용 사례가 다르지만, apply()는 배열이나 배열처럼 보이는 객체의 인수를 다룰 때 빛을 발합니다.

Conclusion

축하합니다! apply()의 세계에 깊이 빠져들었습니다. 기본 사용에서 메서드 빌리기와 다중 인수 처리까지, 이 메서드의 다양성과 강력함을 경험하셨습니다.

apply()는 JavaScript 도구 상자에서 스위스 아미 knife와 같습니다. 마스터하는 데는 약간의 연습이 필요하지만, 한 번 익혀지면 다양한 상황에서 사용할 수 있습니다.

apply()를 계속 실험하고, 창의적으로 사용해보세요. 누가 알랭지, 당신이 JavaScript 마스터가 될 수 있을지도 모릅니다! 행복하게 코딩하세요, 미래의 개발자 여러분!

Credits: Image by storyset