상세 컨텐츠

본문 제목

[JavaScript] bind() apply() call()에 대해서

카테고리 없음

by esoesmio 2024. 5. 13. 22:53

본문

JavaScript에서 `call`, `apply`, 그리고 `bind`는 모두 함수의 `this` 바인딩을 명시적으로 설정할 때 사용하는 매우 유용한 메서드들입니다. 이들은 함수의 실행 컨텍스트를 조작하는 데 도움을 주어 다양한 객체 지향 패턴을 구현할 수 있도록 합니다. 아래에서 각 메서드에 대해 자세히 설명하고 예제를 통해 설명하겠습니다.

### 1. call()

`call()` 메서드는 첫 번째 인자로 `this`에 바인딩할 객체를 받고, 그 뒤에는 호출할 함수의 인자를 순서대로 받습니다. 이 메서드를 사용하면 다양한 객체에 대해 같은 함수를 재사용할 수 있습니다.

**예제:**

```javascript

function introduce(greeting, punctuation) {
    console.log(greeting + ', my name is ' + this.name + punctuation);


}

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

// call 메서드를 사용하여 this 컨텍스트를 person1과 person2에 각각 바인딩

introduce.call(person1, 'Hello', '!');  // 출력: "Hello, my name is Alice!"
introduce.call(person2, 'Hi', '.');     // 출력: "Hi, my name is Bob."


```

### 2. apply()

`apply()` 메서드는 `call()`과 매우 유사하게 작동하지만, 함수 인자를 배열 형태로 받습니다. 이는 인자의 개수가 동적일 때 유용하게 사용할 수 있습니다.

**예제:**

```javascript

function introduce(greeting, punctuation) {
    console.log(greeting + ', my name is ' + this.name + punctuation);
}

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

// apply 메서드를 사용하여 this 컨텍스트를 person1에 바인딩하고, 인자를 배열로 전달
introduce.apply(person1, ['Hello', '!']);  // 출력: "Hello, my name is Alice!"
introduce.apply(person2, ['Hi', '.']);     // 출력: "Hi, my name is Bob."


```

### 3. bind()

`bind()` 메서드는 `call()`이나 `apply()`와 달리 즉시 함수를 호출하지 않고, 새로운 함수를 반환합니다. 이 반환된 함수는 언제든지 호출될 수 있으며, `bind()`가 호출될 때 설정된 `this` 컨텍스트와 초기 인자들을 기억합니다.

**예제:**

```javascript

function introduce(greeting, punctuation) {
    console.log(greeting + ', my name is ' + this.name + punctuation);
}

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

// bind 메서드를 사용하여 this 컨텍스트를 person1에 바인딩하고 새 함수를 생성
const introduceAlice = introduce.bind(person1, 'Hello', '!');
introduceAlice();  // 출력: "Hello, my name is Alice!"

// bind는 인자를 미리 설정할 수도 있음
const introduceBob = introduce.bind(person2);
introduceBob('Hi', '.');  // 출력: "Hi, my name is Bob."


```

이처럼 `call`, `apply`, `bind`는 JavaScript에서 매우 강력하며 다양한 상황에서 유연하게 함수의 실행 컨텍스트를 제어할 수 있게 해 줍니다. 각 메서드를 적절히 활용하면 코드의 재사용성과 모듈성을 크게 향상시킬 수 있습니다.

댓글 영역