JavaScript - 'this' 키워드

안녕하세요, JavaScript 개발자 지망생 여러분! 오늘 우리는 'this' 키워드의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 이 때때로 복잡하지만 항상 흥미로운 개념을 안내해 드리겠습니다. 여러분의 좋아하는 음료를 골라, 편안하게 앉아 따라오세요!

JavaScript - this Keyword

'this' 키워드는 무엇인가요?

상상해 보세요, 파티에서 누군가가 소리쳐서 "헤이, 너!"라고 외칩니다. 누가 돌아볼까요? 모두가 그렇죠, right? 하지만 그들이 "헤이, 사라!"라고 말하면, 오직 사라만이 반응할 것입니다. JavaScript에서 'this' 키워드는 "헤이, 너!"라고 말하는 것과 같습니다. 현재 문맥의 객체를 참조하는 방법입니다.

'this' 키워드는 모든 함수의 스코프 내에서 자동으로 정의된 특별한 식별자입니다. 하지만 여기서 핵심은 - 그 값은 함수가 어떻게 호출되는지에 따라 결정된다는 것입니다. 'this'의 이러한 동적 성질은 그것을 강력하고 때로는 혼란스럽게 만듭니다.

'this'는 어떤 객체를 가리키나요?

이제 흥미로운 부분입니다. 'this'가 가리키는 객체는 어떻게 사용되고 어디서 사용되는지에 따라 달라질 수 있습니다. 그것은 변色하는 도마뱀처럼, 주변 환경에 따라 색을 바꿉니다. 다음과 같은 시나리오를 살펴보겠습니다:

문법

들어가기 전에, 'this'를 어떻게 사용하는지 빠르게 살펴보겠습니다:

console.log(this);

간단하지만, 그 간단함에 속지 마세요. 다양한 문맥에서 사용할 때 마법(또는 장난)이 일어납니다.

JavaScript 'this' 글로벌 스코프에서

글로벌 스코프(어떤 함수 밖에서)에서 사용될 때, 'this'는 글로벌 객체를 가리킵니다. 브라우저에서는 일반적으로 window 객체입니다.

console.log(this === window); // true

this.myGlobalVar = "I'm global!";
console.log(window.myGlobalVar); // "I'm global!"

여기서 'this'는 전체 파티(글로벌 스코프)에 접근할 수 있는 VIP 패스와 같습니다.

JavaScript 'this' 함수 내에서

일반 함수 내에서 'this'를 사용할 때, 그 값은 함수가 어떻게 호출되는지에 따라 달라집니다.

function showThis() {
console.log(this);
}

showThis(); // window (비스트RICT 모드에서)

이 경우, 'this'는 방황하는 강아지처럼, 주변에 있는 것에 붙습니다 - 비스트RICT 모드에서는 글로벌 객체입니다.

'this' 함수 내에서 스타RICT 모드에서

스타RICT 모드는 당신이 아무것도 건너뛰지 못하게 하는 엄격한 교사입니다. 스타RICT 모드에서, 함수 내의 'this'는 명시적으로 설정되지 않는 한 undefined입니다.

"use strict";
function strictThis() {
console.log(this);
}

strictThis(); // undefined

'this' 생성자 함수에서

함수가 생성자(new 키워드와 함께)로 사용될 때, 'this'는 새로 만들어진 객체를 가리킵니다.

function Person(name) {
this.name = name;
this.greet = function() {
console.log("Hello, I'm " + this.name);
};
}

const john = new Person("John");
john.greet(); // "Hello, I'm John"

여기서 'this'는 새로 태어난 객체의 신분증과 같습니다.

'this' 화살표 함수에서

화살표 함수는 JavaScript의 반란자입니다. 그들은 자신의 'this'를 바인드하지 않고, 둘러싸인 스코프에서 상속받습니다.

const obj = {
name: "Alice",
sayHello: () => {
console.log("Hello, " + this.name);
}
};

obj.sayHello(); // "Hello, undefined"

이 경우, 화살표 함수 내의 'this'는 obj를 가리키지 않고, 주변 스코프(likely the global scope)를 가리킵니다.

'this' 객체 메서드에서

'이'가 객체의 메서드(객체의 프로퍼티로서의 함수)에서 사용될 때, 그것은 메서드가 호출된 객체를 가리킵니다.

const car = {
brand: "Toyota",
getBrand: function() {
return this.brand;
}
};

console.log(car.getBrand()); // "Toyota"

여기서 'this'는 충성스러운 집사처럼, 항상 주인(객체)을 가리킵니다.

'this' 객체 메서드의 자식 함수에서

이 부분은 복잡해질 수 있습니다. 객체 메서드 내의 함수에서 'this'는 더 이상 객체를 가리키지 않습니다.

const restaurant = {
name: "Tasty Treats",
getMenu: function() {
function displayName() {
console.log(this.name);
}
displayName();
}
};

restaurant.getMenu(); // undefined

이 경우, displayName() 내의 'this'는 글로벌 객체를 가리킵니다, όχι restaurant.

JavaScript 'this' 이벤트 핸들러에서

이벤트 핸들러에서, 'this'는 일반적으로 이벤트를 받은 요소를 가리킵니다.

<button id="myButton">Click me!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // <button id="myButton">Click me!</button>
});
</script>

여기서 'this'는 스포트라이트처럼, 공연의 스타 - 클릭된 요소를 집중시킵니다.

JavaScript에서 명시적 함수 바인딩

때로는 우리는 'this'를 정확히 무엇이 되어야 하는지 명확히 지정하고 싶습니다. 우리는 call(), apply(), 또는 bind()를 사용하여 이를 할 수 있습니다.

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function sayHello() {
console.log("Hello, " + this.name);
}

sayHello.call(person1); // "Hello, Alice"
sayHello.apply(person2); // "Hello, Bob"

const boundHello = sayHello.bind(person1);
boundHello(); // "Hello, Alice"

이 메서드들은 'this'를 정확히 어떤 역할을 맡도록 지정하는 감독자와 같습니다.

JavaScript 'this' 우선순위

이제 'this' 바인딩의 우선순위를 요약해 보겠습니다:

규칙	우선순위
`new` 키워드	1 (가장 높음)
명시적 바인딩 (`call`, `apply`, `bind`)	2
메서드 호출	3
함수 호출	4 (가장 낮음)

화살표 함수는 특별하고 항상 주변 스코프에서 'this'를 상속받습니다.

그렇게 해서, 여러분! 우리는 'this'의 땅을 여행하며, 그 많은 얼굴과 기묘한 성질을 탐구했습니다. 'this'를 이해하는 것은 자전거 타는 것처럼 - 처음에는 흔들릴 수 있지만, 연습을 하면 곧 달릴 수 있을 것입니다. 계속 코딩하고, 탐구하고, 가장 중요한 것은 JavaScript를 즐기세요!

Credits: Image by storyset