1.2.3 참조형: 객체(Object), 배열(Array) - 여러 값을 함께 관리하는 데이터 구조

📘 1.2.3 참조형: 객체(Object), 배열(Array) - 여러 값을 함께 관리하는 데이터 구조

안녕하세요, 여러분. 지금까지 우리가 만나본 값들은 모두 하나의 작은 상자에 하나씩만 들어갈 수 있는 것들이었어요. Number, String, Boolean, null, undefined... 이 모든 친구들이 그랬죠.

그런데 실제 우리 삶을 들여다보면, 서로 관련된 이야기들을 따로따로 기억하기보다는 하나의 이야기로 묶어서 간직하는 게 훨씬 자연스러울 때가 많아요. 예를 들어 한 친구에 대한 기억이라면 그 친구의 이름만 따로, 나이만 따로, 좋아하는 것만 따로 기억하는 것보다는 그 모든 것들이 하나로 어우러진 그 친구만의 이야기로 기억하고 싶잖아요.

오늘은 바로 그런 마음을 담아낼 수 있는 특별한 데이터의 형태들을 만나볼 거예요. 객체(Object)와 배열(Array)이라는, 여러 개의 값을 하나로 어우러뜨릴 수 있는 놀라운 친구들이에요.

🧠 새로운 단어들과 친해지기

객체와 배열을 이해하는 데 도움이 되는 쉬운 단어들을 알아볼게요.

단어	쉬운 설명
객체 (Object)	여러 개의 값을 이름표를 붙여서 묶어놓은 특별한 구조예요.
배열 (Array)	여러 개의 값을 줄을 세워서 순서대로 넣어놓은 특별한 구조예요.
참조형 (Reference Type)	값 자체가 아닌 값이 있는 위치 주소를 가리키는 특별한 방식이에요.
속성 (Property)	객체 안에서 이름표와 값이 짝을 이루는 각각의 정보 묶음이에요.
인덱스 (Index)	배열에서 각 값의 위치를 나타내는 번호예요. (0번부터 시작해요)

객체는 이름표가 붙은 여러 칸 서랍처럼, 배열은 번호가 매겨진 여러 칸 책꽂이처럼 생각해보면 좋을 것 같아요. 둘 다 한 번에 여러 개의 값을 품을 수 있는 따뜻한 데이터 구조들이거든요.

✨ 두 가지 데이터 구조 알아보기

객체와 배열은 자바스크립트에서 여러 개의 정보를 함께 보듬어주는 핵심적인 도구들이에요. 이들과 친해지면 프로그래밍의 세계가 훨씬 넓고 따뜻해져요.

객체(Object)는 중괄호 {}로 만들며, 이름표(키)와 값을 짝지어서 저장하는 구조예요. 마치 서랍장의 각 서랍에 정성스럽게 이름표를 붙여놓은 것과 같아요. "이름", "나이", "취미"라는 이름표가 붙은 서랍들이 있고, 각각에 소중한 정보가 들어있는 거죠. 실제 우리 삶의 사물이나 개념을 프로그램에서 표현할 때 정말 유용한 친구예요.

배열(Array)은 대괄호 []로 만들며, 순서대로 값들을 나란히 저장하는 구조예요. 책꽂이에 책들을 1번, 2번, 3번 순서대로 가지런히 꽂아놓은 것처럼요. 같은 성격의 데이터들을 순서대로 정리하거나, 목록을 만들 때 아주 편안한 친구예요.

이 둘은 참조형(Reference Type)이라는 특별한 성질을 가지고 있어요. 이는 변수에 실제 값이 저장되는 것이 아니라, 그 값이 있는 위치 주소가 저장된다는 뜻이에요. 마치 집 주소를 적어놓은 쪽지처럼 말이에요.

재미있는 비유: 학교의 두 가지 정리 시스템

객체와 배열을 더 쉽게 이해하기 위해 학교의 두 가지 정리 시스템 이야기를 들려드릴게요.

우리 학교에는 두 종류의 정말 세심한 정리 시스템이 있어요.

📦 이름표 정리함 (객체 시스템)는 각 칸마다 정성스럽게 이름표가 붙어있는 서랍장이에요. "연필", "지우개", "자", "계산기" 이렇게 적혀있죠. 뭔가 필요하면 이름표를 불러주기만 하면 바로 나와요! 학용품.연필 이런 식으로 정중하게 말하면 연필이 순식간에 나타나거든요.

이 정리함의 좋은 점은 무엇이 어디 있는지 이름표만 알면 바로 찾을 수 있다는 거예요. 순서를 일일이 기억할 필요가 없어요. "내 연필은 어디 있지?"라고 물으면 "연필 서랍에 있어요!"라고 바로 답할 수 있는 거죠.

📚 순서 정리함 (배열 시스템)는 순서대로 번호가 매겨진 책꽂이 같아요. 1번 칸, 2번 칸, 3번 칸... 이런 식으로 차례차례 정리되어 있어요. "3번째 교과서 가져와!" 하면 순서 번호로 찾아줘요. 교과서들[2] 이런 식으로 말하면 돼요. (학교에서는 0번부터 세니까 3번째가 2번이에요)

이 정리함의 좋은 점은 순서가 중요한 것들을 차분하게 정리할 수 있다는 거예요. "첫 번째 시간 교과서", "두 번째 시간 교과서" 이런 식으로 순서가 의미가 있을 때 아주 유용해요.

정말 세심한 학생들은 두 정리함을 함께 사용해서 더 정교하고 체계적인 정리를 해요. 예를 들어 "각 과목별 정보"라는 이름표 정리함 안에 "그 과목에 필요한 준비물들"이라는 순서 정리함을 넣어두는 거죠.

🎯 왜 두 가지 데이터 구조를 사용할까요?

여러분이 궁금해할 거예요. "왜 이런 섬세한 구조들을 써야 하나요?"

첫 번째 이유는 관련된 정보들을 하나의 이야기로 묶어서 체계적으로 관리할 수 있어요. 한 친구의 정보를 이름, 나이, 학년 등 여러 변수로 따로 관리하는 대신, 친구정보라는 하나의 객체로 묶어서 관리하면 훨씬 따뜻하고 이해하기 쉬워져요.

두 번째로는 하나의 변수에 여러 정보를 담을 수 있어서 코드가 간결해져요. 10개의 변수를 각각 관리하는 대신 하나의 객체나 배열로 관리하면 코드의 양도 줄어들고 실수할 가능성도 줄어들죠.

세 번째로는 체계적으로 데이터를 정리하여 나중에 찾기 쉽게 만들 수 있어요. 의미있는 이름표를 붙이거나 논리적인 순서로 배치하면, 나중에 그 정보를 사용할 때 훨씬 편안해요.

마지막으로 복잡한 프로그램의 정보 구조를 만들 수 있게 돼요. 실제 세상의 복잡한 정보들을 프로그램에서 표현하려면 객체와 배열의 조화가 꼭 필요해요.

⚙️ 두 가지 데이터 구조 사용법 배우기

객체와 배열의 기본적인 만들기와 사용법을 차분히 알아볼게요.

객체 (Object) 사용법:

let 객체이름 = {
    이름표1: 값1,
    이름표2: 값2,
    이름표3: 값3
};

// 값 꺼내는 방법
객체이름.이름표1        // 점 방법
객체이름["이름표2"]     // 대괄호 방법

배열 (Array) 사용법:

let 배열이름 = [값1, 값2, 값3];

// 값 꺼내는 방법  
배열이름[0]    // 첫 번째 값 (번호는 0부터 시작해요)
배열이름[1]    // 두 번째 값
배열이름[2]    // 세 번째 값

객체에서는 의미있는 이름표로 값에 다가가고, 배열에서는 숫자 순서 번호로 값에 다가간다는 점이 가장 큰 차이예요.

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 객체와 배열을 어떻게 사용하는지 차근차근 알아볼게요.

🔹 첫 번째 예시: 객체로 친구 정보를 하나로 묶어 관리해보자

첫 번째로는 객체를 사용하여 한 친구의 모든 정보를 소중히 저장하고 관리하는 방법을 알아보겠어요.

// 객체로 친구의 모든 정보를 하나의 변수에 담기
let myFriend = {
    name: "김지수",      // 이름 정보
    age: 12,             // 나이 정보
    grade: 6,            // 학년 정보
    hobby: "그림그리기", // 취미 정보
    isMyBestFriend: true // 가장 친한 친구인지 정보
};

// 객체 안의 값들을 이름표로 꺼내서 사용하기
console.log(myFriend.name);       // "김지수"가 나타나요
console.log(myFriend.age);        // 12가 나타나요
console.log(myFriend["hobby"]);   // "그림그리기" (대괄호 방법도 가능해요)

// 새로운 정보를 이름표를 붙여서 추가하기
myFriend.school = "꿈나무초등학교";
console.log(myFriend.school);     // "꿈나무초등학교"가 나타나요

이 과정을 차근차근 설명해드릴게요. 먼저 객체 만들기 방법을 사용하여 친구의 다양한 정보를 하나의 변수에 담아요. 여러 종류의 값들(글자, 숫자, 참/거짓)을 이름표와 함께 포함시킬 수 있다는 점이 정말 따뜻해요. 그다음 점 방법과 대괄호 방법 두 가지로 값에 다가가봐요. 마지막으로 새로운 이름표를 붙여서 값을 추가하여 객체가 얼마나 유연한지 확인해요. 이렇게 관련된 정보를 하나로 묶으면 데이터 관리가 훨씬 쉬워져요.

🔹 두 번째 예시: 배열로 순서가 있는 좋아하는 것들을 정리해보자

두 번째로는 배열을 사용하여 같은 성격의 여러 정보를 순서대로 저장하고 관리하는 방법을 알아보겠어요.

// 배열로 좋아하는 색깔들을 순서대로 줄 세우기
let favoriteColors = ["빨강", "파랑", "노랑", "초록"];

// 배열 안의 값들을 순서 번호로 꺠내서 사용하기
console.log(favoriteColors[0]);  // "빨강" (첫 번째, 번호 0)
console.log(favoriteColors[1]);  // "파랑" (두 번째, 번호 1)
console.log(favoriteColors[2]);  // "노랑" (세 번째, 번호 2)
console.log(favoriteColors[3]);  // "초록" (네 번째, 번호 3)

// 배열에 몇 개의 값이 들어있는지 확인하기
console.log(favoriteColors.length);  // 4 (총 4개의 색깔)

// 새로운 색깔을 순서 끝에 추가하기
favoriteColors[4] = "보라";
console.log(favoriteColors[4]);      // "보라"가 나타나요

이 예시를 통해 배열의 핵심 특성들을 확인할 수 있어요. 먼저 배열 만들기 방법으로 색깔 목록을 생성한 다음, 순서 번호를 통해 각 값에 차례차례 다가가요. 가장 중요한 점은 순서 번호가 0부터 시작한다는 거예요. 그다음 length라는 특별한 정보를 확인해서 배열의 크기를 알아봐요. 마지막으로 새로운 순서 번호에 값을 추가하여 배열이 자동으로 확장될 수 있음을 보여줘요. 배열은 순서가 중요한 정보를 다룰 때 매우 유용해요.

🔹 세 번째 예시: 객체와 배열을 함께 사용해서 우리 반 정보 만들어보자

세 번째로는 객체와 배열을 함께 사용하여 더 복잡하고 실용적인 정보 구조를 만드는 방법을 알아보겠어요.

// 객체 안에 배열이 들어있는 복합 구조
let ourClass = {
    className: "6학년 2반",           // 반 이름
    studentCount: 3,                  // 학생 수
    students: ["철수", "영희", "민수"] // 학생 이름들 (배열!)
};

// 복합 구조에서 값 꺼내기
console.log(ourClass.className);    // "6학년 2반"이 나타나요
console.log(ourClass.students);     // ["철수", "영희", "민수"]가 나타나요
console.log(ourClass.students[0]);  // "철수" (첫 번째 학생)
console.log(ourClass.students[1]);  // "영희" (두 번째 학생)

// typeof 기능으로 종류 확인하기
console.log(typeof ourClass);       // "object"가 나타나요
console.log(typeof ourClass.students); // "object"가 나타나요 (배열도 object예요)

이 예시는 실제 프로그래밍에서 자주 사용되는 복합 데이터 구조를 보여줘요. 먼저 객체 내부에 배열을 포함한 복합 구조를 생성해요. 그다음 객체의 기본 정보들에 다가간 후, 객체 내부에 있는 배열에 다가가는 방법을 보여줘요. 특히 ourClass.students[0]처럼 여러 단계를 거쳐서 다가가는 방식을 사용하여 배열의 특정 값에 도달할 수 있어요. 마지막으로 typeof 기능으로 종류를 확인해보면, 배열도 "object"로 분류된다는 흥미로운 사실을 알 수 있어요.

🔄 두 데이터 구조 사용하는 순서 정리하기

지금까지 학습한 내용을 바탕으로 객체와 배열의 사용 과정을 정리해볼게요.

첫 번째 단계는 구조 결정하기예요. 정보에 의미있는 이름표가 필요하면 객체 {}를, 순서가 중요하면 배열 []을 선택해요. 때로는 두 가지를 조화롭게 사용하기도 해요.

두 번째 단계는 정보 저장하기예요. 객체는 이름표: 값 형태로 저장하고, 배열은 순서대로 나열해서 저장해요. 각각의 문법에 맞게 정확히 작성하는 것이 중요해요.

세 번째 단계는 값 꺼내기예요. 객체는 .이름표 또는 ["이름표"] 형태로, 배열은 [순서번호] 형태로 다가가요. 상황에 맞는 적절한 접근 방법을 선택해야 해요.

마지막으로 가장 중요한 것은 활용하기예요. 단순한 구조부터 시작해서 점점 더 복잡한 정보도 객체와 배열을 조화시켜서 표현할 수 있게 되어요.

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

객체와 배열을 사용할 때 친구들이 자주 하는 실수들을 알아보고, 어떻게 피할 수 있는지 함께 배워볼게요.

❌ 실수 1: 배열 순서 번호를 1번부터 시작한다고 생각하기

let colors = ["빨강", "파랑", "노랑"];
console.log(colors[1]);  // "파랑" (두 번째 색깔이에요)
console.log(colors[0]);  // "빨강" (첫 번째 색깔이에요)

이는 프로그래밍을 처음 배우는 친구들이 가장 자주 하는 실수 중 하나예요. 일상생활에서는 순서를 1번부터 세지만, 프로그래밍에서는 0번부터 센다는 점을 마음에 새겨두어야 해요. 배열의 첫 번째 값은 순서 번호 0에 있고, 두 번째 값은 순서 번호 1에 있어요.

❌ 실수 2: 객체 이름표에 띄어쓰기가 있을 때 점 방법 사용하기

let person = {
    "first name": "철수"  // 이름표에 띄어쓰기가 있어요
};
// console.log(person.first name);  // 에러가 나요!
console.log(person["first name"]);  // "철수" (이렇게 해야 해요)

객체의 이름표에 띄어쓰기나 특수문자가 있으면 점 방법을 사용할 수 없어요. 이런 경우에는 반드시 대괄호 방법을 사용해야 해요. 가능하면 이름표를 만들 때 띄어쓰기 대신 camelCase(firstName)나 밑줄(first_name)을 사용하는 것이 좋아요.

❌ 실수 3: 없는 순서 번호나 이름표에 접근하려고 하기

let numbers = [10, 20, 30];
console.log(numbers[5]);     // undefined (5번째는 없어요)

let car = {brand: "현대"};
console.log(car.color);      // undefined (color 이름표는 없어요)

없는 배열 순서 번호나 객체 이름표에 다가가면 에러가 나는 것이 아니라 undefined가 나와요. 이는 때로 문제를 찾기 어렵게 만들 수 있어요. 다가가기 전에 해당 순서 번호나 이름표가 존재하는지 확인하는 습관을 기르는 것이 좋아요.

📦 기본 연습문제

지금까지 배운 내용이 마음속에 잘 자리잡았는지, 몇 가지 연습을 통해 차근차근 확인해볼게요. 손으로 직접 써보면서 객체와 배열과 더 친해져보세요.

연습문제 1: 나의 정보를 객체로 하나의 변수에 담아보자

// 나의 모든 정보를 이름표와 함께 하나의 객체에 담기
let myInfo = {
    name: "이하늘",        // 내 이름
    age: 11,               // 내 나이  
    hobby: "독서",         // 내 취미
    favoriteColor: "파랑"  // 내가 좋아하는 색
};

// 객체에서 각 정보를 이름표로 꺼내서 확인하기
console.log(myInfo.name);          // "이하늘"이 나타나요
console.log(myInfo.hobby);         // "독서"가 나타나요
console.log(myInfo.favoriteColor); // "파랑"이 나타나요

이 연습을 통해 객체의 기본적인 생성과 접근 방법을 익힐 수 있어요.

연습문제 2: 좋아하는 동물 3마리를 배열로 순서대로 정리해보자

// 좋아하는 동물들을 순서대로 배열에 담기
let favoriteAnimals = ["강아지", "고양이", "햄스터"];

// 배열에서 각 동물을 순서 번호로 꺼내서 확인하기
console.log(favoriteAnimals[0]);  // "강아지" (첫 번째)
console.log(favoriteAnimals[1]);  // "고양이" (두 번째)
console.log(favoriteAnimals[2]);  // "햄스터" (세 번째)

// 배열에 몇 마리가 들어있는지 확인하기
console.log(favoriteAnimals.length); // 3

이 문제는 배열의 생성과 순서 번호를 통한 접근을 연습하는 데 도움이 돼요.

연습문제 3: 객체 안에 배열이 들어간 우리 가족 정보를 만들어보자

// 객체와 배열을 조합한 복합 구조 만들기
let myFamily = {
    familyName: "김가족",                    // 가족 이름
    memberCount: 4,                          // 가족 구성원 수
    members: ["아빠", "엄마", "나", "동생"]  // 가족 구성원들 (배열!)
};

// 복합 구조에서 정보 꺼내기
console.log(myFamily.familyName);  // "김가족"이 나타나요
console.log(myFamily.members[2]);  // "나"가 나타나요 (세 번째 구성원)
console.log(myFamily.members);     // ["아빠", "엄마", "나", "동생"]이 모두 나타나요

이 연습문제를 통해 객체와 배열을 조합한 복합 구조를 만들고 접근하는 방법을 익힐 수 있어요.

🤔 연습문제

기본 연습을 마치셨다면, 이제 조금 더 깊이 있는 문제들을 통해 객체와 배열에 대한 이해를 차분히 확인해볼게요. 물 한 잔 놓고 천천히 생각해보세요.

문제 1: 배열에서 특정 값 찾기

다음 코드에서 "바나나"를 출력하려면?

let fruits = ["사과", "바나나", "포도"];

정답: console.log(fruits[1]);

해설: 배열 순서 번호는 0부터 시작하므로, "사과"는 0번, "바나나"는 1번, "포도"는 2번 순서 번호에 있어요.

문제 2: 객체에서 특정 속성 접근하기

다음 객체에서 나이를 출력하려면?

let person = {
    name: "민수",
    age: 13,
    school: "행복초등학교"
};

정답: console.log(person.age); 또는 console.log(person["age"]);

해설: 객체의 값에 다가갈 때는 점 방법이나 대괄호 방법 둘 다 사용 가능해요. 상황에 따라 적절한 방법을 선택할 수 있어요.

🔄 이전 단원들 복습하기

객체와 배열을 잘 이해했다면, 이제 저번에 배운 기본 데이터 타입들에 대해서도 기억하고 있는지 확인해볼까요?

복습문제 1: 기본 데이터 타입 vs 참조형

Number, String, Boolean은 기본형이고, Object, Array는 참조형이에요. 이 둘의 차이점은 무엇인가요?

정답: 기본형은 변수에 값 자체가 저장되고, 참조형은 값이 있는 위치(주소)가 저장돼요.

해설: 이 차이는 나중에 변수를 복사하거나 함수에 전달할 때 중요한 차이를 만들어요.

복습문제 2: null과 undefined 구별하기

다음 중 어떤 경우에 undefined가 나올까요?

let obj = {name: "철수"};
console.log(obj.age);    // A
console.log(obj.name);   // B

정답: A

해설: 객체에 존재하지 않는 속성에 다가가면 undefined가 나와요. age 속성은 정의되지 않았으므로 undefined가 출력돼요.

💡 심화 복습 문제

이제 정말 깊이 있게 객체와 배열을 이해했는지 확인해보는 문제들이에요.

심화문제 1: 객체와 배열의 차이점 설명하기

객체와 배열의 차이점을 설명해보세요.

정답: 객체는 이름(키)으로 값을 찾고, 배열은 순서(인덱스)로 값을 찾아요. 객체는 {}, 배열은 []로 만들어요.

해설: 이 차이를 이해하면 언제 어떤 자료 구조를 사용해야 하는지 판단할 수 있어요.

심화문제 2: 올바른 배열 접근법 찾기

다음 중 올바른 배열 접근법은?

A) arr.0 B) arr[0] C) arr(0) D) arr{0}

정답: B

해설: 배열의 값에 다가갈 때는 대괄호 []를 사용해요.

심화문제 3: 존재하지 않는 인덱스 접근 결과

이 코드의 결과는?

let data = ["a", "b", "c"];
console.log(data[3]);

정답: undefined

해설: 배열에 3번 인덱스(4번째 요소)는 없으므로 undefined가 나와요.

심화문제 4: 객체에 새 속성 추가하는 방법

객체에 새로운 속성을 추가하는 방법 2가지를 써보세요.

정답: obj.newKey = value; 또는 obj["newKey"] = value;

해설: 두 방법 모두 객체에 새로운 속성을 자연스럽게 추가할 수 있어요.

심화문제 5: 배열의 typeof 결과

왜 배열도 typeof를 하면 "object"가 나올까요?

정답: 자바스크립트에서 배열은 특별한 종류의 객체이기 때문이에요. 배열과 객체를 구별하려면 다른 특별한 방법이 필요해요.

해설: 이는 자바스크립트의 특성 중 하나로, 배열을 더 정확히 판별하려면 다른 방법을 사용해야 해요.

✅ 소단원 검토 체크리스트

이 단원에서 배운 내용들을 모두 이해했는지 확인해볼게요!

체크 항목	확인
객체와 배열이 무엇인지 쉬운 말로 설명할 수 있어요	☐
객체와 배열을 만드는 문법을 알고 있어요	☐
객체의 속성과 배열의 요소에 접근할 수 있어요	☐
배열 인덱스가 0부터 시작한다는 것을 알고 있어요	☐
객체와 배열을 조합한 복합 구조를 만들 수 있어요	☐
언제 객체를, 언제 배열을 사용해야 하는지 알아요	☐
자주하는 실수들을 피할 수 있어요	☐

지금까지 자바스크립트의 복합 데이터 타입인 객체와 배열에 대해 차근차근 알아봤어요. 이 두 가지 데이터 구조를 잘 활용하면 복잡한 실제 세상의 정보를 프로그램에서 체계적으로 표현하고 관리할 수 있게 돼요. 다음 시간에는 변수의 이름을 잘 짓는 방법에 대해 배워볼 예정이에요!

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

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

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

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

💻 무료로 학습하러 가기

---