JavaScript의 this 바인딩 – call, apply, bind 차이점

1. 개요

JavaScript에서 this 키워드는 함수가 호출되는 방식에 따라 동적으로 결정된다. 특히 call(), apply(), bind() 메서드는 this를 명시적으로 지정할 수 있는 중요한 기능을 제공한다.

이 글에서는 this 바인딩이 어떻게 동작하는지 설명하고, call, apply, bind 메서드의 차이점과 사용법을 예제를 통해 알아본다.

---

2. JavaScript의 this 바인딩 개념

(1) this란?

JavaScript의 this는 현재 실행 중인 함수가 속한 객체를 가리키는 키워드다. 그러나 함수가 호출되는 방식에 따라 this가 가리키는 값이 달라질 수 있다.

javascript

복사편집

console.log(this); // 브라우저에서는 window, Node.js에서는 global 객체

✅ this는 다음과 같은 경우에 따라 달라진다.

1. 일반 함수 호출 → this는 undefined (strict mode) 또는 window(non-strict mode)
2. 객체 메서드 호출 → this는 해당 객체
3. 생성자 함수 호출 → 새로운 인스턴스를 가리킴
4. 이벤트 핸들러 → 이벤트가 발생한 요소를 가리킴
5. call, apply, bind 사용 → 명시적으로 this 지정 가능

---

(2) this 바인딩 예제

javascript

복사편집

function showThis() { console.log(this); } const obj = { value: 42, method: showThis }; showThis(); // window 또는 undefined obj.method(); // obj 객체

위 코드에서 showThis()는 일반 함수로 호출되었기 때문에 this는 window(브라우저) 또는 undefined(strict mode)이다. 하지만 obj.method()는 obj 객체의 메서드로 호출되었으므로 this는 obj를 가리킨다.

---

3. call(), apply(), bind() 메서드 비교

(1) call() – 즉시 실행하며, this와 인수를 개별 전달

call() 메서드는 함수를 호출하면서 this를 명시적으로 설정할 수 있다.

javascript

복사편집

function greet(name, age) { console.log(`안녕하세요, 저는 ${name}이고 ${age}살입니다. My value is ${this.value}`); } const person = { value: 100 }; // call을 사용하여 this를 person으로 설정하고 인수를 전달 greet.call(person, "철수", 30);

✅ 특징

• this를 첫 번째 인자로 전달
• 나머지 인수는 쉼표(,)로 개별 전달

---

(2) apply() – 즉시 실행하며, this와 인수를 배열로 전달

apply() 메서드는 call()과 동일한 기능을 하지만, 인수를 배열 형태로 전달한다.

javascript

복사편집

greet.apply(person, ["영희", 25]);

✅ call과 apply의 차이점

• call(this, arg1, arg2, ...) → 인수를 개별적으로 전달
• apply(this, [arg1, arg2, ...]) → 인수를 배열로 전달

📌 언제 apply()를 사용해야 할까?

• 배열을 함수에 인수로 전달할 때 유용
• Math.max와 같은 함수에서 사용 가능

javascript

복사편집

const numbers = [3, 7, 1, 9, 5]; console.log(Math.max.apply(null, numbers)); // 9

---

(3) bind() – 새로운 함수 반환 (즉시 실행하지 않음)

bind() 메서드는 새로운 함수를 반환하며, 나중에 실행할 수 있도록 this를 영구적으로 바인딩한다.

javascript

복사편집

const boundGreet = greet.bind(person, "지민"); boundGreet(28); // "안녕하세요, 저는 지민이고 28살입니다. My value is 100"

✅ 특징

• this와 일부 인수를 미리 설정한 새로운 함수를 반환
• 즉시 실행되지 않고, 나중에 실행 가능

📌 언제 bind()를 사용해야 할까?

• 특정 this를 유지한 채 나중에 실행할 함수를 만들 때
• 이벤트 핸들러에서 this를 유지하려 할 때

javascript

복사편집

const button = document.querySelector("button"); const user = { name: "소연", handleClick() { console.log(`${this.name} 버튼 클릭`); } }; button.addEventListener("click", user.handleClick.bind(user));

---

4. call, apply, bind 차이점 요약

메서드즉시 실행 여부인수 전달 방식반환 값

call	✅ 즉시 실행	쉼표(,)로 개별 전달	호출된 함수의 반환 값
apply	✅ 즉시 실행	배열([])로 전달	호출된 함수의 반환 값
bind	❌ 즉시 실행 X	쉼표(,)로 개별 전달	새로운 함수 반환

---

5. 실전 활용 예제

(1) 객체 메서드에서 다른 컨텍스트의 this 바인딩

javascript

복사편집

const car = { brand: "Tesla", getBrand: function() { console.log(this.brand); } }; const anotherBrand = { brand: "BMW" }; // call을 사용해 this를 변경 car.getBrand.call(anotherBrand); // "BMW"

(2) setTimeout에서 this를 유지하기 (bind 활용)

javascript

복사편집

const user = { name: "민수", sayHello: function() { setTimeout(function() { console.log(`안녕하세요, 저는 ${this.name}입니다.`); }.bind(this), 1000); } }; user.sayHello(); // "안녕하세요, 저는 민수입니다."

---

6. 결론

✅ call(), apply(), bind() 정리

• call(this, arg1, arg2, ...) → 즉시 실행, this 설정, 인수를 개별 전달
• apply(this, [arg1, arg2, ...]) → 즉시 실행, this 설정, 인수를 배열로 전달
• bind(this, arg1, arg2, ...) → 새로운 함수 반환, 나중에 실행 가능

✅ 언제 어떤 메서드를 사용할까?

• call() → 일반적인 함수 호출에서 this를 설정하고 실행할 때
• apply() → 인수를 배열로 전달해야 할 때 (ex: Math.max.apply(null, arr))
• bind() → 특정 this를 유지한 채 함수 실행을 나중으로 미룰 때 (ex: 이벤트 핸들러)

이제 this 바인딩과 call, apply, bind의 차이점을 명확히 이해하고, 실무에서 적절히 활용해보자!