8.2.1 정보 상자 안에 목록 넣기 - 체계적인 정보 관리하기

📘 8.2.1 정보 상자 안에 목록 넣기 - 체계적인 정보 관리하기

참으로 아름다운 것은 질서입니다. 지금까지 우리는 정보 상자(객체)라는 보물상자에 여러 가지 보물들을 넣는 방법을 배웠습니다. 그런데 이번에는 더 특별한 것을 배울 것입니다. 바로 하나의 상자 안에 여러 개의 보물 목록을 넣는 방법 말이지요.

예를 들어, 학생의 정보 상자에 이름과 나이뿐만 아니라 취미 목록, 좋아하는 음식 목록 같은 여러 개의 항목들을 함께 보관하는 것입니다. 마치 보물상자 안에 작은 보석함들이 들어있는 것과 같습니다.

🧠 먼저 용어를 알아볼까요?

정보 상자 안의 목록을 이해하기 위해 필요한 용어들을 마음에 담아보겠습니다.

용어	의미
상자 안의 목록	정보 상자 속성에 목록이 들어있는 구조
점과 대괄호 접근	정보상자.속성[번호] 형태로 접근하는 방법
목록 속성	정보 상자 속성이 여러 개의 값을 가지는 경우
연달아 접근	점 표기법과 대괄호 표기법을 함께 쓰는 방법
섞인 구조	정보 상자와 목록이 함께 있는 복합적인 구조

이 용어들을 이해하면 정보 상자와 목록을 함께 사용하는 방법을 더 쉽게 배울 수 있습니다.

✨ 정보 상자 안 목록의 핵심 개념

정보 상자 안에 목록을 넣는다는 것은 하나의 정보 상자 안에서 여러 개의 관련된 목록을 관리하는 것을 의미합니다. 예를 들어, 한 학생의 정보를 관리할 때 이름과 나이는 하나씩만 있지만, 취미는 여러 개가 있을 수 있잖아요? 이럴 때 취미들을 목록으로 만들어서 학생 정보 상자 안에 넣으면 됩니다.

이 방법의 가장 큰 장점은 관련된 정보들을 한 곳에 모아서 체계적으로 관리할 수 있다는 것입니다. 학생의 모든 정보가 하나의 정보 상자 안에 깔끔하게 정리되어 있으니, 찾기도 쉽고 관리하기도 편하지요.

또한 목록의 모든 기능을 그대로 사용할 수 있습니다. push()로 새로운 항목을 추가하거나, length로 목록의 개수를 확인하는 등 목록에서 배웠던 모든 방법들을 똑같이 사용할 수 있습니다.

따뜻한 이야기: 학생의 필통 상자

정보 상자 안의 목록을 더 쉽게 이해하기 위해 학생의 필통에 비유해보겠습니다.

여러분의 필통을 생각해보세요. 필통에는 기본 정보들이 있습니다. 누구 것인지(소유자), 무슨 색인지(색깔), 언제 샀는지(구입날짜) 같은 정보들 말이지요. 이런 정보들은 하나씩만 있습니다.

하지만 필통 안에 들어있는 물건들은 어떤가요? 연필이 여러 자루, 볼펜도 여러 개, 지우개도 몇 개 있을 수 있습니다. 이런 물건들은 목록으로 관리해야 하지요.

만약 우리가 필통을 프로그래밍으로 표현한다면, 소유자나 색깔 같은 정보는 일반 속성으로, 그리고 들어있는 연필들, 볼펜들은 목록 속성으로 만들 수 있습니다. 이렇게 하면 "첫 번째 연필이 뭐야?" 같은 질문에도 필통.연필들[0]으로 쉽게 답할 수 있습니다.

🎯 정보 상자 안 목록을 사용하는 이유

그렇다면 우리는 왜 정보 상자 안에 목록을 넣어서 사용할까요? 정말 중요한 이유들이 있습니다.

첫째, 실제 세상을 더 자연스럽게 표현할 수 있습니다. 현실에서 한 사람은 여러 취미를 가지고, 한 학교에는 여러 학생이 있고, 한 가족에는 여러 구성원이 있잖아요? 이런 상황을 코드로 표현할 때 정보 상자 안의 목록이 정말 유용합니다.

둘째, 관련 정보들을 체계적으로 묶어서 관리할 수 있습니다. 학생의 이름, 나이, 취미, 친구목록을 모두 하나의 정보 상자 안에 넣으면, 그 학생에 대한 모든 정보를 한 번에 다룰 수 있습니다. 마치 개인 파일철처럼 말이지요.

셋째, 코드의 논리적 구조가 명확해집니다. 어떤 정보가 어디에 속하는지, 무엇과 관련이 있는지가 코드만 봐도 쉽게 이해됩니다. 이는 나중에 코드를 수정하거나 다른 사람과 협업할 때 정말 중요합니다.

⚙️ 기본 문법 살펴보기

정보 상자 안에 목록을 넣고 사용하는 기본적인 방법을 알아보겠습니다.

정보 상자 안에 목록 정의하기:

let 정보상자이름 = {
    일반속성: "값",
    목록속성: ["요소1", "요소2", "요소3"]
};

목록 전체에 접근하기:

let 전체목록 = 정보상자이름.목록속성;

목록의 특정 요소에 접근하기:

let 특정값 = 정보상자이름.목록속성[인덱스번호];

목록에 새 요소 추가하기:

정보상자이름.목록속성.push("새로운요소");

🧪 실습으로 익혀보기

강물이 차분히 흘러가듯이, 이제 실제 예제를 통해 정보 상자 안의 목록을 어떻게 사용하는지 자세히 알아보겠습니다.

🔹 실습 1: 학생의 취미 목록 관리하기

가장 단순한 것에서 참된 아름다움을 발견할 수 있습니다. 첫 번째 실습에서는 가장 기본적인 형태인 학생의 취미 목록을 관리해보겠습니다.

// 취미가 많은 학생 정보 만들기
let student = {
    name: "수민",                           // 학생 이름 (하나의 값)
    age: 12,                                // 학생 나이 (하나의 값)
    grade: 6,                               // 학생 학년 (하나의 값)
    hobbies: ["축구", "그림그리기", "독서", "게임"] // 취미 목록 (여러 개의 값)
};

console.log("학생 소개:");
console.log("전체 정보:", student);

// 일반 속성들 확인하기
console.log("이름:", student.name);         // "수민"
console.log("나이:", student.age);          // 12
console.log("학년:", student.grade);        // 6

// 목록 속성 확인하기  
console.log("모든 취미:", student.hobbies); // 전체 취미 목록
console.log("취미 개수:", student.hobbies.length); // 4개

// 특정 취미 확인하기
console.log("첫 번째 취미:", student.hobbies[0]);   // "축구"
console.log("두 번째 취미:", student.hobbies[1]);   // "그림그리기"
console.log("마지막 취미:", student.hobbies[3]);    // "게임"

이 과정을 단계별로 살펴보면, 먼저 일반 속성(이름, 나이, 학년)과 목록 속성(취미들)을 함께 가진 정보 상자를 만듭니다. 그다음 일반 속성들은 점 표기법으로 접근하고, 목록 속성은 전체를 확인한 후 인덱스를 사용해서 개별 요소에 접근합니다. 이렇게 하면 학생의 모든 정보를 체계적으로 관리할 수 있습니다.

🔹 실습 2: 동적으로 목록 관리하기 - 쇼핑 장바구니

삶은 변화하는 것이고, 우리의 목록도 그렇게 변화합니다. 두 번째 실습에서는 목록에 새로운 항목을 추가하고 변경하는 방법을 알아보겠습니다.

// 엄마의 쇼핑 장바구니 관리하기
let shoppingCart = {
    owner: "엄마",                          // 장바구니 주인
    date: "2024-03-15",                     // 쇼핑 날짜
    items: ["우유", "빵"],                  // 처음에 넣은 물건들
    budget: 50000                           // 예산
};

console.log("쇼핑 시작!");
console.log("장바구니 주인:", shoppingCart.owner);
console.log("쇼핑 날짜:", shoppingCart.date);
console.log("처음 물건들:", shoppingCart.items);

// 장보면서 물건 추가하기
console.log("🛒 사과를 장바구니에 넣습니다");
shoppingCart.items.push("사과");            // 사과를 items 목록 끝에 추가하기
console.log("현재 물건들:", shoppingCart.items);

console.log("🛒 계란을 장바구니에 넣습니다");  
shoppingCart.items.push("계란");            // 계란을 items 목록 끝에 추가하기
console.log("현재 물건들:", shoppingCart.items);

console.log("🛒 바나나도 넣어볼까요?");
shoppingCart.items.push("바나나");          // 바나나를 items 목록 끝에 추가하기
console.log("최종 물건들:", shoppingCart.items);

// 쇼핑 결과 확인하기
console.log("총 물건 개수:", shoppingCart.items.length);   // 5개
console.log("첫 번째로 넣은 물건:", shoppingCart.items[0]); // "우유"
console.log("마지막에 넣은 물건:", shoppingCart.items[shoppingCart.items.length - 1]); // "바나나"

이 실습을 통해 우리는 실시간으로 목록에 항목을 추가하면서 목록을 관리하는 방법을 배울 수 있습니다. push() 기능을 사용해서 새로운 물건들을 계속 추가하고, length 속성으로 현재 상태를 확인하는 과정이 마치 실제 쇼핑하는 것과 같지요.

🔹 실습 3: 여러 목록 속성 관리하기 - 우리 반 교실

진정한 조화는 서로 다른 것들이 하나가 될 때 나타납니다. 세 번째 실습에서는 한 정보 상자 안에 여러 개의 목록 속성을 넣어서 복합적인 정보를 관리해보겠습니다.

// 우리 반 교실 정보 관리하기
let ourClassroom = {
    grade: 5,                               // 학년
    className: "5-2",                       // 반 이름
    teacher: "김선생님",                    // 담임선생님
    students: ["철수", "영희", "민수"],      // 학생 목록
    subjects: ["국어", "수학"],             // 수업 과목 목록
    equipment: ["컴퓨터", "프로젝터"]       // 교실 장비 목록
};

console.log("우리 반 소개:");
console.log("학년:", ourClassroom.grade);
console.log("반 이름:", ourClassroom.className);
console.log("담임선생님:", ourClassroom.teacher);

// 각 목록들 확인하기
console.log("학생들:", ourClassroom.students);
console.log("학생 수:", ourClassroom.students.length); // 3명

console.log("수업 과목들:", ourClassroom.subjects);
console.log("과목 수:", ourClassroom.subjects.length); // 2과목

console.log("교실 장비들:", ourClassroom.equipment);
console.log("장비 수:", ourClassroom.equipment.length); // 2개

// 새 학기가 되어서 정보 업데이트하기
console.log("새 학기 업데이트!");

ourClassroom.students.push("지수");         // 전학생을 students 목록에 추가
ourClassroom.subjects.push("과학");         // 새 과목을 subjects 목록에 추가
ourClassroom.equipment.push("태블릿");      // 새 장비를 equipment 목록에 추가

console.log("업데이트된 학생들:", ourClassroom.students);   // 4명
console.log("업데이트된 과목들:", ourClassroom.subjects);   // 3과목
console.log("업데이트된 장비들:", ourClassroom.equipment);  // 3개

// 특정 정보 찾기
console.log("첫 번째 학생:", ourClassroom.students[0]);     // "철수"
console.log("새로 추가된 과목:", ourClassroom.subjects[2]); // "과학"

이 실습은 정보 상자 안에 여러 개의 목록이 들어있을 때 어떻게 관리하는지 보여줍니다. 각각의 목록은 서로 다른 종류의 정보를 담고 있지만, 모두 같은 교실과 관련된 정보들이지요. 이렇게 관련된 여러 목록들을 하나의 정보 상자로 묶으면 정보를 체계적으로 관리할 수 있습니다.

🧚‍♀️ 이야기로 다시 배우기: 학교 도서관의 체계적 정리

지금까지 배운 내용을 따뜻한 이야기로 다시 정리해보겠습니다.

우리 학교 도서관의 김 사서선생님은 정말 많은 책들을 관리하고 있었습니다. 그래서 도서관이 항상 복잡했지요. 어느 날 김 선생님은 도서관을 체계적으로 정리하기로 했습니다.

먼저 도서관 기본 정보를 정리했습니다. 도서관 이름은 "우리 초등학교 도서관", 위치는 "본관 2층", 담당자는 "김 사서선생님"이었지요. 이런 정보들은 각각 하나씩만 있었습니다.

하지만 책들과 자료들은 달랐습니다. 동화책들은 "백설공주", "신데렐라", "잭과 콩나무" 등 정말 많았거든요. 학습 도서들도 "초등수학 문제집", "과학 실험서", "한국사 이야기" 등 수십 권이었고요.

김 선생님은 이 모든 것들을 도서 관리 시스템에 체계적으로 정리했습니다. 도서관의 기본 정보는 각각 따로 기록하고, 동화책들은 "동화책 목록", 학습 도서들은 "학습서 목록"으로 분류해서 기록했지요.

이제 김 선생님이 "세 번째 동화책이 뭐였지?"라고 궁금할 때는 도서관.동화책목록[2]처럼 쉽게 찾을 수 있었습니다. 새로운 책이 들어오면 도서관.동화책목록.push("새 동화책")으로 간단히 추가할 수도 있고요!

이렇게 체계적으로 정리된 도서관에서 김 선생님의 일하는 효율은 훨씬 좋아졌답니다. 우리가 배운 정보 상자 안의 목록도 이런 체계적인 정리와 같은 것입니다.

🧠 자주 하는 실수와 주의할 점

정보 상자 안의 목록을 사용할 때 자주 하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있습니다.

❌ 실수 1: 목록 접근할 때 인덱스 괄호 빼먹기

// 우리 가족 정보
let family = {
    surname: "김",                      // 성씨
    members: ["아빠", "엄마", "나", "동생"] // 가족 구성원들
};

// ❌ 틀린 방법: 대괄호 없이 접근
// console.log("첫 번째 가족:", family.members.0); // 문법 오류!

// ✅ 올바른 방법: 대괄호로 인덱스 접근
console.log("첫 번째 가족:", family.members[0]);   // "아빠"
console.log("두 번째 가족:", family.members[1]);   // "엄마"
console.log("막내 가족:", family.members[3]);      // "동생"

목록 요소에 접근할 때는 반드시 대괄호 []를 사용해야 합니다. 점 표기법만으로는 목록 요소에 접근할 수 없습니다.

❌ 실수 2: 목록 전체와 목록 요소 헷갈리기

// 우리반 친구들 정보
let myClass = {
    teacher: "이선생님",
    friends: ["철수", "영희", "민수"]
};

// ❌ 틀린 이해: 목록과 요소를 구분하지 못함
console.log("친구들:", myClass.friends);      // 전체 목록 출력 (맞음)
console.log("첫 번째 친구:", myClass.friends); // 여전히 전체 목록! (틀림)

// ✅ 올바른 방법: 목록과 요소를 명확히 구분
console.log("모든 친구들:", myClass.friends);     // ["철수", "영희", "민수"]
console.log("첫 번째 친구:", myClass.friends[0]); // "철수"
console.log("친구 수:", myClass.friends.length);  // 3

목록 전체를 보고 싶을 때와 특정 요소를 보고 싶을 때를 명확히 구분해야 합니다.

❌ 실수 3: 빈 목록에서 요소 찾으려고 하기

// 새로 이사온 집 정보
let newHouse = {
    address: "서울시 강남구",
    furniture: []  // 아직 가구가 없는 빈 집
};

// ❌ 위험한 접근: 빈 목록의 첫 번째 요소 찾기
console.log("첫 번째 가구:", newHouse.furniture[0]); // undefined (오류는 아니지만 의미없음)

// ✅ 안전한 방법: 목록 길이 확인 후 접근
if (newHouse.furniture.length > 0) {
    console.log("첫 번째 가구:", newHouse.furniture[0]);
} else {
    console.log("아직 가구가 없어요!");  // 이게 실행됨
}

// 가구 추가하기
newHouse.furniture.push("침대");      // 침대를 furniture 목록에 추가
newHouse.furniture.push("책상");      // 책상을 furniture 목록에 추가
console.log("가구 추가 후:", newHouse.furniture);

빈 목록에서 요소를 찾으려고 하면 undefined가 나옵니다. 항상 목록에 요소가 있는지 먼저 확인하는 습관을 기르세요.

✏️ 연습문제로 실력 기르기

연습은 이해를 깊게 하고, 이해는 지혜로 이어집니다. 이제 배운 내용을 연습문제를 통해 차근차근 익혀보겠습니다.

Ex1) 우리집 고양이의 먹이 목록을 관리해보자

작은 생명체도 자신만의 취향이 있습니다. 우리집 고양이 정보를 만들어보겠습니다.

// 우리집 고양이 정보 만들기
let myCat = {
    name: "나비",                       // 고양이의 이름을 저장
    age: 3,                             // 고양이의 나이를 저장
    foods: ["사료", "참치", "우유"]     // 좋아하는 음식들을 목록으로 저장
};

// 고양이 정보 출력하기
console.log("고양이 이름:", myCat.name);          // name 속성에서 이름 가져오기
console.log("고양이 나이:", myCat.age);           // age 속성에서 나이 가져오기
console.log("좋아하는 음식들:", myCat.foods);     // foods 목록 전체 가져오기
console.log("음식 종류 수:", myCat.foods.length); // foods 목록의 길이로 개수 확인
console.log("가장 좋아하는 음식:", myCat.foods[0]); // foods 목록의 첫 번째 요소 가져오기

Ex2) 우리 반 학생 목록에 새 친구를 추가해보자

새로운 만남은 언제나 우리 삶을 풍요롭게 합니다. 우리 반에 새로운 친구를 추가해보겠습니다.

// 우리 반 정보
let ourClass = {
    grade: 4,                           // 우리 반의 학년을 저장
    students: ["김철수", "이영희"]      // 처음에 있던 학생들을 목록으로 저장
};

console.log("처음 학생들:", ourClass.students);     // students 목록 전체 출력
console.log("학생 수:", ourClass.students.length);  // students 목록의 길이로 학생 수 확인

// 전학생 추가하기
ourClass.students.push("박민수");                   // push 기능으로 새 학생을 목록 끝에 추가
console.log("전학생 추가 후:", ourClass.students);   // 추가된 후의 students 목록 출력
console.log("새로운 학생 수:", ourClass.students.length); // 추가 후 학생 수 다시 확인

Ex3) 도서관 책 목록을 관리해보자

지식은 나누어질 때 더욱 빛이 납니다. 우리 동네 도서관 정보를 관리해보겠습니다.

// 우리 동네 도서관 정보
let library = {
    name: "행복 도서관",                           // 도서관 이름을 저장
    location: "우리동네",                          // 도서관 위치를 저장
    books: ["해리포터", "어린왕자", "홍길동전"]    // 도서관에 있는 책들을 목록으로 저장
};

console.log("도서관 이름:", library.name);         // name 속성에서 도서관 이름 가져오기
console.log("모든 책들:", library.books);          // books 목록 전체 출력
console.log("첫 번째 책:", library.books[0]);      // books 목록의 첫 번째 책 가져오기

// 새 책 추가하기
library.books.push("신데렐라");                    // push 기능으로 새 책을 목록 끝에 추가
console.log("책 추가 후:", library.books);         // 추가된 후의 books 목록 전체 출력

지금까지 정보 상자 안에 목록을 넣어서 사용하는 방법을 차근차근 배워보았습니다. 이제 여러분도 복잡한 정보들을 체계적으로 정리하고 관리할 수 있게 되었습니다.

🔄 복습 문제 - 이전에 배운 내용들 기억하나요?

8단원을 배우면서 이전에 배운 내용들도 잊지 않도록 조용히 복습해보겠습니다.

🔁 7단원 복습: 배열 메서드 활용하기

// 문제: 학생의 성적을 배열로 관리하고 새 점수 추가하기
let studentGrades = {
    name: "철수",
    scores: [85, 90, 78]
};

console.log("학생 이름:", studentGrades.name);
console.log("처음 점수들:", studentGrades.scores);

// 배열 메서드로 새 점수 추가
studentGrades.scores.push(95);
console.log("점수 추가 후:", studentGrades.scores);

// 마지막 점수 제거
let removedScore = studentGrades.scores.pop();
console.log("제거된 점수:", removedScore);
console.log("최종 점수들:", studentGrades.scores);

🔁 5단원 복습: 함수와 객체 함께 사용하기

// 문제: 학생 정보를 출력하는 함수 만들기
function printStudentInfo(student) {
    console.log("=== 학생 정보 ===");
    console.log("이름:", student.name);
    console.log("과목 수:", student.subjects.length);

    for (let i = 0; i < student.subjects.length; i++) {
        console.log((i + 1) + ". " + student.subjects[i]);
    }
}

// 사용해보기
let student = {
    name: "영희",
    subjects: ["국어", "수학", "과학"]
};

printStudentInfo(student);

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요.

학습 내용	이해했나요?
객체 안 배열의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 분들을 위한 추가 문제들입니다.

추가 문제 1. 학생의 과목 점수를 배열로 저장해보세요.

let student = {
    name: "지민",
    scores: [90, 85, 92]
};

console.log("학생 이름:", student.name);
console.log("모든 점수:", student.scores);
console.log("첫 번째 점수:", student.scores[0]);
console.log("점수 개수:", student.scores.length);

추가 문제 2. 애완동물의 먹이 목록에 새로운 먹이를 추가해보세요.

let pet = {
    name: "고양이",
    foods: ["사료", "생선"]
};

console.log("처음 먹이:", pet.foods);

pet.foods.push("닭고기");
console.log("먹이 추가 후:", pet.foods);
console.log("먹이 종류 수:", pet.foods.length);

추가 문제 3. 가족 구성원들의 이름을 배열로 관리해보세요.

let family = {
    surname: "김",
    members: ["아빠", "엄마", "나"]
};

console.log("성씨:", family.surname);
console.log("가족 구성원:", family.members);
console.log("가족 수:", family.members.length);

family.members.push("동생");
console.log("동생 추가 후:", family.members);

추가 문제 4. 다음 코드에서 "수학" 점수에 접근하는 방법은?

let report = {
    student: "철수",
    subjects: ["국어", "수학", "과학"],
    scores: [85, 90, 88]
};

답: report.scores[1] (수학은 두 번째 과목이므로 인덱스 1)

설명: subjects 배열에서 "수학"이 인덱스 1에 위치하므로, 같은 인덱스의 scores 배열 요소에 접근하면 됩니다.

📂 마무리 정보

오늘 배운 8.2.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나겠습니다.

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---