자바스크립트를 공부하다 보면 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(); // 출력: undefinedsetTimeout의 콜백 함수는 단독으로 호출되기 때문에,
그 안의 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를 고정시켜서, 의도하지 않은 바인딩 오류를 줄여줍니다.
'Server > node.js' 카테고리의 다른 글
| 자바스크립트의 const, let, var (0) | 2025.06.09 |
|---|---|
| 무작위 키 발급하는 방법 (Node.js 활용) (0) | 2025.03.10 |
