[Javascript] Call, Apply, Bind 차이점

---

🖐️ 들어가기 전

아래 코드를 실행하면 어떤 결과값이 나올까?

function whatThis() {
  console.log(this);
};

whatThis();

어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조하므로, 전역객체인 window가 출력된다.

 

 

만약, 전역객체가 아닌 다른 객체를 출력하고 싶다면 어떻게 해야할까?

바로 call, apply, bind를 사용하면 된다.

 

1. Call

call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하는 메서드다.

 

func.call(thisArg[, arg1[, arg2[, ...]]])

자, 그럼 구문을 살펴보자!

첫번째 인자는 this에 바인딩되고, 이후의 인자들은 호출할 함수의 매개변수로 전달된다.

그렇다면 아래 코드를 실행하면 어떤 결과 값이 나올까?

 

function whatThis(c, d) {
  console.log(this, c, d);
}

whatThis.call({ a: 1, b: 2 }, 3, 4);

call 메서드를 사용하니 전역객체가 아니고, 바인딩 시켜준 객체가 출력됐다.

 

 

2. Apply

apply 메서드도 call 메서드와 동일하게 메서드의 호출 주체인 함수를 즉시 실행하는 메서드다.

 

func.apply(thisArg, [argsArray])

자, 그럼 구문을 살펴보자!

call 메서드와의 차이점은 첫번째 인자 이후의 인자들을 배열로 받는다는 것이다.

 

function whatThis(c, d) {
  console.log(this, c, d);
}

whatThis.apply({ a: 1, b: 2 }, [3, 4]);

call 메서드와 동일한 값이 출력됐다.

 

3. Bind

bind 메서드는 함수를 즉시 실행하지 않고 넘겨 받은 인수를 바탕으로 새로운 함수를 반환하는 메서드다.

 

func.bind(thisArg[, arg1[, arg2[, ...]]])

구문은 Call 메서드와 동일하다.

 

function whatThis(c, d) {
  console.log(this, c, d);
}

const newFN = whatThis.bind({ a: 1, b: 2 }, 3, 4);
newFN();

bind 메서드는 새로운 함수를 반환하므로 newFN에 함수를 담고 실행한다.

 

 

📌 총 정리

• Call, Apply, Bind 메소드 모두 명시적으로 this 바인딩을 할 때 사용한다.

• Call 메소드와 Apply 메소드는 메서드의 호출 주체인 함수를 즉시 실행한다.

• Apply 메소드는 첫번째 인자 이후의 인자들을 배열로 받는다.

• bind 메소드는 Call 메소드와 Apply 메소드와 다르게 함수를 즉시 실행하지 않고 새로운 함수를 반환한다.

 

---