JavaScript의 this 키워드 완벽 이해: 동작 원리와 활용 예제

JavaScript에서 this 키워드는 코드가 실행되는 현재 맥락(context)의 객체를 가리키는 참조(reference)입니다. 다른 프로그래밍 언어와 달리 JavaScript의 this는 함수가 어떻게 호출되었는지에 따라 가리키는 대상이 달라진다는 점이 특징입니다.

기본 예제

객체의 메서드 내부에서 this를 사용하면 해당 메서드를 소유한 객체 자신을 참조할 수 있습니다.

<script>
  var college = {
    subject: "Maths",
    lecturer: "Amy",
    details: function () {
      document.write(this.subject); // "Maths" 출력
    }
  };
  college.details();
</script>

위 예제에서 details() 메서드는 college 객체를 통해 호출되었기 때문에, 메서드 내부의 this는 college 객체를 가리킵니다. 따라서 this.subject는 "Maths"를 반환합니다.

this가 결정되는 주요 상황

1. 객체 메서드 호출

객체.메서드() 형태로 호출하면 this는 해당 객체를 가리킵니다.

const user = {
  name: "Amy",
  greet() {
    console.log(this.name); // "Amy"
  }
};
user.greet();

2. 일반 함수 호출

객체 없이 단독으로 호출된 일반 함수에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window, 엄격 모드(strict mode)에서는 undefined가 됩니다.

function showThis() {
  console.log(this);
}
showThis(); // 브라우저에서 window 객체 출력

3. 화살표 함수(Arrow Function)

화살표 함수는 자신만의 this를 갖지 않고, 정의된 시점의 외부 스코프(렉시컬 스코프)에 있는 this를 그대로 사용합니다.

const obj = {
  name: "Amy",
  greet: () => {
    console.log(this.name); // undefined (obj의 this가 아님)
  }
};

4. call, apply, bind 활용

call(), apply(), bind() 메서드를 사용하면 this가 가리킬 객체를 명시적으로 지정할 수 있습니다.

function introduce() {
  console.log(this.name);
}
const person = { name: "Bob" };
introduce.call(person); // "Bob"

정리

this는 선언 위치가 아니라 호출 방식에 따라 값이 결정됩니다. 객체 메서드에서는 그 객체를, 일반 호출에서는 전역 객체를, 화살표 함수에서는 외부 스코프의 this를 참조한다는 규칙만 기억하면 대부분의 상황을 이해할 수 있습니다.