JavaScript의 this 이해하기: 컨텍스트, 주의점 및 객체지향 프로그래밍

JavaScript에서 this는 현재 컨텍스트에 따라 바인딩되는 키워드입니다. 실행 시점에서 this의 값은 다른 값으로 변경될 수 있습니다. 이 글에서는 JavaScript의 this에 대해 알아보고, 객체지향 프로그래밍에서 주의해야 할 사항 및 참고할 사항을 설명하겠습니다.

this 바인딩에 따른 차이 이해하기

this는 크게 다음과 같은 상황에 따라 다른 값을 바인딩합니다

1. 전역 컨텍스트에서의 this

전역 함수 내부에서 사용한 경우, this는 전역 객체를 가리킵니다.
브라우저에서 이는 window 객체며 Node.js에서는 global 객체입니다.

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

globalContext(); // window (브라우저), global (Node.js)

2. 객체의 메서드에서의 this

객체 내부의 함수에서 사용한 경우, this는 함수를 호출한 객체를 가리킵니다.

const obj = {
  message: "Hello",
  greet: function () {
    console.log(this.message);
  },
};

obj.greet(); // "Hello"

3. 생성자 함수에서의 this

new를 사용해서 객체를 생성하는 경우, this는 생성되는 새 객체를 가리킵니다.

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

const person = new Person("John");
console(person.name); // "John"
4. call, apply, bind 메서드에서의 this
이들 메서드를 통해 this의 값을 명시적으로 설정할 수 있습니다.
javascript
function greet() {
  console.log(this.name);
}

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

greet.call(person1); // "Alice"
greet.call(person2); // "Bob"

객체지향 프로그래밍에서 this에 대한 주의점과 참고 사항

1. 함수를 변수에 할당하거나 콜백으로 사용할 때 조심하세요

이 경우, 해당 함수의 컨텍스트를 잃어버릴 수 있습니다. 이러한 상황에서는 bind 메서드를 사용해 this를 명시적으로 바인딩할 수 있습니다. 또는 화살표 함수를 사용하여 상위 스코프의 this를 유지할 수 있습니다.

const obj = {
  count: 0,
  increment: function () {
    setTimeout(function () {
      console.log(this); // window (브라우저) 또는 global (Node.js)
      this.count++; // 예상한 바와 달리 obj의 count를 증가시키지 않음
    }, 1000);
  },
};

// bind를 사용한 해결 방법
const obj = {
  count: 0,
  increment: function () {
    setTimeout(
      function () {
        console.log(this); // obj
        this.count++;
      }.bind(this),
      1000
    );
  },
};

// 화살표 함수를 사용한 해결 방법
const obj = {
  count: 0,
  increment: function () {
    setTimeout(() => {
      console.log(this); // obj
      this.count++;
    }, 1000);
  },
};

2. 이벤트 리스너에 메서드를 바인딩할 때 this를 주의해야 합니다

이벤트 리스너에서 this는 발생한 이벤트의 대상이 됩니다. 이 문제를 해결하려면 bind를 사용하거나 화살표 함수를 활용할 수 있습니다.

const button = document.querySelector("button");
const obj = {
  text: "Hello, world!",
  handleClick: function () {
    console.log(this.text); // 예상: "Hello, world!", 결과: undefined
  },
};

button.addEventListener("click", obj.handleClick);

// bind를 사용한 해결 방법
button.addEventListener("click", obj.handleClick.bind(obj));

// 화살표 함수를 사용한 해결 방법
button.addEventListener("click", () => obj.handleClick());

마치며

this의 동작 방식을 이해하고 주의점을 숙지하면 객체지향적 프로그래밍을 할 때 JavaScript 코드 작성에 도움이 됩니다. 다양한 상황에서 this와 관련된 문제를 해결할 수 있는 능력을 기르는 것이 중요합니다.