JavaScript this정리

this는 자바스크립트에서 매우 중요한 키워드이지만, 상황에 따라 그 의미가 달라질 수 있기 때문에 많은 개발자들이 처음에 혼란을 겪곤 합니다. this는 코드에서 현재 실행되는 컨텍스트(context)나 객체를 참조하는 역할을 합니다. 즉, this가 가리키는 대상은 코드가 어떻게 호출되었는지에 따라 결정됩니다.

자세히 설명해 볼게요.

기본적인 this의 동작 방식

this는 보통 함수나 메서드가 호출된 객체를 참조합니다. 그러나 이 참조 대상은 함수의 호출 방식이나 선언된 위치에 따라 달라질 수 있습니다. 대표적으로 자바스크립트에서 this가 어떻게 동작하는지를 다양한 케이스를 통해 설명하겠습니다.

1. 클래스에서의 this

클래스에서 this는 현재 인스턴스 객체를 가리킵니다. 이를 통해 클래스 내부에서 생성된 인스턴스의 속성(properties)과 메서드를 참조할 수 있습니다.

class Person {
  constructor(name, age) {
    this.name = name; // 현재 인스턴스의 name 속성
    this.age = age;   // 현재 인스턴스의 age 속성
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person("John", 30);
person1.greet(); // 출력: Hello, my name is John and I am 30 years old.

위 예제에서 this.name과 this.age는 Person 클래스의 인스턴스인 person1을 가리키며, 그 인스턴스의 name과 age를 참조합니다. 즉, this는 클래스에서 생성된 특정 인스턴스의 속성을 참조하는 데 사용됩니다.

2. 일반 함수에서의 this

일반 함수에서 this의 동작은 호출 방식에 따라 달라집니다.

• 전역 함수에서 this는 기본적으로 전역 객체를 가리킵니다. 브라우저에서는 전역 객체가 window이며, Node.js에서는 global입니다.
•  

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

showThis(); // 브라우저에서는 출력: window 객체, Node.js에서는 global 객체

• **엄격 모드(strict mode)**에서 함수 호출 시 this는 undefined가 됩니다. 엄격 모드는 자바스크립트의 오류를 줄이기 위해 더 제한적인 규칙을 적용하는 모드입니다.
•  

"use strict";

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

showThis(); // 출력: undefined

 

3. 메서드에서의 this

객체의 메서드로 정의된 함수에서 this는 해당 메서드를 소유하고 있는 객체를 가리킵니다.

const obj = {
  value: 100,
  showValue: function() {
    console.log(this.value);
  }
};

obj.showValue(); // 출력: 100

여기서 this.value는 obj 객체를 참조하므로, obj.value의 값인 100을 출력합니다.

4. 화살표 함수에서의 this

화살표 함수는 자신만의 this를 가지지 않기 때문에, 화살표 함수 내부에서 this를 사용하면 **해당 함수가 정의된 위치에서의 상위 스코프의 this**를 참조합니다.

function Outer() {
  this.name = "Outer Function";

  const inner = () => {
    console.log(this.name);
  };

  inner();
}

const outerInstance = new Outer(); // 출력: Outer Function

위 예제에서 화살표 함수 inner는 상위 함수 Outer의 this를 그대로 사용합니다. 즉, 화살표 함수는 lexical scope를 사용해 this를 결정합니다.

5. 이벤트 핸들러에서의 this

DOM 요소의 이벤트 핸들러에서 this는 이벤트가 발생한 요소 자체를 가리킵니다.

document.getElementById("myButton").addEventListener("click", function() {
  console.log(this); // 출력: 클릭된 버튼 요소
});

하지만 화살표 함수를 이벤트 핸들러로 사용하면 this는 상위 스코프의 this를 사용합니다.

document.getElementById("myButton").addEventListener("click", () => {
  console.log(this); // 전역 객체를 출력 (또는 undefined - 상위 스코프 따라감)
});

this의 이해를 위한 요약

• 클래스에서: this는 생성된 인스턴스를 참조합니다.
• 일반 함수에서: this는 전역 객체(브라우저에서는 window)를 참조합니다. 그러나 엄격 모드에서는 undefined입니다.
• 메서드에서: this는 해당 객체를 참조합니다.
• 화살표 함수에서: this는 상위 스코프의 this를 참조합니다.
• 이벤트 핸들러에서: this는 이벤트가 발생한 요소를 가리킵니다.

예제와 함께 더 깊은 이해

이해를 돕기 위해 조금 더 복잡한 예제를 보여드릴게요.

class Car {
  constructor(brand) {
    this.brand = brand;
  }

  regularFunction() {
    console.log(`Regular function this.brand: ${this.brand}`);
  }

  arrowFunction = () => {
    console.log(`Arrow function this.brand: ${this.brand}`);
  }
}

const myCar = new Car("Tesla");
myCar.regularFunction(); // 출력: Regular function this.brand: Tesla
myCar.arrowFunction();   // 출력: Arrow function this.brand: Tesla

const detachedRegular = myCar.regularFunction;
detachedRegular(); // 출력: Regular function this.brand: undefined (또는 전역 객체에서의 undefined)

const detachedArrow = myCar.arrowFunction;
detachedArrow();   // 출력: Arrow function this.brand: Tesla (원래 클래스 인스턴스의 this를 사용)

위 예제에서 detachedRegular와 detachedArrow를 보면, 일반 함수는 this가 객체와 분리되면서 undefined가 되는 반면, 화살표 함수는 원래 인스턴스의 this를 계속 참조합니다.

결론

this는 코드가 실행되는 컨텍스트에 따라 달라지는 중요한 키워드입니다. 자바스크립트의 다양한 호출 방식에 따라 this가 가리키는 대상을 정확히 이해하면 코드의 의도와 동작을 더욱 명확하게 이해할 수 있습니다. 자바스크립트에서 this를 잘 이해하는 것이 객체지향 프로그래밍과 콜백 메서드 등을 다루는 데 매우 중요합니다.