자바스크립트의 this는 왜 그렇게 움직일까? – 동적 바인딩

자바스크립트를 공부하다 보면 this 키워드가 정말 헷갈립니다.

함수 안에서 썼을 때는 객체를 가리키더니, 어떤 때는 undefined가 나오고,

어떤 때는 window를 가리킵니다.

 

왜 그럴까요?

 

그 이유는 자바스크립트의 this가 “동적 바인딩”이라는 규칙을 따르기 때문입니다.

 

this란?

this는 “현재 실행 중인 함수가 누구를 통해 호출됐는가“에 따라 달라지는 실행 컨텍스트의 참조값입니다.

 

 

예제 1: 객체 메서드에서의 this

const person = {
  name: "Alice",
  greet: function () {
    console.log("Hi, I'm " + this.name);
  }
};

person.greet(); // 👉 this는 person을 가리킴 → 출력: Hi, I'm Alice

❗ 그런데 변수에 옮기면?
const greetFn = person.greet;
greetFn(); // ❌ this는 undefined (strict mode) 또는 window (비엄격 모드)

 

greetFn()은 이제 객체 없이 단독으로 호출되고 있습니다.

즉, 이 시점에서 this는 더 이상 person이 아닙니다.

 

• 브라우저 환경에서는 기본적으로 window를 가리킴
• 'use strict' 모드에서는 undefined

 

👉 이것이 자바스크립트의 동적 바인딩입니다.

호출되는 방식에 따라 this가 달라지는 것이죠

 

 

예제 2: setTimeout과 일반 함수

const counter = {
  value: 0,
  increase: function () {
    setTimeout(function () {
      console.log(this.value); // ❌ this는 counter가 아님
    }, 1000);
  }
};

counter.increase(); // 출력: undefined

setTimeout의 콜백 함수는 단독으로 호출되기 때문에,

그 안의 this는 window 또는 undefined가 됩니다.

 

 

해결법 1: this를 변수에 저장 (var that = this 패턴)

const counter = {
  value: 0,
  increase: function () {
    const that = this;
    setTimeout(function () {
      console.log(that.value); // ✅ that은 counter를 가리킴
    }, 1000);
  }
};

전통적인 방식입니다. 외부 this를 that에 복사해두고, 콜백에서 사용합니다.

 

해결법 2: 화살표 함수 사용

const counter = {
  value: 0,
  increase: function () {
    setTimeout(() => {
      console.log(this.value); // ✅ 화살표 함수는 this를 바깥에서 가져옴
    }, 1000);
  }
};

화살표 함수는 this를 만들지 않고, 자신이 정의된 위치의 this를 그대로 사용합니다.

위 코드에서는 increase() 메서드의 this가 counter이므로, 콜백 안에서도 그대로 유지됩니다.

 

 

주의: 화살표 함수를 객체 메서드로 직접 정의하면?

const user = {
  name: "Jane",
  greet: () => {
    console.log("Hi, I'm " + this.name); // ❌ this는 user가 아님
  }
};

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

화살표 함수는 객체의 메서드로 사용하면 안 됩니다.

그 정의 시점의 this는 전역 스코프(window/global)이기 때문이에요.

 

 

요약

상황	this가 가리키는 대상
객체의 메서드에서 호출	해당 객체
일반 함수에서 호출	전역 객체 (window) 또는 undefined
화살표 함수	정의된 시점의 외부 this를 유지
setTimeout, setInterval 등	기본적으로 전역 또는 undefined
메서드를 변수에 저장 후 호출	전역 또는 undefined

 

 

마무리

자바스크립트의 this는 어디서 정의되었느냐보다, 어떻게 호출되었는지에 따라 값이 결정됩니다.

이것이 바로 동적 바인딩의 원리입니다.

 

그리고 이 불편함을 해소하기 위해 나온 것이 바로 화살표 함수(arrow function)입니다.

화살표 함수는 this를 고정시켜서, 의도하지 않은 바인딩 오류를 줄여줍니다.