JavaScript에서 this 키워드 이해하기

Source: Dev.to

소개

JavaScript에는 초보자들을 혼란스럽게 하는 특별한 키워드 this가 있습니다.
핵심 아이디어: this는 함수를 “호출하고 있는” 객체를 가리킵니다.

전역 컨텍스트에서의 this

전역 스코프에서는:

// 브라우저에서는 → `window` 객체를 가리킴
// Node.js에서는 → `global` 객체를 가리킴

시각화:
전역 스코프 → this = window (브라우저) / global (Node)

객체 내부의 this

함수가 객체의 메서드로 호출될 때, this는 그 객체를 가리킵니다.

const user = {
  name: "Rahul",
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet(); // Hello, Rahul

• this는 user를 가리키는데, 이는 user가 greet()의 호출자이기 때문입니다.

시각적 표현

user → greet() → this = user

함수 내부의 this

일반 함수에서는:

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

sayHello(); // 전역 객체 (window/global) 또는 strict mode에서는 undefined

• 여기서 this는 함수 자체를 가리키지 않으며, 함수가 어떻게 호출되는가에 따라 달라집니다.

컨텍스트 변경: call, apply, bind

다음 메서드를 사용해 this를 수동으로 지정할 수 있습니다:

const user = { name: "Rahul" };

function greet(age) {
  console.log(`${this.name} is ${age} years old`);
}

greet.call(user, 22);          // Rahul is 22
greet.apply(user, [22]);       // Rahul is 22

const boundGreet = greet.bind(user);
boundGreet(22);                // Rahul is 22

• call → 즉시 호출, 인자를 개별적으로 전달
• apply → 즉시 호출, 인자를 배열로 전달
• bind → 지정된 객체에 this가 바인딩된 새 함수를 반환

화살표 함수에서의 this

화살표 함수는 자체 this를 갖지 않으며, 주변(lexical) 스코프에서 this를 상속받습니다.

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

user.greet(); // undefined (전역 스코프에서 `this`를 상속받아 `user`가 아님)

핵심 정리

• this는 함수를 호출한 객체를 가리키며, 함수 자체를 가리키지는 않습니다.
• 전역 컨텍스트 → window(브라우저) 또는 global(Node) 를 가리킴.
• 객체 메서드 → 메서드를 호출한 객체를 가리킴.
• 일반 함수 → 전역 객체(또는 strict mode에서는 undefined).
• 화살표 함수 → 주변 lexical 스코프에서 this를 상속받음.

컨텍스트 요약표