[JS 기초] 카멜레온 같은 정체성, this 이해하기

자바스크립트를 공부하다 보면 가장 우리를 당황스럽게 만드는 존재가 있습니다. 바로 this입니다. 상황에 따라, 장소에 따라 그 정체가 변하는 this는 마치 카멜레온 같습니다.
늘 포스팅에서는 this가 결정되는 결정적인 차이인 "누가 나를 불렀는가(호출 방식)"와 "어디서 태어났는가(선언 환경)"의 관점에서 핵심 내용을 정리해 보겠습니다.

 

 

---

메서드 호출: "누가 나를 불렀는가?"

---

가장 직관적인 형태입니다. 점(.) 앞을 주목하세요. 객체의 메서드로 호출될 때, 그 내부의 this는 메서드를 호출한 객체를 가리킵니다.

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

user.greet(); // 결과: Gemini (점 앞의 'user'가 호출자!)

 

핵심: obj.method() 형태에서 this는 바로 그 obj입니다.

 

---

일반 함수 호출: "주인 없는 호출은 전역으로"

---

객체의 메서드가 아닌, 일반적인 함수 형태로 호출하면 this는 길을 잃고 전역 객체(Global/Window)를 찾아갑니다.

• 브라우저 환경: window
• Node.js 환경: global

단, 실수를 방지하기 위한 Strict Mode(엄격 모드)에서는 전역 객체를 바인딩하지 않고 undefined를 반환합니다.

function showThis() {
  console.log(this);
}

showThis(); // 결과: Window (엄격 모드에선 undefined)

 

---

화살표 함수: "나는 태생부터 정해져 있어"

---

ES6에서 등장한 화살표 함수(Arrow Function)는 기존의 this 규칙을 파괴하는 혁명적인 녀석입니다. 이 친구는 자신만의 this를 아예 가지지 않습니다.

대신 상위 스코프(Lexical Scope)의 this를 그대로 물려받습니다. 즉, "어디서 태어났는지"가 가장 중요합니다.

const runner = {
  name: "카멜레온",
  run: function() {
    setTimeout(() => {
      console.log(this.name + "이(가) 달립니다!");
    }, 1000);
  }
};

runner.run(); // 결과: 카멜레온이(가) 달립니다!

 

일반 함수였다면 setTimeout 내부의 this는 전역 객체를 가리켰겠지만, 화살표 함수는 상위인 run 메서드의 this(runner 객체)를 그대로 가져옵니다.

 

 

구분	호출 방식	this의 정체
메서드 호출	obj.method()	점(.) 앞의 객체 (obj)
일반 함수 호출	func()	전역 객체 (Strict 모드에선 undefined)
화살표 함수	() => {}	상위 스코프의 this (계승)

 

 

---

마무리

---

this가 헷갈릴 때는 딱 두 가지만 기억하세요!

1. 일반 함수나 메서드라면? → "누가 나를 불렀지?" (호출 시점 결정)
2. 화살표 함수라면? → "나는 어디서 만들어졌지?" (선언 시점 결정)

이 규칙만 손에 익히면 더 이상 카멜레온 같은 this 때문에 밤잠 설칠 일은 없을 거예요.