자바스크립트에서 this 키워드는 매우 중요한 개념입니다. 많은 개발자들이 이 키워드의 작동 방식을 이해하지 못해서 버그를 일으키기도 합니다. 이 글에서는 this 키워드의 개념과 작동 방식을 자세히 살펴보고 예제 코드를 통해 이해해보겠습니다.

this 키워드란?

자바스크립트에서 this 키워드는 현재 실행 중인 함수나 메소드가 속한 객체를 참조하는 데 사용됩니다. 다른 프로그래밍 언어의 this와 비슷한 개념이지만 동작 방식이 조금 다릅니다.

this 키워드의 동작 방식

this 키워드의 동작 방식은 다음과 같습니다:

• 전역 범위에서 사용할 경우, this는 전역 객체를 참조합니다. 브라우저 환경에서는 window 객체가 전역 객체이며, Node.js 환경에서는 global 객체가 전역 객체입니다.
• 함수가 메소드로 호출될 때, this는 해당 메소드를 호출한 객체를 참조합니다.
• 일반 함수에서 this를 사용할 경우, this는 호출 시점에 따라 달라집니다. (strict mode에서는 undefined가 될 수도 있습니다)

예를 들어보겠습니다.

const myObject = {
  name: "John",
  sayHello: function() {
    console.log("Hello, " + this.name + "!");
  }
};

myObject.sayHello(); // 출력: "Hello, John!"

위 예제에서 sayHello 메소드를 호출할 때 this는 myObject 객체를 참조합니다. 따라서 this.name은 myObject 객체의 name 속성인 “John”을 참조하게 됩니다.

하지만 주의해야 할 점이 몇 가지 있습니다. 예를 들어, 콜백 함수 내부에서 this를 사용하면 예상과 달리 다른 결과를 얻을 수 있습니다.

const myObject = {
  name: "John",
  friends: ["Alice", "Bob", "Charlie"],
  listFriends: function() {
    this.friends.forEach(function(friend) {
      console.log(this.name + " is friends with " + friend);
    });
  }
};

myObject.listFriends();

위 예제에서 forEach 메소드의 콜백 함수 내부에서 this를 사용하여 name 속성을 참조하려 합니다. 하지만 내부 함수에서의 this는 전역 객체를 참조하기 때문에 this.name은 undefined가 됩니다.

이런 문제를 해결하기 위해 bind, call, apply 등의 메소드를 사용하여 this를 바인딩할 수 있습니다.

const myObject = {
  name: "John",
  friends: ["Alice", "Bob", "Charlie"],
  listFriends: function() {
    this.friends.forEach(function(friend) {
      console.log(this.name + " is friends with " + friend);
    }.bind(this));
  }
};

myObject.listFriends();

위 예제에서 bind(this)를 사용하여 내부 함수의 this를 myObject로 바인딩합니다.

결론

this 키워드는 자바스크립트에서 매우 중요한 개념입니다. 올바르게 사용하지 않으면 버그를 일으킬 수도 있습니다. 이 글을 통해 this 키워드의 개념과 동작 방식을 이해하고, 적절하게 활용할 수 있도록 연습해보세요.