📘 9.1.1 전역에서의 this - 코딩 세계의 '나'를 찾아서
어떤 순간, 여러분이 넓은 운동장 한복판에 혼자 서 있다고 상상해보세요. 주위를 둘러보면서 "여기서 내가 누구지? 이곳의 주인은 누구지?"라고 궁금해하는 마음이 들지 않을까요?
프로그래밍 세계에도 그런 순간이 있어요. 코드가 실행될 때 "지금 나는 어디에 있고, 누가 나를 관리하고 있지?"라고 궁금해하는 거죠. 그때 도움을 주는 특별한 키워드가 바로 this예요.
this는 영어로 "이것", "여기"라는 뜻이지만, 자바스크립트에서는 훨씬 더 깊은 의미를 가져요. 마치 거울처럼 현재 상황을 정확히 반영해주는 똑똑한 친구랍니다.
🧠 새로운 단어들과 친해지기
새로운 개념을 배우기 전에, 서로 같은 말을 하고 있는지 확인해보는 게 중요해요.
| 단어 | 쉬운 설명 |
|---|---|
| this | 지금 이 순간 코드를 실행하고 있는 주인이 누구인지 알려주는 특별한 키워드예요 |
| 전역 | 프로그래밍 세계에서 가장 넓고 높은 곳으로, 모든 곳에서 접근할 수 있는 큰 광장 같은 공간이에요 |
| window | 웹 브라우저에서 모든 것을 관리하는 최고 관리자 같은 존재예요 |
이런 용어들을 이해하면 다른 개발자들과 대화할 때도 훨씬 수월해져요.
✨ this가 뭔지 알아보기
this라는 키워드는 자바스크립트의 정말 특별한 친구예요. 이 친구는 코드가 실행되는 순간의 주인을 알려주는 현명한 안내원 역할을 해요.
전역이라는 큰 공간에서 this를 사용하면, 항상 window라는 특별한 객체를 가리켜요. 이 window는 웹 브라우저 전체를 관리하는 최고 관리자와 같은 존재예요. 모든 전역 변수들이 이 window의 소유물이 되고, 웹 페이지의 모든 것을 총괄하는 중요한 역할을 해요.
처음에는 조금 어려울 수 있지만, this를 이해하면 나중에 객체나 함수에서도 "지금 누가 주인인지" 쉽게 알 수 있게 돼요. 마치 신분증처럼 코드의 정체성을 확인해주는 도구라고 생각하면 돼요.
재미있는 비유: 우리 집의 거실에서 열리는 가족 회의
this를 더 쉽게 이해하기 위해 '우리 집 거실에서 열리는 가족 회의'를 상상해볼까요?
거실에서 가족 회의를 할 때, 누군가 "여기서 결정권을 가진 사람이 누구예요?"라고 물으면 "우리 가족 전체예요"라고 답할 수 있겠죠.
마찬가지로 웹 브라우저라는 큰 집에서 전역 공간은 거실과 같고, 여기서 this에게 "주인이 누구예요?"라고 물으면 "window예요"라고 답해줘요.
집 안의 모든 물건들이 우리 가족 소유인 것처럼, 전역에서 만든 모든 변수들도 window의 소유가 돼요. 그래서 window.우리집TV나 this.우리집TV라고 부를 수 있는 거예요.
더 신기한 건, 거실에 새로 들여놓은 물건은 자동으로 우리 가족 공동 소유가 되는 것처럼, 전역에서 var로 만든 변수들도 자동으로 window의 소유물이 된다는 거예요!
🎯 왜 this를 배워야 할까요?
this라는 키워드를 왜 배워야 할까요?
첫 번째는 자기 위치 파악하기가 가능해져요. 프로그래밍을 하다 보면 코드가 지금 어디서 실행되고 있는지 헷갈릴 때가 있어요. this는 현재 위치를 정확히 알려줘요.
두 번째는 전역 변수에 새로운 방법으로 접근할 수 있어요. 전역에서 만든 변수들을 this를 통해 접근하는 방법을 익히면, 나중에 더 복잡한 상황에서도 변수를 능숙하게 다룰 수 있게 돼요.
세 번째는 앞으로 배울 내용의 기초가 되기 때문이에요. this는 앞으로 배울 객체와 함수의 핵심 개념이거든요. 지금 전역에서의 this를 확실히 이해해두면, 나중에 객체 안에서나 함수 안에서 this가 어떻게 변하는지 쉽게 이해할 수 있어요.
마지막으로 프로그래밍을 더 재미있게 만들어줘요. 마치 탐정이 되어서 "지금 누가 주인인지" 찾아내는 것 같은 재미가 있거든요!
⚙️ this 사용법 배우기
this를 사용하는 방법은 생각보다 정말 간단해요. 그냥 this라고 쓰기만 하면 돼요!
// 전역에서 this 확인하기
console.log(this);전역 변수와 this의 특별한 관계:
전역에서 var로 만든 변수들은 자동으로 window의 소유물이 되기 때문에, this를 통해서도 접근할 수 있어요.
var myName = "철수";
console.log(this.myName); // "철수"
console.log(window.myName); // "철수" (같은 결과!)🧪 직접 해보면서 배우기
이제 재미있는 예시들을 통해서 this가 전역에서 어떻게 동작하는지 직접 경험해보겠어요.
🔹 첫 번째 예시: this의 정체를 밝혀보기
첫 번째 예시에서는 전역에서 this가 정말로 window를 가리키는지 직접 확인해보겠어요.
console.log("=== this의 정체를 찾는 탐정 게임 ===");
// 전역에서 this가 무엇인지 궁금해요!
console.log("this는 무엇일까요?");
console.log(this);
console.log("\n=== this와 window가 정말 같은 친구인지 확인해보기 ===");
// this와 window가 정말 같은 건지 확인해볼까요?
if (this === window) {
console.log("🎉 맞아요! this와 window는 똑같은 친구예요!");
} else {
console.log("🤔 어? 다른 친구네요?");
}
console.log("비교 결과:", this === window);이 코드를 차근차근 살펴보면, 먼저 탐정 게임처럼 호기심을 담은 메시지를 출력하고, 바로 this가 무엇인지 확인해봐요. 그러면 콘솔에 window 객체의 내용이 쭉 나타날 거예요.
마지막으로 === 연산자를 사용해서 this와 window가 정말 똑같은 객체인지 확인해요. 결과는 true가 나올 거예요!
🔹 두 번째 예시: 전역 변수를 this로 접근하는 현명한 방법
두 번째 예시에서는 전역에서 만든 변수를 this를 통해 접근하는 현명한 방법을 경험해보겠어요.
console.log("=== 현명한 변수 접근 실험 ===");
// 우리가 좋아하는 것들을 변수에 저장해봐요
var favoriteFruit = "딸기";
var favoriteNumber = 7;
var isHappyToday = true;
var petName = "코코";
console.log("좋아하는 것들을 저장했어요!");
console.log("\n=== 일반적인 방법으로 변수 확인하기 ===");
console.log("좋아하는 과일:", favoriteFruit);
console.log("좋아하는 숫자:", favoriteNumber);
console.log("오늘 기분이 좋나요?", isHappyToday);
console.log("\n=== this를 사용해서 같은 변수에 접근하기 ===");
console.log("this로 접근한 과일:", this.favoriteFruit);
console.log("this로 접근한 숫자:", this.favoriteNumber);
console.log("this로 접근한 기분:", this.isHappyToday);
console.log("this로 접근한 애완동물:", this.petName);
console.log("\n=== 정말로 같은 값인지 확인해보기 ===");
console.log("과일이 같나요?", favoriteFruit === this.favoriteFruit);
console.log("숫자가 같나요?", favoriteNumber === this.favoriteNumber);
console.log("우와! 두 방법 모두 같은 값을 보여주네요! 🎊");이 예시를 통해 우리는 놀라운 사실을 발견하게 돼요. 전역에서 var로 만든 변수들이 자동으로 window의 소유물이 되어서, this를 통해서도 접근할 수 있다는 거죠.
마치 우리 집에 새로 산 물건이 자동으로 가족 공동 소유가 되는 것과 같아요.
🔹 세 번째 예시: this를 활용한 간단한 자기소개
세 번째 예시에서는 this를 사용해서 간단한 자기소개 프로그램을 만들어보겠어요.
console.log("=== this를 사용한 자기소개 시간 ===");
// 전역 변수로 내 정보를 만들어봐요
var studentName = "김민지";
var studentAge = 11;
var studentGrade = 5;
var schoolName = "행복초등학교";
var favoriteSubject = "과학";
console.log("내 정보를 모두 저장했어요!");
console.log("\n=== this를 사용해서 자기소개 하기 ===");
console.log("안녕하세요! 제 이름은 " + this.studentName + "입니다! 😊");
console.log("저는 " + this.studentAge + "살이고, " + this.studentGrade + "학년이에요!");
console.log("다니는 학교는 " + this.schoolName + "입니다! 🏫");
console.log("가장 좋아하는 과목은 " + this.favoriteSubject + "예요! 📚");
console.log("\n=== 확인해보기: this 없이도 같은 결과가 나올까요? ===");
console.log("이름 (일반 방법):", studentName);
console.log("이름 (this 방법):", this.studentName);
console.log("둘이 정말 같나요?", studentName === this.studentName);
if (studentName === this.studentName) {
console.log("🎉 완전히 똑같아요! this가 잘 작동하고 있어요!");
} else {
console.log("🤔 어라? 뭔가 다르네요?");
}이 예시를 단계별로 분석해보면, 먼저 학생 정보를 전역 변수로 저장해요. 그다음 this를 사용해서 마치 자기소개를 하듯이 정보를 출력해봐요.
마지막으로 this를 사용한 방법과 일반적인 방법이 같은 결과를 보여주는지 확인하여, 둘이 동일한 변수에 접근하고 있음을 이해하게 돼요.
🧚♀️ 이야기로 다시 배우기: 학교 방송실의 현명한 시스템
지금까지 배운 내용을 하나의 재미있는 이야기로 다시 정리해볼까요?
우리 행복초등학교에는 현명한 방송실이 있었어요. 이 방송실에는 this라는 이름의 위치 확인 시스템이 있었답니다. 이 시스템은 아주 특별한 능력을 가지고 있었는데, 누가 시스템에게 "여기는 어디인가요?"라고 물으면, 그 장소의 관리자를 정확히 알려주는 것이었어요.
학교의 중앙 운동장은 모든 학생들이 자유롭게 드나들 수 있는 가장 큰 공간이었어요. 이곳의 관리자는 window 교장선생님이었죠. 누군가 중앙 운동장에서 위치 확인 시스템에게 물으면, 시스템은 항상 "window 교장선생님이 관리자입니다"라고 답해주었어요.
신기한 점은 중앙 운동장에 놓여진 모든 물건들이 자동으로 window 교장선생님의 관리 하에 들어간다는 것이었어요. 특히 var라는 특별한 표시를 붙여 놓은 물건들은 "교장선생님의 ○○"라고 부를 수도 있고, 위치 확인 시스템을 통해 "시스템아, 교장선생님의 ○○를 찾아줘"라고 말해도 같은 물건을 찾아줄 수 있었답니다.
하지만 let이나 const라는 새로운 표시를 붙인 물건들은 조금 달랐어요. 이 물건들은 운동장에 있지만 교장선생님의 개인 관리 대상이 되지는 않아서, 위치 확인 시스템으로는 찾을 수 없었어요. 오직 물건 이름을 직접 부르는 방법으로만 찾을 수 있었답니다.
이처럼 this는 위치 확인 시스템처럼 항상 현재 위치의 진짜 관리자가 누구인지 정확히 알려주는 현명한 도구였어요!
✏️ 직접 해보기 - 쉬운 연습 문제들
연습문제를 시작하기 전에 잠시 생각해볼까요. 여러분이 큰 도서관에 처음 가서 "여기서 책을 빌리려면 누구한테 가야 하지?"라고 궁금해했던 경험이 있나요? 그때 안내 데스크에서 "이곳은 중앙도서관이고, 사서 선생님이 관리하세요"라고 답해준다면 얼마나 도움이 될까요? this도 그런 친절한 안내원 같은 존재예요.
Ex1) 전역에서 this가 무엇인지 확인하고, window와 같은지 비교해보기
console.log("=== this 탐정 게임 ===");
// 전역에서 this 확인하기
console.log("this는 무엇일까요?", this);
// window와 같은지 비교해보기
if (this === window) {
console.log("🎉 정답! this와 window는 같은 친구예요!");
} else {
console.log("🤔 어라? 다르네요?");
}
console.log("비교 결과:", this === window);Ex2) var로 전역 변수를 만들고, 일반 접근과 this 접근을 비교해보기
console.log("=== 변수 접근 실험 ===");
// 전역 변수 만들기
var petName = "뽀삐";
var petAge = 3;
var petType = "강아지";
console.log("=== 두 가지 방법으로 접근해보기 ===");
console.log("일반 방법 - 이름:", petName);
console.log("this 방법 - 이름:", this.petName);
console.log("일반 방법 - 나이:", petAge);
console.log("this 방법 - 나이:", this.petAge);
console.log("=== 결과가 같은지 확인 ===");
console.log("이름이 같나요?", petName === this.petName);
console.log("나이가 같나요?", petAge === this.petAge);
if (petName === this.petName) {
console.log("🎊 똑같아요! this가 잘 작동해요!");
}Ex3) var, let, const로 각각 변수를 만들고, this로 접근했을 때의 차이 확인하기
console.log("=== 변수 종류별 this 접근 실험 ===");
// 세 가지 방법으로 변수 만들기
var varTest = "var로 만든 친구";
let letTest = "let으로 만든 친구";
const constTest = "const로 만든 친구";
console.log("=== this로 접근 시도해보기 ===");
console.log("var 친구:", this.varTest);
console.log("let 친구:", this.letTest);
console.log("const 친구:", this.constTest);
console.log("=== 결과 분석 ===");
if (this.varTest !== undefined) {
console.log("✅ var 친구는 this로 찾을 수 있어요!");
} else {
console.log("❌ var 친구를 this로 찾을 수 없어요.");
}
if (this.letTest === undefined) {
console.log("⚠️ let 친구는 this로 찾을 수 없어요.");
} else {
console.log("✅ let 친구를 this로 찾을 수 있어요!");
}
console.log("오직 var로 만든 친구만 this로 찾을 수 있어요!");🤔 조금 더 어려운 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 this에 대한 이해를 확인해볼게요.
Q1. 다음 코드의 결과를 예상하고, 그 이유를 설명해보세요.
var schoolName = "행복초등학교";
var grade = 5;
console.log("1번:", this.schoolName);
console.log("2번:", window.schoolName);
console.log("3번:", schoolName);정답: 모두 "행복초등학교"가 출력돼요.
해설: 전역에서 var로 선언한 변수는 자동으로 window 객체의 소유물이 돼요. 그리고 전역에서 this는 window를 가리키므로, this.schoolName, window.schoolName, 그리고 schoolName 모두 같은 값을 가리키게 돼요.
Q2. 다음 중 undefined가 출력되는 것은 무엇일까요?
var name1 = "철수";
let name2 = "영희";
const name3 = "민수";
console.log("A:", this.name1);
console.log("B:", this.name2);
console.log("C:", this.name3); 정답: B와 C가 undefined를 출력해요.
해설: let과 const로 선언한 변수는 window 객체의 소유물이 되지 않기 때문에 this로 접근할 수 없어요. 오직 var로 선언한 변수만 전역 객체의 소유물이 되어서 this를 통해 접근할 수 있답니다!
🧠 자주 하는 실수와 주의할 점
this를 처음 배울 때 흔히 하는 실수들을 미리 알아두면 더 안전하게 코딩할 수 있어요.
❌ 실수 1: this를 일반 변수처럼 생각하기
console.log("=== 잘못된 사용법 ===");
// ❌ 이렇게 하면 안 돼요!
// this = "내가 원하는 값"; // 에러 발생!
console.log("this는 우리가 직접 바꿀 수 없는 특별한 친구예요!");
console.log("현재 this:", this);이런 실수가 발생하는 이유는 this가 우리가 직접 값을 정해줄 수 있는 일반 변수가 아니기 때문이에요. this는 자바스크립트 엔진이 자동으로 설정해주는 특별한 키워드예요.
마치 거울에 비친 모습을 손으로 바꿀 수 없는 것처럼, this의 값도 우리가 임의로 바꿀 수 없어요.
❌ 실수 2: 모든 전역 변수가 this로 접근된다고 생각하기
console.log("=== 변수 종류별 this 접근 테스트 ===");
var varVariable = "var로 만든 변수";
let letVariable = "let으로 만든 변수";
const constVariable = "const로 만든 변수";
console.log("=== this로 접근 시도해보기 ===");
console.log("var 변수:", this.varVariable);
console.log("let 변수:", this.letVariable);
console.log("const 변수:", this.constVariable);
console.log("=== 일반 방법으로 접근하기 ===");
console.log("var 변수:", varVariable);
console.log("let 변수:", letVariable);
console.log("const 변수:", constVariable);
console.log("var만 this로 접근할 수 있어요!");이 문제가 생기는 이유는 let과 const로 만든 변수들은 window 객체의 소유물이 되지 않기 때문이에요. 오직 var로 만든 변수만 window의 소유물이 되어서 this로 접근할 수 있어요.
이는 최근 자바스크립트에서 변수의 안전성을 높이기 위해 만들어진 규칙이에요.
❌ 실수 3: this가 어디서나 window라고 생각하기
console.log("=== 전역에서의 this ===");
console.log("전역에서 this:", this === window); // true
// 하지만 다른 곳에서는 다를 수 있어요
function sayHello() {
console.log("함수 안에서 this:", this); // 상황에 따라 다를 수 있어요
}
let person = {
name: "영희",
greet: function() {
console.log("객체 안에서 this:", this === person); // true (객체가 주인이 돼요)
}
};
console.log("this는 상황에 따라 다른 주인을 가리켜요!");
console.log("지금은 전역이라서 window를 가리키지만,");
console.log("나중에 다른 곳에서는 다른 주인을 가리킬 거예요!");이 착각이 생기는 이유는 this가 코드가 실행되는 위치와 방법에 따라 달라지는 카멜레온 같은 특성을 가지고 있기 때문이에요. 전역에서만 window를 가리키고, 다른 곳에서는 그 상황의 주인을 가리켜요.
📝 8단원 복습 문제 - 객체를 잊지 말아요!
9단원을 배우는 여러분이 8단원 내용을 잊지 않도록 복습 문제를 준비했어요!
복습 문제 1: 객체 메서드 정의하고 호출하기
// 애완동물 정보 객체
let pet = {
name: "뽀삐",
age: 3,
type: "강아지",
// 메서드: 자기소개하기
introduce: function() {
console.log("안녕하세요! 저는 " + this.name + "이고, " + this.age + "살 " + this.type + "입니다!");
},
// 메서드: 생일축하하기
birthday: function() {
this.age = this.age + 1;
console.log(this.name + "의 생일이에요! 이제 " + this.age + "살이 되었어요! 🎂");
}
};
// 메서드 호출하기
pet.introduce();
pet.birthday();
pet.introduce(); 해설: 객체 안에 정의된 함수를 메서드라고 해요. 메서드는 객체명.메서드명() 형태로 호출하며, 메서드 안에서 this를 사용하면 그 객체 자신을 가리켜요!
복습 문제 2: 객체 구조 분해 할당으로 속성 가져오기
// 책 정보 객체
let book = {
title: "어린왕자",
author: "생텍쥐페리",
pages: 150,
category: "소설",
isAvailable: true
};
// 구조 분해 할당으로 필요한 속성만 가져오기
let {title, author, pages} = book;
console.log("책 제목:", title);
console.log("저자:", author);
console.log("페이지:", pages);
// 별명과 기본값을 함께 사용하기
let {category: 분류, isAvailable: 대출가능 = false} = book;
console.log("분류:", 분류);
console.log("대출 가능:", 대출가능); 해설: 구조 분해 할당은 객체의 속성들을 한 번에 여러 변수로 만드는 편리한 방법이에요. {속성명1, 속성명2} = 객체 형태로 사용하고, 콜론(:)으로 별명을, 등호(=)로 기본값을 설정할 수 있어요!
지금까지 전역에서의 this에 대해 자세히 알아보았어요. this는 처음에는 조금 어려울 수 있지만, 지금처럼 전역에서의 기본 동작을 확실히 이해해두면 앞으로 더 복잡한 상황에서도 쉽게 이해할 수 있을 거예요! 🎉✨
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| this의 기본 개념 | ✅ |
| 전역에서 this와 window의 관계 | ✅ |
| var 변수와 this 접근 | ✅ |
| let/const와 this의 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 8단원 객체 복습 | ✅ |
🔄 this 사용하는 순서 정리하기
지금까지 배운 전역에서의 this 사용 과정을 차근차근 정리해볼게요.
첫 번째 단계는 위치 확인하기예요. 코드가 전역에서 실행되고 있는지 확인하는 거죠. 전역이란 함수나 객체 안이 아닌, 가장 바깥쪽 큰 공간을 말해요.
두 번째 단계는 this 사용하기예요. 전역에서 this를 사용하면 자동으로 window 객체를 가리키게 돼요. 이는 자바스크립트의 기본 규칙이에요.
세 번째 단계는 변수 접근하기예요. var로 만든 전역 변수들은 this.변수명 형태로 접근할 수 있어요. 하지만 let이나 const로 만든 변수는 접근할 수 없다는 점을 기억해야 해요.
마지막 단계는 특징 이해하기예요. 전역에서는 this === window가 항상 참이며, 이 특성을 활용해서 코드의 실행 위치를 파악할 수 있어요.
📂 마무리 정보
오늘 배운 9.1.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'9. this와 친해지기 (this 바인딩) > 9.1 this가 뭘까요?' 카테고리의 다른 글
| 9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템 (0) | 2025.07.12 |
|---|---|
| 9.1.2 객체에서의 this - 진짜 주인을 찾아라! (0) | 2025.07.11 |