자바스크립트 this란 무엇인가요? – 헷갈리는 개념 끝장내기

로

💡 요약 카드
자바스크립트 this는 자바스크립트 함수에서 누가 호출했는지에 따라 가리키는 대상이 바뀝니다.
전역 함수, 객체 메서드, 콜백, 화살표 함수에서 각각 다르게 동작하며, 정확히 이해하지 않으면 버그의 원인이 될 수 있습니다.

🔍 this란 무엇인가요?

this는 자바스크립트 함수나 메서드 내부에서 현재 실행 컨텍스트의 주체를 가리키는 키워드입니다.
하지만 함수가 어디에서 정의되었는가보다 어디서 호출되었는가에 따라 가리키는 대상이 달라져 많은 혼란을 낳습니다.

🧪 전역 함수에서의 this

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

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

전역 함수에서는 this가 전역 객체를 가리킵니다.
즉, 브라우저에서는 window, Node.js에서는 global입니다.

🧩 객체 메서드에서의 this

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

user.greet(); // Hello, I'm Alice

객체 메서드 내부에서 this는 해당 객체 자신을 참조합니다.
user.greet()를 호출하면 this는 user 객체를 가리키게 됩니다.

⚠ 콜백 함수와 비동기 문제

const user = {
  name: 'Bob',
  greet() {
    setTimeout(function () {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

user.greet(); // Hi, I'm undefined

이 경우 this는 setTimeout 내부에서 전역 컨텍스트를 참조하게 되므로 undefined가 출력됩니다.
이 문제는 비동기 코드에서 자주 발생하며, 개발자들이 흔히 겪는 실수 중 하나입니다.

🛠 화살표 함수로 해결하기

const user = {
  name: 'Bob',
  greet() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

user.greet(); // Hi, I'm Bob

화살표 함수는 자신이 선언된 위치의 this를 렉시컬하게 상속합니다.
즉, user.greet() 내부의 this를 유지한 채 콜백에서 사용 가능합니다.

💼 실제 개발에서 this는 어떻게 쓰일까?

클래스와 this

class Counter {
  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
    console.log(this.count);
  }
}

const c = new Counter();
c.increment(); // 1

클래스에서 this는 클래스의 인스턴스를 참조합니다. 이 동작은 대부분 예상한 대로 작동하지만, 클래스 메서드를 이벤트 핸들러나 콜백으로 넘길 때는 주의가 필요합니다.

React 컴포넌트에서 this

React 클래스 컴포넌트에서는 메서드를 사용할 때 this 바인딩이 필요합니다.

class MyComponent extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props);
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

요즘은 화살표 함수나 함수형 컴포넌트를 더 많이 사용하면서 이런 바인딩 이슈는 줄어들고 있어요.

❗ 자주 하는 실수 3가지

  1. 콜백에서 일반 함수 사용하기
    • setTimeout, forEach 등에 넘길 때는 화살표 함수 사용이 안전합니다.
  2. 메서드 참조를 직접 넘기기
    • 예: button.addEventListener("click", obj.method)는 바인딩 없이는 this가 의도대로 작동하지 않을 수 있습니다.
  3. 엄격 모드에서의 착각
    • "use strict" 모드에선 전역 함수 내 this가 undefined가 됩니다. 기존 코드에서 의도치 않은 버그를 유발할 수 있습니다.

🗂 상황별 this 요약

상황this가 가리키는 대상
전역 함수전역 객체 (window 또는 global)
객체 메서드해당 객체
일반 콜백 함수전역 객체 또는 undefined
화살표 함수외부 스코프의 this를 상속
클래스 메서드인스턴스 (new로 생성된 객체)

✅ 마무리 팁

  • this는 선언 위치보다 호출 방식이 중요합니다.
  • 화살표 함수는 비동기 함수나 콜백에서 this 문제를 방지하는 좋은 방법입니다.
  • 클래스나 이벤트 핸들러에서 this 바인딩을 까먹는 실수를 주의하세요.
  • 디버깅할 때는 console.log(this)를 적극 활용하세요.

🔁 보너스 과제
위 예제들을 직접 브라우저 콘솔이나 JSFiddle에서 실행해보세요.
실제로 결과를 확인하는 것이 this 개념을 완전히 이해하는 가장 빠른 방법입니다!

💬 보너스 팁
this의 혼란을 줄이기 위해 bind, call, apply를 사용하거나,
클래스나 컴포넌트에서는 this 바인딩을 명시적으로 해주는 것이 좋습니다.

댓글 남기기