[JavaScript] this

자바스크립트를 하다 보면 가장 많이 헷갈리는 개념 중 하나가 바로 this이다. 특히 함수 선언식, 객체 메서드, 화살표 함수에서 각각 어떻게 동작하는지가 다르기 때문에 명확히 정리해두면 실수를 줄일 수 있다.

this는 언제 결정될까?

this는 함수가 정의된 위치가 아니라, 호출되는 방식에 따라 결정된다. 다만, 화살표 함수는 예외적으로 정의될 때 상위 스코프의 this를 그대로 물려받는다.

함수 선언식에서의 this

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

전역 호출
- 브라우저: window
- Node.js: global
- strict mode: undefined
명시적 바인딩

foo.call({ a: 1 }); // { a: 1 }

즉, 함수 선언식은 호출 주체에 따라 this가 달라진다.

메서드에서의 this

const obj = {
  x: 10,
  foo: function () {
    console.log(this.x);
  }
};

obj.foo(); // 10

객체를 통해 호출하면 → 해당 객체가 this
분리해서 호출하면 → 기본 바인딩(undefined 혹은 전역)

const bar = obj.foo;
bar(); // undefined (strict 모드)

프로토타입 체인에서도 호출한 객체가 this가 된다.

화살표 함수에서의 this

const obj = {
  x: 42,
  foo: () => {
    console.log(this.x);
  }
};

obj.foo(); // undefined

화살표 함수는 자체적으로 this를 갖지 않는다.
대신 정의 시점의 상위 스코프에서 this를 가져온다.

콜백 함수에서 this를 잃지 않게 하려는 용도로 자주 쓰인다.

function Counter() {
  this.count = 0;
  setInterval(() => {
    this.count++;
    console.log(this.count);
  }, 1000);
}

new Counter(); // this는 Counter 인스턴스

This 주의할 점

화살표 함수는 메서드 정의용으로 적절하지 않는다.
this는 호출 방식에 따라 결정된다.
strict mode에서는 전역 호출 시 this가 undefined가 된다.

정리

함수 형태	this 결정 방식	특징
함수 선언식	호출한 방식 (전역, 객체, call 등)	상황 따라 다름
메서드	해당 메서드를 호출한 객체	분리 호출 시 주의
화살표 함수	정의 시점 상위 스코프	콜백에 유용

마무리

자바스크립트에서 this는 흔히 혼동되는 개념이지만, 호출 방식에 따라 달라진다는 원리를 기억하고, 화살표 함수는 상위 스코프를 따른다는 규칙만 명확히 이해하면 훨씬 깔끔하게 정리할 수 있다.

개발 메모장