📘 8.1.2 속성 접근하고 삭제하기 - 정보 상자 속 데이터 다루기
어느 조용한 저녁, 오래된 보석함을 열어보는 순간을 상상해보세요. 보석함 안에는 목걸이, 반지, 귀걸이가 각각의 작은 칸에 정리되어 있어요. 우리는 그 중에서 오늘 입을 옷에 어울리는 반지 하나를 조심스럽게 꺼내고, 더 이상 착용하지 않는 낡은 목걸이는 정리해서 다른 곳으로 옮겨놓죠.
지난 시간에 우리는 객체라는 신비로운 정보 저장소를 만드는 방법을 배웠어요. 저장소 안에 이름, 나이, 색깔 같은 여러 가지 정보들을 정성스럽게 넣어두었죠. 오늘은 그 정보 저장소에서 데이터를 꺼내고, 새로운 데이터를 넣고, 필요 없는 데이터는 정리하는 방법을 배워볼 거예요.
🧠 새로운 용어들과 친해지기
새로운 개념과 만날 때마다 그 개념이 품고 있는 단어들을 천천히 이해하는 것이 중요해요. 마치 새로운 친구의 이름을 기억하려고 노력하는 것처럼요.
| 용어 | 쉬운 설명 |
|---|---|
| 속성 접근 | 객체에서 원하는 정보를 찾아서 가져오는 것이에요 |
| 점 표기법 | 점(.)을 사용해서 정보를 찾는 간단한 방법이에요 |
| 대괄호 표기법 | 대괄호[]를 사용해서 정보를 찾는 특별한 방법이에요 |
| 속성 삭제 | 객체에서 필요 없는 정보를 완전히 제거하는 것이에요 |
| delete 연산자 | 정보를 삭제할 때 사용하는 자바스크립트의 특별한 명령어예요 |
이 용어들은 마치 정보 저장소를 관리하는 섬세한 도구들 같아요. 각각이 언제 어떻게 사용되는지 알아보면 정말 유용하답니다.
✨ 속성 접근이 뭔지 알아보기
객체에서 속성에 접근하는 것은 잘 정리된 서랍장에서 원하는 물건을 찾는 것과 정말 비슷해요. 이 특별한 서랍장에는 두 가지 다른 방법으로 물건을 꺼낼 수 있는 시스템이 있어요.
첫 번째 방법은 점 표기법이에요. 이건 서랍장 앞면에 있는 간단한 버튼을 누르는 것과 같아요. "서랍장아, 이름이라는 정보를 꺼내줘!"라고 말하면서 서랍장.이름 버튼을 누르면 되는 거죠. 이 방법은 정말 간단하고 직관적이에요.
두 번째 방법은 대괄호 표기법이에요. 이건 서랍장 옆면에 있는 특별한 입력창을 사용하는 거예요. 서랍장["이름"]처럼 대괄호 안에 따옴표로 정보 이름을 정확히 입력해주는 방법이에요. 이 방법은 특별한 상황에서 놀라운 능력을 발휘해요.
그리고 delete라는 정리 기능도 있어요. 필요 없어진 정보를 마치 봄맞이 대청소를 하듯 완전히 서랍장에서 제거할 수 있는 강력한 도구랍니다.
재미있는 이야기: 우리 방의 스마트 정리함
우리가 다루는 객체를 우리 방의 스마트 정리함이라고 생각해보세요.
정리함 앞면에는 터치스크린이 있어요. "학용품", "장난감", "책" 같은 버튼이 있고, 살짝 터치하면 해당하는 물건들이 부드럽게 나와요. 이게 바로 점 표기법이에요. 간단한 터치 한 번으로 원하는 걸 자연스럽게 꺼낼 수 있어요.
정리함 옆면에는 음성 인식 입력창이 있어요. 여기서는 물건 이름을 정확히 말해야 해요. "색연필 48색 세트"처럼 복잡한 이름도 정확히 발음하면 찾아줘요. 이게 바로 대괄호 표기법이에요. 좀 더 정확하지만, 특별한 상황에서 정말 유용해요.
그리고 정리함에는 자동 정리 기능도 있어요. "이 물건은 이제 필요 없어!"라고 delete 명령을 말하면, 정리함이 그 물건을 조용히 다른 곳으로 정리해버려요. 마치 그 물건이 처음부터 없었던 것처럼요.
정리함은 언제든지 새로운 물건을 추가할 수도 있어요. "새 만화책"이라는 칸을 만들어서 새로 산 만화책을 소중히 넣을 수 있거든요.
🎯 왜 속성 접근을 배워야 할까요?
이런 여러 가지 방법들을 배우는 이유를 생각해보면, 우리의 일상과 참 많이 닮아있어요.
첫 번째는 정보를 효율적으로 사용하기 위해서예요. 객체에 저장된 많은 정보들 중에서 지금 필요한 것만 골라서 사용할 수 있어요. 마치 큰 가방에서 지금 당장 필요한 물건만 꺼내서 쓰는 것처럼요.
두 번째는 유연하게 정보를 다루기 위해서예요. 사용자가 어떤 정보를 원하는지에 따라 다른 속성을 보여줄 수 있어요. 예를 들어, 친구가 "이름 알려줘"라고 하면 이름을, "나이 알려줘"라고 하면 나이를 자연스럽게 보여줄 수 있죠.
세 번째는 메모리를 깔끔하게 관리하기 위해서예요. delete 연산자를 사용하면 더 이상 필요 없는 정보를 완전히 제거해서 컴퓨터의 기억 공간을 정리할 수 있어요.
마지막으로 프로그램을 더 지능적으로 만들 수 있어요. 상황에 따라 필요한 정보만 꺼내서 사용하거나, 새로운 정보를 추가하거나, 오래된 정보를 정리할 수 있어서 정말 유용해요.
⚙️ 기본 사용법 살펴보기
이제 실제로 어떻게 사용하는지 천천히 배워보겠어요.
정보 꺼내기 (읽기):
let 정보 = 객체.속성이름; // 점으로 간단하게 꺼내기
let 정보 = 객체["속성이름"]; // 대괄호로 정확하게 꺼내기정보 넣기 (쓰기/바꾸기):
객체.속성이름 = 새로운값; // 점으로 정보 넣거나 바꾸기
객체["속성이름"] = 새로운값; // 대괄호로 정보 넣거나 바꾸기정보 완전히 삭제하기:
delete 객체.속성이름; // 점으로 정보 삭제하기
delete 객체["속성이름"]; // 대괄호로 정보 삭제하기🧪 실습으로 익혀보기
이제 실제 실습을 통해 이런 방법들이 어떻게 작동하는지 천천히 경험해보겠어요. 각각의 실습은 우리가 실제로 마주할 수 있는 상황들이에요.
🔹 실습 1: 점 표기법으로 친구 정보 관리하기
우리 친구의 정보를 담은 객체를 만들고, 점 표기법으로 정보를 확인하고 업데이트해보겠어요.
실습1) 우리 반 친구 정보를 "점 표기법으로 관리하기"를 해보자
// 우리 반 친구 한 명의 정보를 담은 정보 저장소예요
let myFriend = {
name: "김지우", // 친구 이름
age: 12, // 친구 나이
hobby: "그림그리기", // 친구 취미
favoriteColor: "파란색" // 좋아하는 색깔
};
console.log("=== 내 친구 소개 ===");
console.log("전체 정보:", myFriend);
// 점 표기법으로 친구 정보를 하나씩 꺼내보기
console.log("친구 이름:", myFriend.name); // "김지우"
console.log("친구 나이:", myFriend.age + "살"); // "12살"
console.log("친구 취미:", myFriend.hobby); // "그림그리기"
console.log("좋아하는 색:", myFriend.favoriteColor); // "파란색"
// 시간이 지나서 친구 정보가 바뀌었어요
console.log("\n=== 정보 업데이트 ===");
myFriend.age = 13; // 생일이 지나서 나이가 늘었어요
myFriend.hobby = "책읽기"; // 새로운 취미가 생겼어요
console.log("업데이트된 나이:", myFriend.age + "살");
console.log("새로운 취미:", myFriend.hobby);
console.log("업데이트 후 전체 정보:", myFriend);이 과정을 통해서 점 표기법이 얼마나 간단하고 자연스러운지 알 수 있어요. 마치 "저장소야, 이름 꺼내줘!"라고 부드럽게 말하는 것 같죠?
🔹 실습 2: 대괄호 표기법과 새로운 정보 추가하기
이번에는 우리 애완동물 정보를 관리하면서 대괄호 표기법의 특별한 능력과 새로운 정보를 추가하는 방법을 배워보겠어요.
실습2) 우리 집 애완동물 정보를 "대괄호 표기법으로 관리하기"를 해보자
// 우리 집 귀여운 애완동물 정보예요
let myPet = {
name: "초코", // 애완동물 이름
type: "고양이", // 애완동물 종류
age: 2 // 애완동물 나이
};
console.log("=== 우리 집 애완동물 소개 ===");
console.log("기본 정보:", myPet);
// 대괄호 표기법으로 정보 꺼내보기
console.log("이름:", myPet["name"]); // "초코"
console.log("종류:", myPet["type"]); // "고양이"
console.log("나이:", myPet["age"] + "살"); // "2살"
// 새로운 정보들을 추가해보기
console.log("\n=== 새로운 정보 추가하기 ===");
myPet.color = "갈색"; // 점 표기법으로 털색 추가
myPet["favoriteToy"] = "털실뭉치"; // 대괄호 표기법으로 좋아하는 장난감 추가
myPet["isCute"] = true; // 귀여운지 여부도 추가
console.log("털색:", myPet.color);
console.log("좋아하는 장난감:", myPet["favoriteToy"]);
console.log("귀여운가요?", myPet["isCute"]);
// 사용자가 입력한 정보에 따라 다른 속성 보여주기
let userQuestion = "name"; // 사용자가 "name"에 대해 물어봤다고 가정
console.log("\n=== 사용자 질문에 답하기 ===");
console.log("사용자가 물어본 것:", userQuestion);
console.log("답변:", myPet[userQuestion]); // 대괄호 표기법의 특별한 능력!
console.log("최종 애완동물 정보:", myPet);이 실습을 통해 대괄호 표기법이 변수를 사용할 수 있는 특별한 능력을 가지고 있다는 걸 배웠어요. 정말 놀랍죠?
🔹 실습 3: delete 연산자로 불필요한 정보 정리하기
이번에는 delete 기능을 사용해서 더 이상 필요 없는 정보를 깔끔하게 정리하는 방법을 알아보겠어요.
실습3) 내 게임 정보에서 "불필요한 데이터 삭제하기"를 해보자
// 내가 좋아하는 게임 정보를 담은 저장소예요
let myFavoriteGame = {
title: "마인크래프트", // 게임 제목
genre: "샌드박스", // 게임 장르
rating: 5, // 내 평점 (5점 만점)
platform: "PC", // 게임 플랫폼
tempNote: "나중에삭제할메모", // 임시로 적어둔 메모 (삭제 예정)
testInfo: "테스트정보" // 테스트로 넣어둔 정보 (삭제 예정)
};
console.log("=== 정리하기 전 게임 정보 ===");
console.log("전체 정보:", myFavoriteGame);
// 속성 개수를 간단히 세어보기
let beforeCount = 0;
for (let key in myFavoriteGame) {
beforeCount++;
}
console.log("총 정보 개수:", beforeCount + "개");
// delete 기능으로 불필요한 정보들 삭제하기
console.log("\n=== 정리 작업 시작 ===");
delete myFavoriteGame.tempNote; // 임시 메모 삭제
delete myFavoriteGame["testInfo"]; // 테스트 정보 삭제
console.log("정리 작업 완료!");
console.log("\n=== 정리 후 게임 정보 ===");
console.log("깔끔해진 정보:", myFavoriteGame);
// 정리 후 속성 개수 세어보기
let afterCount = 0;
for (let key in myFavoriteGame) {
afterCount++;
}
console.log("남은 정보 개수:", afterCount + "개");
// 삭제된 정보에 접근해보면 어떻게 될까요?
console.log("\n=== 삭제 확인 ===");
console.log("삭제된 tempNote:", myFavoriteGame.tempNote); // undefined
console.log("삭제된 testInfo:", myFavoriteGame["testInfo"]); // undefined
// 정말로 삭제되었는지 확인하기
if (myFavoriteGame.tempNote === undefined) {
console.log("tempNote가 성공적으로 삭제되었어요!");
}
if (myFavoriteGame.testInfo === undefined) {
console.log("testInfo도 성공적으로 삭제되었어요!");
}
console.log("delete 기능으로 저장소가 깔끔해졌어요!");delete 기능을 사용하면 정말로 그 정보가 완전히 사라져서 undefined가 나와요. 마치 그 정보가 처음부터 없었던 것처럼 조용히 사라지는 거예요.
🧠 자주 하는 실수와 조심할 점
새로운 도구를 배울 때는 자주 하는 실수들을 미리 알아두는 것이 도움이 되어요. 실수는 배움의 일부이지만, 미리 알고 있으면 더 부드럽게 배울 수 있어요.
❌ 실수 1: 없는 속성에 접근하면 에러가 날 거라고 생각하기
// 우리가 만든 책 정보 저장소예요
let myBook = {
title: "해리포터", // 책 제목
pages: 300 // 페이지 수
};
console.log("=== 속성 접근 테스트 ===");
console.log("책 제목:", myBook.title); // "해리포터" (정상)
console.log("페이지 수:", myBook.pages); // 300 (정상)
console.log("책 저자:", myBook.author); // undefined (에러가 아니에요!)
// 올바른 확인 방법들
console.log("\n=== 안전한 확인 방법 ===");
if (myBook.author !== undefined) {
console.log("저자 정보가 있어요:", myBook.author);
} else {
console.log("저자 정보가 없네요!"); // 이게 실행돼요
}
// 더 안전한 방법
if (myBook.author) {
console.log("저자:", myBook.author);
} else {
console.log("저자 정보를 추가해주세요!");
}많은 사람들이 없는 속성에 접근하면 에러가 날 거라고 생각하지만, 실제로는 undefined가 나와요. 이는 "그런 정보가 없어요"라고 알려주는 자바스크립트의 친절한 방식이에요.
❌ 실수 2: 대괄호 표기법에서 따옴표 빼먹기
// 우리가 키우는 화분 정보예요
let myPlant = {
name: "선인장", // 식물 이름
color: "초록색" // 식물 색깔
};
console.log("=== 올바른 접근 방법들 ===");
console.log("점 표기법:", myPlant.name); // "선인장" ✅
console.log("대괄호 표기법:", myPlant["name"]); // "선인장" ✅
// ❌ 틀린 방법: 따옴표가 없어요
// console.log(myPlant[name]); // 에러! name을 변수로 생각해요
console.log("\n=== 변수 사용할 때 ===");
// 변수를 사용할 때는 따옴표가 없어야 해요
let propertyName = "color";
console.log("변수로 접근:", myPlant[propertyName]); // "초록색" ✅
// 직접 문자열을 쓸 때는 따옴표가 필요해요
console.log("문자열로 접근:", myPlant["color"]); // "초록색" ✅대괄호 안에서는 속성 이름을 문자열로 써야 하므로 따옴표가 필요해요. 하지만 변수를 사용할 때는 따옴표를 쓰면 안 되죠.
❌ 실수 3: delete로 삭제한 속성이 어떻게 되는지 모르기
// 우리 교실 물건 목록이에요
let ourClassroom = {
desks: 25, // 책상 개수
chairs: 25, // 의자 개수
oldWhiteboard: "낡은칠판", // 교체할 예정인 칠판
brokenClock: "고장난시계" // 버릴 예정인 시계
};
console.log("=== 정리 전 교실 ===");
console.log("교실 물건들:", ourClassroom);
// 낡은 물건들을 완전히 제거해보기
console.log("\n=== 정리 작업 ===");
delete ourClassroom.oldWhiteboard;
delete ourClassroom.brokenClock;
console.log("정리 완료!");
console.log("\n=== 정리 후 교실 ===");
console.log("깔끔한 교실:", ourClassroom);
// 삭제된 물건들 확인해보기
console.log("\n=== 삭제 확인 ===");
console.log("삭제된 칠판:", ourClassroom.oldWhiteboard); // undefined
console.log("삭제된 시계:", ourClassroom.brokenClock); // undefined
// 새로운 물건 추가하기
ourClassroom.smartboard = "스마트보드";
ourClassroom.newClock = "새 시계";
console.log("\n=== 새 물건 추가 후 ===");
console.log("업그레이드된 교실:", ourClassroom);delete를 사용하면 그 속성이 완전히 사라져서 undefined가 나와요. 이는 "존재하지 않음"을 의미해요.
💪 보너스 문제: 좀 더 어려운 속성 관리
더 깊이 있는 이해를 원하는 여러분을 위해 조금 더 도전적인 문제를 준비했어요. 기본 내용을 모두 이해한 후에 도전해보세요.
Q1. 동적 속성 접근으로 사용자 질문에 답하는 시스템 만들어보기
let studentInfo = {
name: "김철수",
grade: 5,
hobby: "축구",
subject: "수학"
};
// 사용자 질문을 배열로 만들어서 처리하기
let questions = ["name", "grade", "hobby"];
console.log("학생 정보 질의응답 시스템:");
for(let i = 0; i < questions.length; i++) {
let question = questions[i];
let answer = studentInfo[question];
console.log("질문: " + question + " → 답변: " + answer);
}이 보너스 문제는 대괄호 표기법의 동적 접근 기능을 활용한 고급 활용법이에요.
✏️ 연습문제로 실력 기르기
이제 배운 내용들을 연습문제를 통해 우리의 마음과 손에 익혀보겠어요. 연습은 이해를 더욱 깊게 만들고, 실제로 사용할 수 있는 능력으로 바꾸어주는 소중한 과정이에요.
Q1. 점 표기법으로 과일 정보 관리하기
// 과일 가게에서 파는 사과 정보를 만들고 관리해보세요
let apple = {
name: "사과",
color: "빨간색",
taste: "달콤함"
};
console.log("=== 사과 정보 확인 ===");
// 점 표기법으로 사과 정보를 하나씩 출력해보세요
console.log("과일 이름:", apple.name);
console.log("과일 색깔:", apple.color);
console.log("맛:", apple.taste);
// 새로운 정보를 추가해보세요
apple.price = 1000; // 가격 정보 추가
apple.origin = "한국"; // 원산지 정보 추가
console.log("\n=== 정보 추가 후 ===");
console.log("완성된 사과 정보:", apple);Q2. 대괄호 표기법으로 학생 정보 접근하기
// 우리 반 학생 정보를 대괄호 표기법으로 관리해보세요
let student = {
name: "이민지",
subject: "과학",
grade: 6
};
console.log("=== 대괄호 표기법 연습 ===");
// 대괄호 표기법으로 정보 출력하기
console.log("학생 이름:", student["name"]);
console.log("좋아하는 과목:", student["subject"]);
console.log("학년:", student["grade"]);
// 사용자 질문에 답하기 (변수 활용)
let userQuestion = "name"; // 사용자가 이름을 물어봤다고 가정
console.log("\n=== 사용자 질문 답변 ===");
console.log("질문:", userQuestion);
console.log("답변:", student[userQuestion]);Q3. delete 연산자로 정보 정리하기
// 장난감 상자에서 불필요한 정보를 삭제해보세요
let toyBox = {
robot: "로봇",
doll: "인형",
ball: "공",
brokenToy: "부러진장난감", // 삭제할 예정
tempItem: "임시물건" // 삭제할 예정
};
console.log("=== 정리 전 장난감 상자 ===");
console.log("전체 장난감:", toyBox);
// 불필요한 물건들 삭제하기
delete toyBox.brokenToy;
delete toyBox.tempItem;
console.log("\n=== 정리 후 장난감 상자 ===");
console.log("깔끔한 장난감 상자:", toyBox);
// 삭제 확인하기
console.log("\n=== 삭제 확인 ===");
console.log("부러진 장난감:", toyBox.brokenToy); // undefined
console.log("임시 물건:", toyBox.tempItem); // undefined
console.log("정리 완료!");🔄 복습하기: 지난 시간에 배운 객체 리터럴
이전 단원에서 배운 객체 리터럴을 간단히 복습해볼까요?
복습 문제: 객체 생성과 속성 관리를 함께 사용해서 "도서관 시스템" 만들기
// 객체 리터럴로 책 정보 생성하기 (지난 시간 내용)
let libraryBook = {
title: "자바스크립트 기초",
author: "김개발",
year: 2023,
pages: 250
};
console.log("📚 도서관 시스템");
// 처음 책 정보 확인 (지난 시간 내용)
console.log("\n=== 등록된 책 정보 ===");
console.log("전체 정보:", libraryBook);
// 속성 접근으로 상세 정보 보여주기 (오늘 배운 내용)
console.log("\n=== 상세 정보 확인 ===");
console.log("제목:", libraryBook.title);
console.log("저자:", libraryBook["author"]);
console.log("출간년도:", libraryBook.year);
console.log("페이지 수:", libraryBook["pages"]);
// 새로운 정보 추가하기
console.log("\n=== 정보 업데이트 ===");
libraryBook.isAvailable = true; // 대출 가능 여부 추가
libraryBook.category = "프로그래밍"; // 카테고리 추가
libraryBook["borrower"] = null; // 대출자 정보 추가
console.log("업데이트된 책 정보:", libraryBook);
// 사용자가 원하는 정보만 보여주기
let userWants = "title";
console.log("\n=== 사용자 요청 정보 ===");
console.log("사용자가 요청한 " + userWants + ":", libraryBook[userWants]);
console.log("\n🎯 결론: 객체 리터럴로 만든 객체도 속성 접근으로 자유롭게 관리할 수 있어요!");정답 설명: 지난 시간에 배운 객체 리터럴로 기본 구조를 만들고, 오늘 배운 점 표기법과 대괄호 표기법으로 속성에 접근해서 정보를 조회하고 수정할 수 있어요. 이렇게 두 기능을 조합하면 완전한 정보 관리 시스템을 만들 수 있답니다.
지금까지 객체 속성에 접근하고 삭제하는 방법을 자세히 배워보았어요. 이제 여러분도 전문가처럼 객체라는 정보 저장소를 자유자재로 다룰 수 있게 되었어요. 앞으로 더 복잡한 정보들도 자연스럽게 관리할 수 있을 거예요.
✅ 학습 완료 체크리스트
우리가 오늘 함께 걸어온 길을 돌아보며, 각각의 내용을 마음속에 잘 정리했는지 확인해보세요.
| 학습 내용 | 이해했나요? |
|---|---|
| 속성 접근의 기본 개념 | ✅ |
| 점 표기법과 대괄호 표기법 | ✅ |
| delete 연산자 사용법 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 객체 리터럴과 속성 접근 조합 | ✅ |
🔄 단계별 진행 과정 정리
지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.
1단계: 1) 객체 생성 → 2) 점 표기법으로 속성 접근 → 3) 속성 값 출력 → 4) 점 표기법으로 속성 값 변경 → 5) 변경 결과 확인
2단계: 1) 기본 객체 생성 → 2) 대괄호 표기법으로 기존 속성 접근 → 3) 점 표기법으로 새 속성 추가 → 4) 대괄호 표기법으로 새 속성 추가 → 5) 확장된 객체 확인
3단계: 1) 여러 속성을 가진 객체 생성 → 2) 삭제 전 상태 확인 → 3) delete 연산자로 특정 속성 삭제 → 4) 삭제 후 상태 확인 → 5) 삭제된 속성 접근 시 undefined 확인
📂 마무리 정보
오늘 우리가 함께 배운 8.1.2의 내용이 여러분의 마음속 지식 정원에 잘 심어졌기를 바라요. 다음 시간에는 더 흥미로운 내용으로 만나게 될 거예요.
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요. 그것이 바로 진정한 학습이 일어나는 방식이니까요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'8. 정보 꾸러미 만들기 (객체) > 8.1 객체 다루기' 카테고리의 다른 글
| 8.1.4 메서드 정의하기 - 객체에게 특별한 능력 부여하기 (0) | 2025.07.10 |
|---|---|
| 8.1.3 점 표기법 vs 대괄호 표기법 - 두 가지 접근 방법의 차이점 (0) | 2025.07.10 |
| 8.1.1 정보 꾸러미 만들기 - 객체 리터럴 (0) | 2025.07.09 |