JS this

자바스크립트에서 this는 한 마디로 "지금 이 코드를 실행하고 있는 주인공 객체"를 가리키는 대명사입니다.

---

가장 중요한 핵심은 this가 선언될 때 고정되는 것이 아니라, 함수를

"어떻게 호출했느냐"

에 따라 가리키는 대상이 실시간으로 바뀐다(다이내믹 바인딩)는 점입니다.

 

호출 방식에 따른 4가지 핵심 상황을 정리해 드릴게요.

---

---

1. 일반 함수로 호출할 때 - window (전역 객체)

어떤 객체에도 소속되지 않은 주인 없는 일반 함수를 그냥 호출하면, this는 브라우저의 최상위 객체인 window를 가리킵니다.

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

hello(); // window 객체가 출력됨

---

strict mode(엄격 모드)에서의 차이

고작 일반 함수를 불렀는데 거대한 window 객체를 가리키는 것은 위험하다고 판단하여, 'use strict';를 선언한 환경에서는 일반 함수의 this에 undefined가 바인딩됩니다.

---

---

2. 객체의 메소드로 호출할 때 - 호출한 그 객체

함수가 어떤 객체의 속성(메소드)으로 들어가서 호출된다면, this는 그 함수를 품고 있고 실행시킨 '바로 그 객체'를 가리킵니다.

const person = {
  name: "Kim",
  speak: function() {
    console.log(this.name); // 여기서 this는 person 객체입니다.
  }
};

person.speak(); // "Kim" 출력 (person.name과 동일)

---

---

3. new 연산자로 호출할 때 -  새로 태어난 인스턴스

자바스크립트에서 붕어빵 틀(생성자 함수나 클래스)을 사용해 새로운 객체 인스턴스를 찍어낼 때, 그 내부의 this는 방금 막 new를 통해 세상에 태어난 따끈따끈한 빈 객체를 가리킵니다.

function Developer(language) {
  this.language = language; // 여기서 this는 새로 만들어질 객체 자체입니다.
}

const dev1 = new Developer("JavaScript");
console.log(dev1.language); // "JavaScript" 출력

---

---

4. 화살표 함수(Arrow Function)를 쓸 때 -  언제나 상위 환경의 this

ES6에서 등장한 화살표 함수(() => {})는 자신만의 고유한 this를 가지지 않는 독특한 녀석입니다.

화살표 함수 내부에서 this를 외치면, 함수가 호출될 때 결정되는 게 아니라 함수가 처음 적힌(선언된) 장소의 바로 바깥쪽(상위 스코프)의 this를 그대로 물려받아 사용합니다. (이를 Lexical this라고 합니다.)

const user = {
  name: "Lee",
  // 1. 일반 함수 메소드
  regularFunc: function() {
    console.log("일반:", this.name); 
    
    // 2. 메소드 내부의 화살표 함수
    const arrowFunc = () => {
      console.log("화살표:", this.name); 
    };
    arrowFunc();
  }
};

user.regularFunc();
// 일반: "Lee" (user 객체가 호출했으므로)
// 화살표: "Lee" (자신을 감싸고 있는 regularFunc의 this를 그대로 복사해왔으므로)

---

실무 팁: 콜백 함수(예: setTimeout이나 이벤트 리스너) 내부에서 this가 깨지는 문제를 해결할 때 화살표 함수가 엄청난 구원투수가 됩니다.

---

---

자바스크립트 this 법칙 최종 요약

함수 호출 방식	this가 가리키는 대상	비고
일반 함수 호출	window (엄격 모드에서는 undefined)	주인이 없는 공중 상태
객체의 메소드 호출	그 메소드를 호출한 객체	마침표(.) 바로 앞에 적힌 객체
생성자 함수 (new)	새로 생성된 인스턴스 객체	붕어빵 틀에서 찍혀 나온 새 객체
화살표 함수 (=>)	자신이 선언된 상위 스코프의 this	변하지 않는 정적 바인딩

 

이제 자바스크립트 개발자들을 평생 괴롭히는 카멜레온 같은 this를 완벽하게 통제하실 수 있게 되었습니다!

---