자바스크립트에서 this라는 키워드를 만나면, this가 어떤 값을 가리키고 있는지 벌써부터 머리가 아픈 분들이 많죠 🤦🏻
this는 마치 카멜레온과도 같습니다. 카멜레온이 주변 환경에 따라 색을 바꾸듯이, this도 '함수가 어디에서 호출되었는지', '어떤 문맥에서 실행되는지'에 따라 다른 값을 가지게 됩니다.
this는 크게 전역 공간, 일반 함수, 메서드, 생성자 함수, 콜백 함수에서의 호출로 나눌 수 있는데요, 예제를 통해 각각의 상황에서 this가 어떤 값을 가리키는지 알아보도록 하겠습니다.
전역 공간에서의 호출
전역 공간에서는 this가 기본적으로 전역 객체를 참조합니다. 브라우저 환경에서는 this가 전역 객체인 window 객체를 가리키며, Node.js 환경에서는 global 객체를 참조합니다.
console.log(this);
// 브라우저 환경 : window 객체 출력
// Node.js 환경 : global 객체 출력일반 함수에서의 호출
일반 함수에서의 호출은, 전역 공간에서의 호출과 동일하게 전역 객체를 참조합니다.
function regularFunction() {
console.log(this);
}
regularFunction();
// 브라우저 환경: window 객체 출력
// Node.js 환경: global 객체 출력위의 코드에서 일반 함수인 regularFunction은 결론적으로 전역 공간에서 호출되었기 때문에, this는 브라우저에서는 window 객체를, Node.js에서는 global 객체를 참조합니다.
메서드에서의 호출
this 키워드는, 메서드 내부에서는 호출한 객체에 따라 달라지는 특징을 보입니다. 이번에는 메서드 내부에서의 this가 어떤 값을 가리키는지 자세하게 살펴보겠습니다.
const user = {
name: ‘홍길동’,
greet: function () {
console.log(this);
}
};
user.greet();
// 출력: { name: '홍길동', greet: [Function: greet] }위의 코드에서 this는 greet 메서드를 호출한 객체인 user를 가리킵니다. 자바스크립트는 메서드가 호출될 때, 해당 호출한 객체를 this에 자동으로 바인딩합니다. 즉, user.greet()는 greet 메서드가 user 객체에 의해 호출되었기 때문에, this는 user 객체를 가리키는 것입니다.
생성자 함수에서의 호출
생성자 함수 내부에서 this는 특별한 역할은 합니다. new 키워드와 함께 생성자 함수를 호출하면, this는 자동으로 새로 생성된 객체를 참조하게 되어, 생성자 함수가 객체의 초기 상태를 설정하는 데 매우 유용합니다. 예제를 통해 this가 어떻게 동작하는지 살펴보겠습니다. 다시 코드를 가져와 보겠습니다.
function User(name, age) {
this.name = name; // 새로운 객체의 name 프로퍼티 설정
this.age = age; // 새로운 객체의 age 프로퍼티 설정
}
const user1 = new User('홍길동', 25);
const user2 = new User('김철수', 30);
console.log(user1.name); // 출력: 홍길동
console.log(user2.age); // 출력: 30위의 코드에서 new User(‘홍길동’, 25)가 호출되면, 다음과 같은 과정이 진행됩니다. 우선 새로운 빈 객체가 생성되고, this는 새로 생성된 객체를 가리킵니다. 그 다음 this.name과 this.age를 통해 새로운 객체의 속성이 설정되며, 생성자 함수가 완료된 이후 this가 자동으로 반환됩니다.
결론적으로 user1과 user2는 각각 홍길동과 김철수의 정보를 가진 객체로 생성되어, user1.name의 출력값은 ‘홍길동’, user2.age의 출력값은 30이 됩니다.
콜백 함수에서의 호출
콜백 함수 내부의 this 또한, 자신을 포함하고 있는 함수가 어떻게 호출되었는지에 따라 값이 달라집니다. 특히 콜백 함수는 전역 객체를 가리키거나, 호출한 객체를 가리키는 등 상황에 따라 동작이 달라지기 때문에 주의해서 사용해야 하는데요. 아래의 예제 코드를 통해 조금 더 구체적으로 살펴보겠습니다.
const user = {
name: '홍길동',
greet: function () {
console.log(`안녕하세요, ${this.name}입니다.`);
}
};
function executeCallback(callback) {
callback();
}
executeCallback(user.greet);
// 출력: 안녕하세요, undefined입니다.위의 코드에서 user.greet는 원래 user 객체의 메서드이지만, executeCallback 함수에 전달된 이후, user.greet는 독립적인 함수로 전역 공간에서 호출되고 있기 때문에, 더 이상 user 객체를 참조하지 않습니다. 대신, 일반 함수처럼 동작하며 this는 기본적으로 전역 객체(window 또는 global)를 가리키게 됩니다.
참고 자료
자바스크립트 this에 대해 더 자세하게 학습하고 싶은 분들은 아래의 글이나 강의를 참고해주세요 😊
요즘IT 글 : https://yozm.wishket.com/magazine/detail/3009/
인프런 강의 : https://inf.run/WfRmY
