자바스크립트 this 키워드 제대로 이해하기 (함수 / 객체 / 클래스에서)

자바스크립트의 this는 문맥(context)에 따라 다르게 동작하는 독특한 키워드입니다. 함수, 객체, 클래스 등 다양한 구조에서 this가 어떻게 달라지는지 제대로 이해하지 않으면 예기치 못한 결과를 초래할 수 있습니다. 이 글에서는 상황별 this의 의미와 사용법을 예제와 함께 설명합니다.

---

✨ 전역 컨텍스트에서의 this

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

• 전역에서의 this는 브라우저에선 window 객체를, Node.js에선 global 객체를 참조합니다.

---

✨ 일반 함수에서의 this

function show() {
  console.log(this);
}
show(); // 브라우저 기준: window (strict 모드에서는 undefined)

• 일반 함수에서의 this는 호출 위치에 따라 달라지며, use strict 모드에서는 undefined가 됩니다.

---

✨ 객체 메서드에서의 this

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

• 객체의 메서드에서 this는 해당 객체를 가리킵니다.

---

✨ 화살표 함수에서의 this

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

• 화살표 함수는 자신의 this를 가지지 않고 상위 스코프의 this를 상속받습니다.
• 주로 콜백 함수나 클래스 내 메서드에서 유용하게 사용됩니다.

---

✨ 클래스에서의 this

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}
const p = new Person("Charlie");
p.greet(); // "Hi, I'm Charlie"

• 클래스 내부 메서드에서의 this는 인스턴스를 가리킵니다.

---

✨ 이벤트 핸들러에서의 this

document.querySelector("button").addEventListener("click", function() {
  console.log(this); // 클릭된 버튼 요소
});

• 일반 함수로 작성된 이벤트 핸들러에서 this는 이벤트가 발생한 요소를 참조합니다.
• 화살표 함수를 사용할 경우에는 this가 외부 스코프를 가리킵니다.

---

✅ 요약

상황	this가 참조하는 대상
전역	window 또는 global
일반 함수	호출 컨텍스트 (또는 undefined)
객체 메서드	해당 객체
화살표 함수	상위 스코프의 this
클래스 메서드	인스턴스
이벤트 핸들러	이벤트 대상 (function)

---

✨ 결론

this는 자바스크립트에서 문맥에 따라 달라지는 동적인 키워드입니다. 함수 선언 방식에 따라 참조 대상이 달라지므로, 의도한 대상을 정확히 가리키기 위해선 화살표 함수와 일반 함수의 차이를 이해하고 상황에 맞게 사용하는 것이 중요합니다.