this는 자바스크립트에서 가장 자주 오해받는 개념이다
자바스크립트에서 this는 다양한 상황에 따라 가리키는 대상이 달라지는 특수한 키워드입니다. 다른 많은 언어에서 this는 해당 클래스 또는 객체 인스턴스를 일관되게 참조하는 반면, 자바스크립트에서는 실행 방식과 호출 문맥에 따라 this가 동적으로 결정됩니다. 이러한 특성은 자바스크립트의 유연함을 가능하게 하지만, 동시에 많은 혼란과 실수를 유발하는 원인이 되기도 합니다.
this는 객체 메서드 안에서는 그 객체 자체를, 생성자 함수에서는 새로 생성된 인스턴스를 가리킵니다. 하지만 일반 함수에서는 전역 객체나 undefined(strict mode)로 바뀌며, 이벤트 핸들러나 setTimeout, setInterval 등의 비동기 함수 안에서는 기대와 다르게 작동할 수 있습니다. 특히 ES6 이후 도입된 화살표 함수에서는 this의 바인딩 방식이 완전히 달라집니다. 화살표 함수는 자신만의 this를 가지지 않고, 외부 스코프의 this를 그대로 사용합니다.
이러한 복잡한 this의 동작을 이해하지 못하면, 객체의 메서드가 제대로 실행되지 않거나, 비동기 작업에서 this가 의도한 객체를 가리키지 않는 등 다양한 문제에 직면하게 됩니다. 따라서 자바스크립트를 제대로 다루기 위해서는 this의 원리를 정확히 이해하고, 상황에 맞게 적절히 활용할 수 있어야 합니다.
이 글에서는 자바스크립트의 다양한 실행 컨텍스트에서 this가 어떤 값을 가지는지 자세히 설명하고, this 바인딩 오류를 방지하기 위한 팁도 함께 안내합니다.
상황에 따라 달라지는 this의 동작 방식
1. 전역 컨텍스트(Global Context)
전역 범위에서의 this는 브라우저 환경에서는 window 객체를, Node.js 환경에서는 global 객체를 가리킵니다.
console.log(this); // window (브라우저 기준)2. 일반 함수 내부
일반 함수 내부에서
this는 strict mode 여부에 따라 달라집니다.
function show() {
console.log(this);
}
show(); // window (비엄격 모드), undefined (strict 모드)
3. 객체의 메서드객체 내부에서 메서드로 호출되면
this는 해당 객체를 참조합니다.
const user = {
name: "홍길동",
sayHello: function() {
console.log(this.name);
}
};
user.sayHello(); // "홍길동"
4. 생성자 함수new 키워드로 생성자 함수를 호출하면, this는 새로 생성된 인스턴스를 참조합니다.
function Person(name) {
this.name = name;
}
const p = new Person("이순신");
console.log(p.name); // "이순신"
5. call, apply, bind 메서드this를 명시적으로 바인딩할 수 있는 메서드입니다.
function greet() {
console.log(this.name);
}
const person = { name: "강감찬" };
greet.call(person); // "강감찬"
6. 화살표 함수(Arrow Function)화살표 함수는
this를 자신이 정의된 외부 스코프에서 상속받습니다. 이 특성 때문에 콜백 함수에서 자주 사용됩니다.
const obj = {
name: "세종",
greet: function() {
setTimeout(() => {
console.log(this.name);
}, 1000);
}
};
obj.greet(); // "세종"
만약 위의 화살표 함수를 일반 함수로 바꾸면 this는 window나 undefined를 참조하게 됩니다.
7. 이벤트 핸들러 내부DOM 요소의 이벤트 핸들러에서
this는 해당 요소를 가리킵니다.
document.querySelector("button").addEventListener("click", function() {
console.log(this); // 클릭된 버튼 요소
});
하지만 화살표 함수로 이벤트 핸들러를 작성하면 this는 상위 스코프의 this를 참조하게 됩니다. 따라서 DOM 요소가 아닌 다른 객체를 가리킬 수 있어 주의가 필요합니다.
this를 이해하지 못하면 자바스크립트를 이해할 수 없다
this는 자바스크립트에서 매우 유연하면서도 복잡한 개념입니다. 다양한 실행 컨텍스트에 따라 this의 값이 달라지고, 그로 인해 발생하는 예외 상황은 초보자뿐 아니라 숙련된 개발자에게도 실수를 유발할 수 있습니다. 특히 비동기 함수, 콜백 함수, 화살표 함수, 이벤트 핸들러 등에서 this가 의도와 다르게 바인딩되는 경우를 자주 만나게 됩니다.
이러한 상황을 예방하기 위해서는 각 컨텍스트에서의 this 동작 방식을 명확히 이해해야 하며, 필요에 따라 bind, call, apply와 같은 바인딩 메서드를 적절히 사용할 수 있어야 합니다. 또한 화살표 함수의 특징을 이해하고, 사용할 때 주의해야 할 상황을 숙지하는 것도 매우 중요합니다.
실무에서는 this 바인딩 문제로 인해 버그가 발생하거나 의도치 않은 동작을 하는 경우가 많습니다. 따라서 코드 작성 시 함수의 선언 방식과 호출 위치, 실행 환경을 항상 고려하는 습관이 필요합니다. 특히 클래스나 객체 지향 프로그래밍을 자바스크립트에서 구현할 때 this는 핵심적인 요소로 작용합니다.
결론적으로 자바스크립트의 this는 단순한 참조 키워드가 아닌, 함수의 실행 맥락을 파악하는 데 핵심적인 개념입니다. 이 개념을 완전히 이해하고 활용할 수 있다면 자바스크립트 개발의 깊이가 달라지며, 보다 안정적이고 예측 가능한 코드를 작성할 수 있게 됩니다.