JavaScript에서 this는 함수 호출 방식에 따라 다르게 동작하는 매우 중요한 키워드이다. this는 동적으로 값이 결정되며 코드가 어디에서 실행되는지에 따라 다른 객체를 참조할 수 있다. 이번 글에서는 다양한 상황에서 this가 어떻게 동작하는지와 이를 제어하는 방법에 대해 살펴보겠다.
1. this란?
this는 현재 실행 중인 함수나 메서드가 어떤 객체를 참조하는지 결정하는 키워드이다. this는 실행 맥락(context)에 따라 값이 달라지며 함수가 호출될 때마다 그 값이 결정된다. 중요한 점은 this는 함수 선언 시가 아닌 함수 호출 시점에 결정된다는 것이다.
2. 다양한 컨텍스트에서의 this
1) 전역 컨텍스트에서의 this
전역 컨텍스트에서 this는 전역 객체를 가리킨다.
- 브라우저 환경에서는
this는window객체를 참조한다. - Node.js 환경에서는
this가 전역 객체인global을 참조한다.
console.log(this); // 브라우저에서는 window 객체2) 객체 메서드에서의 this
객체 내부에서 정의된 함수(메서드)를 호출할 때 this는 해당 메서드를 소유한 객체를 가리킨다.
const user = {
name: 'Alice',
greet() {
console.log(this.name); // this는 user 객체를 가리킴
}
};
user.greet(); // 출력: 'Alice'위 코드에서는 this가 user 객체를 참조하며, this.name은 user.name을 의미한다.
3) 생성자 함수에서의 this
생성자 함수에서는 this가 새로 생성된 객체를 가리킨다. 생성자 함수는 new 키워드와 함께 호출되며 새로운 객체가 생성될 때 그 객체를 참조하게 된다.
function Person(name) {
this.name = name;
}
const person1 = new Person('John');
console.log(person1.name); // 출력: 'John'new 키워드를 사용하여 호출된 Person 함수는 새로운 객체를 만들고 this는 그 객체를 가리킨다.
4) 화살표 함수에서의 this
화살표 함수는 상위 스코프의 this를 상속받는다. 이는 화살표 함수가 정의된 환경에 있는 this를 그대로 참조한다는 뜻이다.
const obj = {
name: 'Alice',
greet() {
const innerFunc = () => {
console.log(this.name); // 상위 스코프인 obj의 this를 참조
};
innerFunc();
}
};
obj.greet(); // 출력: 'Alice'위 예시에서 화살표 함수 innerFunc는 상위 스코프인 greet 메서드의 this를 참조하므로 this.name은 obj.name을 가리킨다.
3. this 제어하기: call, apply, bind
JavaScript에서는 this를 명시적으로 설정할 수 있는 세 가지 메서드인 call, apply, bind를 제공한다.
1) call():
call() 메서드는 함수를 호출할 때 첫 번째 인수로 전달된 객체를 this로 설정하여 호출한다.
function sayName() {
console.log(this.name);
}
const person = { name: 'John' };
sayName.call(person); // 출력: 'John'2) apply():
apply()는 call()과 비슷하지만 인수를 배열 형태로 전달한다.
sayName.apply(person); // 출력: 'John'3) bind():
bind()는 새로운 함수를 반환하며 해당 함수의 this 값을 고정할 수 있다. 이 새로운 함수는 나중에 호출할 때 this가 항상 고정된 객체를 가리킨다.
const boundFunc = sayName.bind(person);
boundFunc(); // 출력: 'John'4. 전역 함수에서의 this (strict mode)
엄격 모드(strict mode)에서는 전역 함수나 단순 함수 호출 시 this는 undefined가 된다. 전역 객체를 참조하는 실수를 방지하기 위한 메커니즘이다.
'use strict';
function myFunction() {
console.log(this); // undefined
}
myFunction(); // 출력: undefined5. 이벤트 핸들러에서의 this
이벤트 핸들러에서 this는 이벤트가 발생한 DOM 요소를 가리킨다.
const button = document.querySelector('button');
button.addEventListener('click', function() {
console.log(this); // this는 클릭된 버튼 요소를 가리킴
});this는 이벤트를 발생시킨 버튼 요소를 가리키며 이를 통해 해당 DOM 요소에 쉽게 접근할 수 있다.
6. this와 관련된 혼동 방지
this는 다양한 상황에서 다른 객체를 가리키기 때문에 초기에 혼란스러울 수 있다. 특히 함수가 어디서 호출되었느냐에 따라 this가 달라지므로, 이를 명확하게 이해하는 것이 중요하다.
주요 혼동 방지 팁:
- 화살표 함수는 항상 상위 스코프의
this를 상속받는다. call,apply,bind메서드를 사용해 원하는 객체를this로 설정할 수 있다.- 엄격 모드에서는 전역 함수의
this가undefined가 되므로, 이를 염두에 두고 코드를 작성해야 한다.
7. 결론
JavaScript의 this는 실행 컨텍스트에 따라 동적으로 결정되는 키워드로 코드의 맥락에 따라 가리키는 대상이 달라진다. 함수가 호출되는 방식에 따라 this가 달라지며 이를 잘 이해하고 사용하는 것이 JavaScript에서 안정적인 코드를 작성하는 데 매우 중요하다. 화살표 함수, bind, call, apply를 적절히 활용하면 this를 유연하게 제어할 수 있으며 다양한 상황에서의 this 동작을 숙지하면 코드의 예측 가능성과 유지보수성을 높일 수 있다.
