JavaScript에서 this 키워드와 그와 관련된 메소드인 call, apply, bind는 상당히 중요한 주제입니다. 이 메소드들을 이해하고 사용할 줄 아는 것은 자바스크립트를 활용하는 능력을 크게 향상시킵니다. 이 포스팅에서는 이 주제에 대한 디테일한 설명을 통해 완벽한 이해를 목표로 하겠습니다.
제가 많이 부족했던 터라.. 많이 배우는 입장이 되어보도록 하겠습니다.

목차

  1. this 키워드란?
  1. call 메소드
  1. apply 메소드
  1. bind 메소드
  1. 사용 사례 및 예시
  1. 결론

this 키워드란?

JavaScript의 this 키워드는 실행 컨텍스트에 따라 다른 객체를 참조합니다. 함수가 어떻게 호출되었는지에 따라 this의 값이 달라집니다.
  • 전역 스코프: this는 전역 객체를 참조합니다. 브라우저에서는 window 객체가 됩니다.
  • 메소드 내부: this는 해당 메소드를 소유한 객체를 참조합니다.
  • 생성자 함수: this는 새로 생성되는 객체를 참조합니다.
  • Arrow Function: 화살표 함수에서 this는 상위 스코프의 this를 가리킵니다.
JavaScript
// 전역 스코프에서 this
console.log(this); // Window {...}

// 메소드 내부에서 this
const obj = {
  method: function() {
    console.log(this); // obj
  }
};
obj.method();

// 생성자 함수에서 this
function Person(name) {
  this.name = name;
}
const john = new Person("John");
console.log(john.name); // "John"

call 메소드

call 메소드를 사용하면 임의의 객체를 this로 설정할 수 있습니다. 또한 추가적인 인자를 전달할 수 있습니다.
JavaScript
const obj1 = { name: "Alice" };
const obj2 = { name: "Bob" };

function sayHello(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

sayHello.call(obj1, "Hello"); // "Hello, Alice"
sayHello.call(obj2, "Hi"); // "Hi, Bob"

apply 메소드

apply 메소드는 call과 유사하지만, 인자를 배열 형태로 전달합니다.
JavaScript
sayHello.apply(obj1, ["Hello"]); // "Hello, Alice"
sayHello.apply(obj2, ["Hi"]); // "Hi, Bob"

bind 메소드

bind 메소드는 새로운 함수를 반환하는데, 이 함수에서의 this는 bind의 첫 번째 인자로 고정됩니다.
JavaScript
const sayHelloToAlice = sayHello.bind(obj1, "Hello");
sayHelloToAlice(); // "Hello, Alice"

사용 사례 및 예시

  • Event Handler: 이벤트 핸들러에서 특정 객체를 this로 설정하고 싶을 때 bind를 사용할 수 있습니다.
  • 콜백 함수: 콜백에서 특정 컨텍스트를 유지하고 싶을 때 call이나 apply를 사용할 수 있습니다.
  • 함수 재사용: 같은 함수를 다른 객체의 메소드로 사용하고 싶을 때 call 또는 apply를 사용하여 재사용할 수 있습니다.

결론

this, call, apply, bind는 JavaScript에서 굉장히 유용하고 중요한 부분입니다. 이를 활용하면 코드의 유연성과 재사용성을 크게 높일 수 있습니다. 따라서 이들을 정확하게 이해하고 올바르게 사용하는 것은 모든 JavaScript 개발자에게 중요한 능력입니다.
이상으로 JavaScript의 this, call, apply, bind에 대한 디테일한 설명을 마치겠습니다. 이해가 잘 안 되는 부분이나 추가적으로 궁금한 점이 있으면 댓글로 문의주세요! 피드백은 언제나 환영입니다.