JavaScript에서 this 키워드는 매우 중요한 역할을 합니다. 이 키워드는 현재 실행 중인 함수나 메서드가 속한 객체를 참조하는 데 사용됩니다. this가 가리키는 대상은 실행 컨텍스트에 따라 달라집니다.

this의 기본 동작

this의 동작은 실행 컨텍스트에 의해 결정됩니다. 함수가 호출될 때, this는 해당 함수를 호출한 객체를 참조합니다. 다른 말로 하면, this는 함수가 속한 객체를 나타내게 됩니다.

this의 명시적인 바인딩

명시적으로 this를 바인딩하는 방법에는 call, apply, bind 메서드를 사용하는 방법이 있습니다. 이들을 사용하면 this를 특정 객체에 명시적으로 연결할 수 있습니다.

예를 들어,

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const bob = { name: 'Bob' };

person.greet.call(bob); // 출력: "Hello, Bob!"

위 예제에서 call 메서드를 사용하여 person 객체의 greet 메서드를 bob 객체에 연결했습니다.

this를 arrow 함수에서 이해하기

arrow 함수 내에서 사용된 this는 함수가 정의된 시기의 this와 동일합니다. arrow 함수는 자신만의 this를 바인딩하지 않고, 주변 스코프의 this를 사용합니다.

function Person() {
  this.age = 0;
  setInterval(() => {
    this.age++; // `this`는 Person 객체를 참조
  }, 1000);
}

const person = new Person();

결론

JavaScript에서 this의 동작을 이해하는 것은 중요합니다. 올바른 컨텍스트에서 this를 올바르게 활용하기 위해, 함수가 호출될 때의 실행 컨텍스트와 명시적인 this 바인딩 방법을 숙지하는 것이 바람직합니다.

이상으로, JavaScript에서의 this 키워드에 대한 소개를 마치도록 하겠습니다.

참고 문헌:

• MDN Web Docs - this