JavaScript의 this 이해하기

자바스크립트에서 this란?

this는 자바스크립트에서 코드 실행 문맥(context)에 따라 값이 달라지는 키워드입니다. 문맥은 코드가 실행되는 방식과 위치를 의미하며, this는 그 문맥에 따라 특정 객체를 참조합니다.

---

this의 기본 규칙

this가 참조하는 값은 코드 실행 환경에 따라 달라지며, 다음 네 가지 주요 상황에서 결정됩니다.

1. 전역 컨텍스트 또는 함수 호출
   • 기본적으로 전역 객체를 참조합니다.
   • 브라우저에서는 window, Node.js 환경에서는 global.
2. 메서드 호출
   • 메서드를 호출한 객체를 참조합니다.
3. 생성자 함수와 클래스
   • 새로 생성된 객체를 참조합니다.
4. 명시적으로 바인딩
   • call, apply, bind를 사용하여 명시적으로 설정합니다.

---

상황별 this의 동작

전역 컨텍스트에서의 this

전역 실행 문맥에서는 this는 전역 객체를 참조합니다.

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

함수에서의 전역 this

기본적으로 함수 내에서 this는 전역 객체를 참조합니다. 하지만 "use strict"; 모드에서는 undefined가 됩니다.

// 전역 컨텍스트
function showThis() {
  console.log(this);
}
showThis(); // window (브라우저), global (Node.js)

// 엄격 모드에서
"use strict";
function strictThis() {
  console.log(this);
}
strictThis(); // undefined

---

메서드에서의 this

객체의 메서드 안에서 this는 해당 메서드를 호출한 객체를 가리킵니다.

const user = {
  name: 'John',
  greet() {
    console.log(`Hello, ${this.name}!`);
  },
};

user.greet(); // Hello, John!

---

생성자 함수와 클래스에서의 this

new 키워드로 호출한 생성자 함수나 클래스의 내부에서는 this가 새로 생성된 객체를 참조합니다.

function User(name) {
  this.name = name;
}

const newUser = new User('Alice');
console.log(newUser.name); // Alice

ES6 클래스에서도 동일합니다.

class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

const alice = new User('Alice');
alice.greet(); // Hello, Alice!

---

명시적 바인딩: call, apply, bind

call, apply, bind 메서드는 함수 호출 시 this를 명시적으로 설정할 수 있도록 합니다.

call과 apply

• call: 인수를 쉼표로 구분하여 전달.
• apply: 인수를 배열로 전달.

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

const actor = { name: 'Chris' };

introduce.call(actor, 30); // Chris is 30 years old.
introduce.apply(actor, [30]); // Chris is 30 years old.

bind

bind는 새로운 함수를 반환하며, 이 함수는 this가 고정된 상태로 호출됩니다.

const user = { name: 'Tom' };

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const boundSayHello = sayHello.bind(user);
boundSayHello(); // Hello, Tom!

---

화살표 함수와 this

화살표 함수는 this가 정적으로 바인딩됩니다. 즉, 정의된 위치의 상위 스코프를 참조합니다.

const group = {
  title: 'Study Group',
  members: ['Alice', 'Bob'],

  showMembers() {
    this.members.forEach((member) => {
      console.log(`${member} belongs to ${this.title}`);
    });
  },
};

group.showMembers();
// Alice belongs to Study Group
// Bob belongs to Study Group

화살표 함수는 실행 문맥이 아닌, 선언된 위치의 this를 따르므로, 일반 함수와 다른 동작을 합니다.

---

this 관련 주요 문제와 해결 방법

메서드 참조 손실

객체 메서드를 변수에 할당하거나 콜백으로 전달하면 this가 기대와 달라질 수 있습니다.

const user = {
  name: 'Jane',
  greet() {
    console.log(`Hello, ${this.name}!`);
  },
};

const greetFunction = user.greet;
greetFunction(); // Hello, undefined!

해결: bind 사용

const boundGreet = user.greet.bind(user);
boundGreet(); // Hello, Jane!

---

결론

this는 자바스크립트의 강력한 기능이지만, 문맥에 따라 값이 변하기 때문에 혼란스러울 수 있습니다. 이 글에서는 this의 주요 사용법과 상황별 동작 원리를 살펴보았습니다. 명확한 이해를 위해 코드를 실행하고 다양한 상황에서 테스트해보는 것이 중요합니다.