자바스크립트에서 bind, call, apply의 차이는 무엇인가요?

Q1: `bind`, `call`, `apply`는 무엇인가요?
`bind`, `call`, `apply`는 모두 자바스크립트 함수 객체에서 사용할 수 있는 메서드로, 함수 호출 시 `this` 키워드가 가리키는 객체를 명시적으로 지정할 수 있게 해줍니다.

---

Q2: `call` 메서드는 어떻게 동작하나요?
`call`은 함수를 호출하면서 첫 번째 인자로 주어진 객체를 `this`로 설정하고, 이어지는 인자들을 함수의 개별 인수로 전달합니다. 함수가 즉시 실행됩니다.

```javascript
func.call(thisArg, arg1, arg2, ...);
```

---

Q3: `apply` 메서드는 어떻게 동작하나요?
`apply`도 `call`과 유사하게 함수 호출 시 `this`를 지정하지만, 인자들을 배열(또는 배열 유사 객체) 형태로 받습니다. 함수가 즉시 실행됩니다.

```javascript
func.apply(thisArg, [arg1, arg2, ...]);
```

---

Q4: `bind` 메서드는 어떻게 동작하나요?
`bind`는 함수 호출 즉시 실행하지 않고, 새로운 함수 복사본을 반환합니다. 반환된 함수는 호출 시 지정된 `this`를 가지며, 전달한 인자들도 일부 고정할 수 있습니다(부분 적용). 호출은 나중에 할 수 있습니다.

```javascript
const boundFunc = func.bind(thisArg, arg1, arg2, ...);
boundFunc(); // 호출 시 'this'와 인자가 고정됨
```

---
Q5: `call`과 `apply`의 차이는 무엇인가요?
`call`은 함수 인자를 쉼표로 구분된 나열 형태로 받지만, `apply`는 인자를 배열 형태로 받습니다. 따라서 인자 형태에 따라 선택하면 됩니다.

```javascript
func.call(obj, 1, 2, 3);
func.apply(obj, [1, 2, 3]);
```

---

Q6: `bind`와 나머지(`call`, `apply`)의 주요 차이는 무엇인가요?
- `bind`: 즉시 실행하지 않고 새로운 함수 반환, 나중에 호출 가능, `this`와 인자 고정 가능
- `call`/`apply`: 즉시 함수 실행, `this`와 인자를 바꿔서 바로 호출

---

Q7: 언제 각각을 사용하면 좋을까요?
- `call`: 인자를 하나씩 명확히 주면서, 즉시 함수 실행할 때
- `apply`: 인자 배열이 있을 때, 즉시 함수 실행할 때 (예: Math.max.apply)
- `bind`: 함수의 `this`를 고정하거나, 부분 적용 함수 생성 시, 또는 이벤트 핸들러에 `this`를 맞출 때

---

요약
| 메서드 | `this` 설정 여부 | 인자 전달 방식 | 함수 실행 시점 | 반환값 | 주요 용도 |
| -------- | ----------------- | -------------- | -------------- | ------ | -------- |
| `call` | O | 나열된 인자 | 즉시 | 함수 결과 | 즉시 호출, 인자 직접 전달 |
| `apply` | O | 배열 인자 | 즉시 | 함수 결과 | 즉시 호출, 인자 배열 전달 |
| `bind` | O | 나열된 인자 부분 고정 | 지연(새 함수 반환) | 바인딩 함수 | 함수 재사용, 부분 적용, 이벤트 핸들링 |

---

이상으로 `bind`, `call`, `apply`의 차이와 용도에 대해 설명드렸습니다.

자바스크립트에서 `bind`, `call`, `apply`는 모두 함수의 `this` 컨텍스트를 설정하는 데 사용되는 메서드입니다.

이들은 비슷한 목적을 가지고 있지만, 사용 방법과 결과가 다릅니다.

아래에서 각각의 메서드에 대해 자세히 설명하겠습니다.

1. `call` `call` 메서드는 함수를 호출하면서 `this` 값을 지정할 수 있게 해줍니다.

이 메서드는 즉시 함수를 실행하며, 첫 번째 인자로 `this`로 사용할 객체를 전달하고, 그 뒤에 함수에 전달할 인자들을 나열합니다.

사용 예시 ```javascript function greet(greeting) { console.log(greeting + ', ' + this.name); } const person = { name: 'Alice' }; greet.call(person, 'Hello'); // Hello, Alice ``` 위의 예제에서 `greet` 함수는 `call` 메서드를 통해 `person` 객체를 `this`로 설정하고, 'Hello'라는 인자를 전달하여 즉시 실행됩니다.



2. `apply` `apply` 메서드도 `call`과 유사하게 `this` 값을 설정하지만, 인자를 배열 형태로 전달해야 한다는 점이 다릅니다.

즉, 여러 개의 인자를 배열로 묶어서 전달할 수 있습니다.

사용 예시 ```javascript function greet(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } const person = { name: 'Bob' }; greet.apply(person, ['Hi', '!']); // Hi, Bob! ``` 위의 예제에서 `greet` 함수는 `apply` 메서드를 통해 `person` 객체를 `this`로 설정하고, 인자를 배열로 전달하여 실행됩니다.



3. `bind` `bind` 메서드는 함수를 호출하지 않고, 새로운 함수를 반환합니다.

이 새로운 함수는 `this` 값을 지정한 객체로 설정하며, 추가적인 인자도 미리 설정할 수 있습니다.

반환된 함수는 나중에 호출할 수 있습니다.

사용 예시 ```javascript function greet(greeting) { console.log(greeting + ', ' + this.name); } const person = { name: 'Charlie' }; const greetCharlie = greet.bind(person); greetCharlie('Hey'); // Hey, Charlie ``` 위의 예제에서 `greet.bind(person)`은 `this`를 `person`으로 설정한 새로운 함수를 반환합니다.

이 함수는 나중에 호출할 수 있으며, `greetCharlie`를 호출할 때 'Hey'라는 인자를 전달합니다.

요약 - call : 함수를 즉시 호출하며, `this`와 인자를 개별적으로 전달합니다.

- apply : 함수를 즉시 호출하며, `this`와 인자를 배열 형태로 전달합니다.

- bind : 함수를 즉시 호출하지 않고, `this`와 인자를 미리 설정한 새로운 함수를 반환합니다.

이러한 메서드들은 자바스크립트에서 함수의 `this` 컨텍스트를 제어하는 데 매우 유용하며, 다양한 상황에서 활용될 수 있습니다.

`call`과 `apply`는 즉시 실행되는 반면, `bind`는 나중에 호출할 수 있는 함수를 생성하는 점이 큰 차이점입니다.