자바스크립트에서 this란?

this는 함수가 호출되는 방식에 따라 결정되는 컨텍스트 객체를 의미한다.
즉, 누가 호출했느냐에 따라 this가 가리키는 대상이 달라진다.

📌 전역 컨텍스트에서의 this

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

📌 객체 메서드에서의 this

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

person.greet(); // "Orangee"
  • 객체에서 호출되었기 때문에 this는 person을 가리킴

❌ 일반 함수에서의 this (주의!)

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

show(); // 브라우저에서는 window, strict 모드에서는 undefined
  • 단독 호출된 함수는 전역 객체가 됨 (use strict 모드에선 undefined)

✅ 화살표 함수에서의 this

const obj = {
  name: "Orangee",
  sayLater() {
    setTimeout(() => {
      console.log(this.name); // 화살표 함수는 상위 스코프의 this 사용
    }, 1000);
  }
};

obj.sayLater(); // "Orangee"
  • 화살표 함수는 자신만의 this를 가지지 않고 상위 컨텍스트의 this를 사용함

🔁 this 바인딩 방법

function greet() {
  console.log(this.name);
}

const user = { name: "ORANGEE" };
greet.call(user); // "ORANGEE"
greet.apply(user); // "ORANGEE"
const boundGreet = greet.bind(user);
boundGreet(); // "ORANGEE"

✅ 마무리

  • this는 호출 방식에 따라 달라진다.
  • 화살표 함수는 상위 스코프의 this를 사용한다.
  • call, apply, bind를 사용하면 원하는 객체로 this를 고정할 수 있다.