📘 9.1.2 객체에서의 this - 진짜 주인을 찾아라!
어떤 날 아침, 여러분이 거울 앞에 서서 "나는 누구지?"라고 물어본 적이 있나요? 거울 속의 모습을 보며 "아, 이게 바로 나구나"라고 깨닫는 순간 말이에요.
프로그래밍 세계에서도 비슷한 일이 일어나요. 이전 시간에 전역에서의 this가 window를 가리킨다는 것을 배웠죠? 이제 우리는 더욱 흥미로운 여행을 떠날 예정입니다. 바로 객체 안에서의 this 모험이에요.
객체 안에서 this는 전역에서와는 완전히 다른 모습을 보여줍니다. 마치 카멜레온처럼 환경에 따라 변신하는 this의 신비로운 특성을 함께 탐험해보겠어요.
🧠 먼저 용어를 알아볼까요?
객체 안에서의 this 여행을 시작하기 전에, 새로운 친구들과 먼저 인사를 나눠보겠어요.
| 용어 | 의미 |
|---|---|
| 객체에서의 this | 객체의 메서드가 실행될 때 그 메서드를 소유한 객체 자신을 가리키는 특별한 키워드입니다. |
| 메서드 | 객체 안에 들어있는 함수로, 그 객체만의 특별한 기능을 담당합니다. |
| 호출 (call) | 함수나 메서드를 실제로 실행시키는 행위를 말합니다. |
메서드는 "방법"이라는 뜻의 영어 단어에서 나왔어요. 객체가 어떤 일을 하는 "방법"을 담고 있는 함수라고 생각하면 쉬울 거예요. 그리고 이 메서드 안에서 this는 마치 "나"라고 말하는 것처럼 자기 자신(그 객체)을 가리킵니다.
✨ 객체에서 this의 핵심 개념
객체 안에서 this는 정말 특별한 역할을 합니다. 전역에서는 항상 window만 가리켰던 this가, 객체 안에서는 그 객체 자신을 가리키게 되는 거예요. 이는 마치 사람이 자기소개를 할 때 "저는", "제가"라고 말하는 것과 똑같습니다.
객체의 메서드에서 this를 사용하면, 그 메서드를 소유하고 있는 객체의 다른 속성들에 자유롭게 접근할 수 있어요. this.이름, this.나이처럼 말이죠. 또한 같은 객체 안의 다른 메서드도 this.메서드이름()으로 호출할 수 있습니다.
가장 중요한 점은 this가 메서드를 호출하는 방법에 따라 달라진다는 것입니다. 객체이름.메서드()로 호출하면 this는 그 객체를 가리키지만, 다른 방식으로 호출하면 달라질 수 있어요. 이것이 바로 this의 동적인 특성입니다.
비유로 이해하기: 똑똑한 로봇 친구
객체에서의 this를 더 쉽게 이해하기 위해 '똑똑한 로봇 친구' 이야기를 들려드릴까요?
여러분에게 '철수 로봇'이라는 특별한 친구가 있다고 상상해보세요. 이 로봇은 자신만의 이름, 나이, 좋아하는 음식 같은 정보를 기억하고 있어요. 그리고 "자기소개하기", "좋아하는 음식 말하기" 같은 여러 기능들도 가지고 있죠.
철수 로봇이 자기소개를 할 때, "안녕하세요! 제 이름은 철수이고, 제 나이는 10살입니다"라고 말합니다. 여기서 "제"라는 말은 바로 철수 로봇 자신을 가리키는 거예요.
프로그래밍에서도 마찬가지예요. 객체 안의 메서드에서 this를 사용하면, 그 메서드를 가지고 있는 객체가 "제가", "저는"이라고 자기 자신을 가리키는 것과 같아요.
다른 로봇들도 각각 자신만의 "제가"를 가지고 있어서, 영희 로봇은 영희 로봇만의 정보를, 민수 로봇은 민수 로봇만의 정보를 "제가"라고 표현할 수 있답니다.
🎯 객체에서 this를 사용하는 이유
객체 안에서 this를 사용하는 이유는 여러 가지가 있어요.
첫째로, 자신의 속성에 쉽게 접근할 수 있습니다. 객체 안에서 자신의 이름이나 나이 같은 정보를 사용하고 싶을 때, this.이름이나 this.나이처럼 간단하게 접근할 수 있어요. 마치 "내 이름", "내 나이"라고 말하는 것과 같죠.
둘째로, 코드의 재사용성이 높아집니다. 같은 구조를 가진 여러 객체를 만들 때, 각각의 객체가 자신만의 데이터를 가지고 같은 메서드를 사용할 수 있어요. 마치 같은 설계도로 만든 여러 로봇들이 각각 자신만의 정보를 가지고 같은 기능을 수행하는 것과 같습니다.
셋째로, 객체 내부의 협력이 가능해집니다. 한 메서드에서 같은 객체의 다른 메서드를 호출할 수 있어서, 복잡한 작업을 여러 단계로 나누어 처리할 수 있어요.
⚙️ 기본 문법 살펴보기
객체에서 this를 사용하는 기본 문법은 다음과 같아요.
let 객체이름 = {
속성: "값",
메서드: function() {
console.log(this.속성); // 이 객체의 속성에 접근
}
};
객체이름.메서드(); // 메서드 호출핵심 포인트:
메서드 안에서 this는 점(.) 앞에 있는 객체를 가리킵니다. 객체이름.메서드()로 호출했다면, this는 객체이름을 가리키게 되는 거예요.
🧪 예제로 익혀보기
이제 실제 예제를 통해 객체에서 this가 어떻게 동작하는지 차근차근 알아보겠어요.
🔹 예제 1: 로봇 친구의 자기소개
첫 번째 예제에서는 로봇 친구가 this를 사용해서 자기소개를 하는 모습을 만들어보겠어요.
// 똑똑한 로봇 친구 만들기
let robot = {
name: "철수봇",
age: 3,
color: "파란색",
// 자기소개 메서드
introduce: function() {
console.log("안녕하세요! 저는 " + this.name + "입니다.");
console.log("저는 " + this.age + "살이고, " + this.color + " 로봇이에요.");
}
};
// 로봇 친구에게 자기소개를 부탁해봐요
robot.introduce(); 이 코드를 단계별로 살펴보면, 먼저 robot이라는 객체를 만들고 이름, 나이, 색깔 정보를 넣어줘요. 그다음 introduce라는 메서드를 만드는데, 여기서 this.name, this.age, this.color를 사용해서 자신의 정보에 접근합니다.
마지막으로 robot.introduce()를 호출하면, 메서드 안의 this는 robot 객체를 가리키게 되어 로봇의 정보가 출력돼요.
🔹 예제 2: 성장하는 카운터
두 번째 예제에서는 this를 사용해서 객체의 속성 값을 변경하는 방법을 알아보겠어요.
// 숫자를 세는 카운터 만들기
let counter = {
count: 0,
// 숫자 증가 메서드
increase: function() {
this.count = this.count + 1;
console.log("현재 숫자: " + this.count);
},
// 숫자 감소 메서드
decrease: function() {
this.count = this.count - 1;
console.log("현재 숫자: " + this.count);
}
};
// 카운터 사용해보기
console.log("카운터 게임을 시작해볼까요?");
counter.increase();
counter.increase();
counter.decrease();
console.log("최종 숫자:", counter.count); 이 예제에서는 counter 객체가 자신의 count 속성을 관리하는 모습을 볼 수 있어요. increase 메서드에서 this.count를 사용해서 자신의 숫자를 증가시키고, decrease 메서드에서는 감소시킵니다.
각 메서드가 실행될 때마다 this는 counter 객체를 가리키므로, 같은 객체의 count 속성을 수정할 수 있어요.
🔹 예제 3: 팀워크하는 계산기
세 번째 예제에서는 한 객체의 메서드가 같은 객체의 다른 메서드를 호출하는 팀워크를 보여드리겠어요.
// 협력하는 계산기 만들기
let calculator = {
result: 0,
// 더하기 메서드
add: function(number) {
this.result = this.result + number;
console.log(number + "를 더했습니다.");
},
// 결과 보여주기 메서드
showResult: function() {
console.log("계산 결과: " + this.result);
},
// 더하기와 결과 보여주기를 한 번에 하는 메서드
addAndShow: function(number) {
console.log("=== 계산을 시작합니다 ===");
this.add(number);
this.showResult();
console.log("=== 계산 완료! ===");
}
};
// 계산기 사용해보기
calculator.addAndShow(5);
calculator.addAndShow(3); 이 예제에서 가장 흥미로운 부분은 addAndShow 메서드예요. 이 메서드는 this.add(number)와 this.showResult()를 호출해서 같은 객체의 다른 메서드들과 협력합니다.
여기서 this는 calculator 객체를 가리키므로, 같은 객체의 메서드들을 자유롭게 사용할 수 있어요.
🧚♀️ 이야기로 다시 배우기: 학교의 현명한 학생증 시스템
지금까지 배운 내용을 재미있는 이야기로 다시 정리해볼까요?
우리 행복초등학교에서는 현명한 학생증 시스템을 사용하고 있었어요. 이 시스템에는 this라는 특별한 기능이 있었답니다.
각 학생은 자신만의 개인 학생증을 가지고 있었어요. 철수의 학생증에는 철수의 이름, 나이, 반 정보가 들어있고, 영희의 학생증에는 영희만의 정보가 들어있었죠.
신기한 점은 각 학생증에 "자기소개하기" 버튼이 있었다는 거예요. 철수가 자신의 학생증에서 이 버튼을 누르면, 학생증은 "안녕하세요! 제 이름은 철수이고, 제 반은 5학년 3반입니다"라고 말했어요. 영희가 자신의 학생증에서 같은 버튼을 누르면, "안녕하세요! 제 이름은 영희이고, 제 반은 5학년 2반입니다"라고 말했고요.
각 학생증의 "제"라는 말은 그 학생증의 주인을 가리키는 거였어요. 철수의 학생증에서 "제"는 철수를, 영희의 학생증에서 "제"는 영희를 의미했죠.
더 놀라운 건, 각 학생증에는 "출석체크하기", "점수기록하기" 같은 여러 버튼들이 있었는데, 이 버튼들이 서로 협력할 수 있었다는 거예요. "성적표 만들기" 버튼을 누르면 자동으로 "점수기록하기" 버튼과 "출석체크하기" 버튼이 함께 작동해서 그 학생만의 성적표를 만들어주었답니다.
우리가 배운 this도 이런 현명한 학생증 시스템과 똑같아요! 각 객체가 자신만의 정보를 가지고, this를 통해 "제가", "저는"이라고 자기 자신을 정확히 가리킬 수 있는 거죠!
✏️ 연습문제로 개념 다지기
연습문제를 시작하기 전에 잠시 생각해볼까요. 여러분이 친구에게 자기소개를 할 때를 떠올려보세요. "안녕, 나는 철수야. 나는 축구를 좋아해"라고 말할 때, 그 "나는"이라는 말이 누구를 가리키는지는 너무나 명확하죠. 바로 말하고 있는 사람 자신을 가리키니까요. 객체에서 this도 그런 역할을 해요.
Ex1) 펫샵의 강아지 객체를 만들고, 자기소개 메서드를 작성해보자
// 강아지 객체 만들기
let puppy = {
name: "뽀삐",
age: 2,
breed: "골든리트리버",
// 자기소개 메서드
introduce: function() {
console.log("멍멍! 제 이름은 " + this.name + "이고,");
console.log(this.age + "살 " + this.breed + "입니다!");
}
};
// 강아지의 자기소개 들어보기
puppy.introduce(); Ex2) 점수를 관리하는 게임 객체를 만들어보자. 점수 추가, 감소, 현재 점수 보여주기 기능이 있어야 해요
// 점수 관리 게임 객체
let game = {
score: 0,
// 점수 추가 메서드
addScore: function(points) {
this.score = this.score + points;
console.log(points + "점 추가! 현재 점수: " + this.score);
},
// 점수 감소 메서드
loseScore: function(points) {
this.score = this.score - points;
console.log(points + "점 감소. 현재 점수: " + this.score);
},
// 현재 점수 확인 메서드
showScore: function() {
console.log("현재 총 점수: " + this.score + "점");
}
};
// 게임 플레이해보기
game.addScore(10);
game.addScore(5);
game.loseScore(3);
game.showScore(); Ex3) 간단한 은행 계좌 객체를 만들어보자. 입금, 출금, 잔액 확인 기능이 모두 협력하는 통합 메서드도 포함해야 해요
// 은행 계좌 객체
let account = {
balance: 1000,
// 입금 메서드
deposit: function(amount) {
this.balance = this.balance + amount;
console.log(amount + "원 입금 완료");
},
// 출금 메서드
withdraw: function(amount) {
this.balance = this.balance - amount;
console.log(amount + "원 출금 완료");
},
// 잔액 확인 메서드
checkBalance: function() {
console.log("현재 잔액: " + this.balance + "원");
},
// 거래 후 잔액 확인 (메서드들의 협력)
transactionWithCheck: function(type, amount) {
console.log("=== 거래 시작 ===");
if (type === "입금") {
this.deposit(amount);
} else if (type === "출금") {
this.withdraw(amount);
}
this.checkBalance();
console.log("=== 거래 완료 ===");
}
};
// 은행 거래해보기
account.transactionWithCheck("입금", 500);
account.transactionWithCheck("출금", 200); 🤔 심화 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 객체에서의 this에 대한 이해를 확인해보겠어요.
Q1. 다음 코드의 결과를 예상하고, 그 이유를 설명해보세요.
let car = {
brand: "현대",
model: "소나타",
start: function() {
console.log(this.brand + " " + this.model + "이 출발합니다.");
}
};
car.start();정답: "현대 소나타이 출발합니다."가 출력됩니다.
해설: car.start()로 메서드를 호출했기 때문에, start 메서드 안의 this는 car 객체를 가리킵니다. 따라서 this.brand는 "현대"가 되고, this.model은 "소나타"가 되어 위와 같은 결과가 출력됩니다.
Q2. 다음 중 올바르게 작동하지 않는 코드는 무엇이고, 그 이유는 무엇일까요?
// A번
let person = {
name: "철수",
age: 12,
introduce: function() {
console.log("저는 " + this.name + "이고 " + this.age + "살입니다.");
}
};
// B번
let person = {
name: "철수",
age: 12,
introduce: function() {
console.log("저는 " + name + "이고 " + age + "살입니다.");
}
};정답: B번이 올바르게 작동하지 않습니다.
해설: B번에서는 this가 빠져있어서 객체의 속성이 아닌 전역 변수 name과 age를 찾으려고 합니다. 하지만 이런 전역 변수가 없다면 undefined가 출력되거나 에러가 발생할 수 있어요.
객체 안에서 자신의 속성에 접근할 때는 반드시 this.속성이름 형태를 사용해야 합니다.
🧠 자주 하는 실수와 주의할 점
객체에서 this를 사용할 때 자주 하는 실수들을 미리 알아두면 더 안전하게 코딩할 수 있어요.
❌ 실수 1: this 없이 객체 속성에 접근하려고 하기
let student = {
name: "철수",
grade: 4,
introduce: function() {
console.log("안녕하세요! 저는 " + name + "입니다."); // 에러!
}
};이런 실수가 발생하는 이유는 객체 안에서 속성에 접근할 때는 반드시 this.속성이름 형태를 사용해야 하기 때문이에요. 그냥 name만 쓰면 자바스크립트는 전역 변수 name을 찾으려고 하다가 없으면 에러를 발생시키거나 undefined를 반환해요.
객체의 속성은 this라는 열쇠가 있어야 접근할 수 있는 특별한 상자라고 생각하면 돼요.
❌ 실수 2: 메서드를 변수에 저장해서 호출하기
let person = {
name: "민지",
sayHello: function() {
console.log("안녕하세요, " + this.name + "입니다.");
}
};
let greet = person.sayHello;
greet(); // "안녕하세요, undefined입니다."이 문제가 생기는 이유는 메서드를 변수에 저장하면 객체와의 연결이 끊어지기 때문이에요. person.sayHello()로 호출할 때는 this가 person을 가리키지만, greet()로 호출하면 this가 전역 객체(window)를 가리키게 되어요.
마치 편지를 봉투에서 꺼내면 발신자 정보를 잃어버리는 것과 같아요.
❌ 실수 3: 화살표 함수를 메서드로 사용하기
let person = {
name: "지수",
introduce: () => {
console.log("저는 " + this.name + "입니다."); // this가 window가 됨
}
};이 문제가 발생하는 이유는 화살표 함수가 this를 다르게 처리하기 때문이에요. 화살표 함수는 자신만의 this를 가지지 않고, 함수가 정의된 곳의 this를 그대로 사용해요.
객체의 메서드로는 일반 함수를 사용해야 this가 올바르게 객체를 가리켜요.
📝 8단원 복습 문제 - 객체를 잊지 말아요!
9단원을 배우는 여러분이 8단원 내용을 잊지 않도록 복습 문제를 준비했어요!
복습 문제 1: 객체 속성 동적으로 추가하고 삭제하기
// 학생 정보 객체
let student = {
name: "철수",
age: 12,
grade: 5
};
console.log("초기 학생 정보:", student);
// 새로운 속성 동적으로 추가하기
student.hobby = "축구";
student["favoriteSubject"] = "과학";
console.log("속성 추가 후:", student);
// 객체의 속성 삭제하기
delete student.age;
console.log("age 삭제 후:", student);
// 속성 존재 여부 확인하기
console.log("name 속성이 있나요?", "name" in student);
console.log("age 속성이 있나요?", "age" in student); 해설: 객체는 생성 후에도 점 표기법이나 대괄호 표기법으로 새 속성을 추가할 수 있어요. delete 연산자로 속성을 삭제하고, in 연산자로 속성 존재 여부를 확인할 수 있어요!
복습 문제 2: 중첩된 객체와 배열 다루기
// 복잡한 학급 정보 객체
let classroom = {
grade: 5,
section: "A",
students: ["철수", "영희", "민수"],
teacher: {
name: "김선생님",
subject: "수학",
experience: 10
}
};
console.log("학급 정보:");
console.log("학년:", classroom.grade + "학년 " + classroom.section + "반");
// 중첩된 배열에 접근하기
console.log("첫 번째 학생:", classroom.students[0]);
classroom.students.push("지수");
console.log("학생 명단:", classroom.students);
// 중첩된 객체에 접근하기
console.log("담임선생님:", classroom.teacher.name);
console.log("과목:", classroom.teacher.subject);
classroom.teacher.age = 35;
console.log("선생님 나이:", classroom.teacher.age);해설: 객체 안에 배열이나 다른 객체가 들어있을 수 있어요. 중첩된 구조에 접근할 때는 점 표기법을 연속으로 사용하거나 대괄호를 조합해서 사용할 수 있어요!
지금까지 객체에서의 this에 대해 자세히 알아보았어요. this가 전역에서는 window를 가리키지만, 객체 안에서는 그 객체 자신을 가리킨다는 것을 이해하셨나요?
이 개념을 확실히 익혀두면 앞으로 더 복잡한 자바스크립트 코드를 작성할 때 큰 도움이 될 거예요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 객체에서 this의 기본 개념 | ✅ |
| 메서드에서 this 사용법 | ✅ |
| this로 속성과 메서드 접근 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 8단원 객체 복습 | ✅ |
🔄 객체에서 this 사용 과정 정리
지금까지 배운 객체에서의 this 사용 과정을 자연스럽게 정리해보겠어요.
첫 번째 단계는 객체와 메서드 정의예요. 객체 안에 속성들과 메서드를 만들고, 메서드 안에서 this를 사용해서 자신의 속성이나 다른 메서드에 접근하도록 작성합니다.
두 번째는 메서드 호출 단계예요. 객체이름.메서드이름() 형태로 메서드를 호출하면, 점(.) 앞의 객체가 메서드의 주인이 돼요.
세 번째는 this 결정 단계예요. 메서드가 실행되는 순간, 메서드 안의 this는 그 메서드를 호출한 객체를 가리키게 됩니다.
마지막으로 작업 수행 단계예요. this.속성이름으로 객체의 속성에 접근하거나, this.메서드이름()으로 같은 객체의 다른 메서드를 호출하여 원하는 작업을 수행해요.
📂 마무리 정보
오늘 배운 9.1.2 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'9. this와 친해지기 (this 바인딩) > 9.1 this가 뭘까요?' 카테고리의 다른 글
| 9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템 (0) | 2025.07.12 |
|---|---|
| 9.1.1 전역에서의 this - 코딩 세계의 '나'를 찾아서 (0) | 2025.07.11 |