7. 여러 개 모아두기 (배열)/7.1 배열 상자 만들기

7.1.2 배열 만들고 사용하기 - 나만의 정리함 완성하기

thejavascript4kids 2025. 7. 7. 04:53

📘 7.1.2 배열 만들고 사용하기 - 나만의 정리함 완성하기

안녕하세요, 여러분. 지난 시간에 배열이라는 아름다운 정리함이 무엇인지 알아보았다면, 이번에는 본격적으로 정리함을 만들고 자연스럽게 다루는 방법을 배워보겠습니다. 마치 도자기를 빚는 장인이 흙으로 그릇을 만들어가듯이, 정리함도 처음엔 빈 상태로 시작해서 하나씩 물건을 채워나가거나, 필요할 때마다 물건을 바꿔가며 우리가 원하는 모습으로 만들 수 있습니다.

오늘은 정리함을 만드는 여러 가지 방법부터 시작해서, 정리함 안의 물건들을 섬세하게 바꾸고, 정리함의 정보를 지혜롭게 활용하는 방법들을 차근차근 배워보겠습니다. 이 과정을 통해 여러분은 정보를 더욱 능숙하게 다루는 진정한 프로그래머가 될 것입니다.

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

정리함을 자유자재로 다루기 위해 알아야 할 중요한 단어들을 우리가 아는 친근한 말로 바꿔서 살펴보겠습니다.

단어 부드러운 설명
배열 만들기 새로운 정리함을 만드는 것입니다. 빈 정리함으로 만들거나 물건과 함께 만들 수 있어요.
요소 가져오기 정리함의 특정 자리에 있는 물건을 조심스럽게 꺼내서 보는 것입니다.
요소 바꾸기 정리함의 특정 자리에 있는 물건을 다른 물건으로 정성스럽게 바꾸는 것입니다.
배열 길이 정리함에 들어있는 물건의 총 개수입니다. 몇 개의 보물이 있는지 세는 것처럼요.

✨ 배열 만들기와 다루기의 핵심 개념

배열을 다루는 것은 마치 조용한 도서관의 서가를 정리하는 것과 같습니다. 이 서가는 여러 가지 특별한 능력을 가지고 있어요.

첫 번째로, 배열은 여러 가지 방법으로 만들 수 있습니다. 처음부터 책들을 넣어서 만들 수도 있고, 빈 서가로 시작해서 나중에 하나씩 책을 채워넣을 수도 있어요. 실제 생활에서 책장을 정리할 때와 같습니다.

두 번째로, 배열의 어떤 자리든 자연스럽게 책을 바꿸 수 있습니다. 마치 서가의 특정 칸에 있는 책을 다른 책으로 바꿔놓는 것처럼요. 이때 다른 칸의 책들은 전혀 영향을 받지 않습니다.

세 번째로, 배열은 자신의 상태를 조용히 알려줄 수 있습니다. 몇 개의 책이 들어있는지, 어떤 책들이 어느 자리에 있는지 언제든지 확인할 수 있어요.

조용한 이야기: 할머니의 보석함 관리

배열의 다양한 기능을 할머니의 보석함 관리에 비유해보겠습니다.

할머니는 평생에 걸쳐 모은 소중한 보석들을 가지고 계셨어요. 보석함을 두 가지 방법으로 준비할 수 있었답니다. 첫 번째는 처음부터 보석이 들어있는 완성된 보석함을 사용하는 것이고, 두 번째는 빈 보석함을 준비해서 하나씩 소중한 보석을 넣어가는 것이었죠.

보석함을 사용하다 보면 특정 칸의 보석을 바꿔야 할 때가 있었어요. 예를 들어, 계절에 맞는 보석으로 바꾸거나, 특별한 날을 위해 더 아름다운 보석으로 교체하는 것처럼요. 이때 해당 칸만 열어서 보석을 바꾸면 되고, 다른 칸의 보석들은 그대로 안전하게 있었습니다.

또한 이 특별한 보석함에는 작은 표시가 있어서, 전체 칸이 몇 개인지, 각 칸에 무엇이 들어있는지 언제든지 확인할 수 있었어요. 심지어 "첫 번째 칸에 어떤 보석이 들어있지?"라고 생각하면 바로 답을 알 수 있기도 했답니다.

🎯 왜 배열 만들기와 다루기를 배워야 할까요?

그렇다면 왜 이런 다양한 배열 방법을 배워야 할까요?

실제 프로그래밍에서는 처음부터 모든 정보가 준비되어 있는 경우는 거의 없습니다. 대부분 빈 목록으로 시작해서 사용자가 입력하는 정보나 인터넷에서 받아오는 정보를 하나씩 추가하게 됩니다. 예를 들어, 게임에서 플레이어가 얻은 아이템 목록이나, 쇼핑몰에서 장바구니에 담은 상품 목록 같은 것들이죠.

또한 정보는 계속 바뀌기 때문에 기존 물건을 수정하는 능력도 정말 중요합니다. 친구의 전화번호가 바뀌었을 때 연락처를 업데이트하거나, 게임에서 플레이어의 점수가 올라갔을 때 기록을 갱신하는 것처럼 말이에요.

마지막으로 배열의 현재 상태를 파악하는 능력은 올바른 판단을 내리는 데 꼭 필요합니다. 배열이 비어있는지, 원하는 정보가 들어있는지, 처리해야 할 항목이 몇 개나 되는지 알아야 적절한 처리를 할 수 있거든요.

⚙️ 배열 만들기와 다루기의 기본 사용법 배우기

배열을 만들고 다루는 기본 방법들을 살펴보겠습니다.

배열을 만드는 여러 가지 방법:

// 방법 1: 물건과 함께 만들기
let fruits = ["사과", "바나나", "오렌지"];

// 방법 2: 빈 배열로 시작하기
let emptyArray = [];

// 방법 3: 크기를 미리 정하기 (조금 어려운 방법)
let fixedArray = new Array(5); // 5개 자리를 가진 빈 배열

배열의 요소를 다루는 기본 방법들:

// 특정 자리의 요소 가져오기
let firstFruit = fruits[0];

// 특정 자리의 요소 바꾸기
fruits[1] = "포도";

// 배열의 길이 확인하기
let count = fruits.length;

// 전체 배열 내용 확인하기
console.log(fruits);

🧪 직접 해보면서 배우기

이제 실제 예제를 통해 배열 만들기와 다루기의 다양한 방법을 차근차근 알아보겠습니다.

🔹 예제 1: 빈 정리함에서 시작하는 색깔 모으기

첫 번째 예제에서는 빈 배열로 시작해서 하나씩 요소를 추가하는 방법을 배워보겠습니다. 마치 빈 팔레트에 물감을 하나씩 조심스럽게 짜내는 것처럼요.

// 빈 색깔 팔레트로 시작하기
let colorPalette = []; // 완전히 빈 배열로 시작해요

// 처음 상태를 확인하기
console.log("처음 팔레트 상태:");               
console.log(colorPalette);                      // 빈 배열을 보여줘요
console.log("색깔 개수: " + colorPalette.length + "개"); // 0개일 거예요

// 색깔을 하나씩 소중히 추가해보기
console.log("\n색깔 추가하기:");
colorPalette[0] = "빨강";                       // 0번 자리에 빨간색을 정성스럽게
console.log("빨강 추가 후: " + colorPalette);   

colorPalette[1] = "파랑";                       // 1번 자리에 파란색을 정성스럽게
console.log("파랑 추가 후: " + colorPalette);   

colorPalette[2] = "노랑";                       // 2번 자리에 노란색을 정성스럽게
console.log("노랑 추가 후: " + colorPalette);   

// 최종 상태를 확인하기
console.log("\n완성된 팔레트:");                
console.log(colorPalette);                      
console.log("총 색깔 개수: " + colorPalette.length + "개");

이 예제를 차근차근 따라가보면, 빈 배열에서 시작해서 각 단계마다 어떻게 변하는지 확인할 수 있습니다. 처음엔 아무것도 없던 배열이 요소를 하나씩 추가할 때마다 점점 채워지고, 길이도 자동으로 늘어나는 모습을 볼 수 있어요.

🔹 예제 2: 과일 가게의 재고 관리하기

두 번째 예제에서는 이미 있는 배열의 요소를 바꾸는 방법을 배워보겠습니다. 과일 가게에서 품절된 과일을 새로운 과일로 조심스럽게 교체하는 상황을 해보겠습니다.

// 과일 가게의 초기 재고 목록
let fruitStore = ["사과", "바나나", "오렌지", "포도"];

// 현재 재고 상황을 확인
console.log("과일 가게 오픈! 오늘의 재고:");       
console.log(fruitStore);                         
console.log("총 과일 종류: " + fruitStore.length + "가지"); 

// 고객이 바나나를 모두 사가셨어요!
console.log("\n바나나가 품절되었습니다. 딸기로 조심스럽게 교체합니다."); 
console.log("교체 전 두 번째 과일: " + fruitStore[1]);      

fruitStore[1] = "딸기";                           // 1번 자리의 바나나를 딸기로 정성스럽게 바꿔요

console.log("교체 후 두 번째 과일: " + fruitStore[1]);      
console.log("업데이트된 재고: " + fruitStore);              

// 오렌지도 키위로 바꿔보기
console.log("\n오렌지도 키위로 교체해보겠습니다.");              
fruitStore[2] = "키위";                          // 2번 자리의 오렌지를 키위로 정성스럽게 바꿔요

// 최종 재고 상태를 확인
console.log("\n오늘의 최종 재고 상황:");                    
for(let i = 0; i < fruitStore.length; i++) {    // 모든 과일을 하나씩 확인해요
    console.log((i + 1) + "번째 과일: " + fruitStore[i]);   
}
console.log("총 " + fruitStore.length + "가지 과일이 있습니다.");

이 예제에서는 배열의 특정 자리 요소를 바꾸는 과정과 그 결과를 단계별로 확인할 수 있습니다. 중요한 것은 하나의 요소만 바꿔도 전체 배열이 업데이트되고, 다른 자리의 요소들은 영향을 받지 않는다는 점입니다.

🔹 예제 3: 학급 점수 관리하기

세 번째 예제에서는 배열의 정보를 활용하여 더 섬세한 작업을 수행하는 방법을 알아보겠습니다. 우리 반의 시험 점수를 정성스럽게 관리하는 시스템을 만들어보겠습니다.

// 우리 반 수학 시험 점수를 소중히 기록
let mathScores = [85, 92, 78, 96, 88];

// 전체 점수 상황을 확인
console.log("우리 반 수학 시험 결과:");            
console.log(mathScores);                          
console.log("시험 본 학생 수: " + mathScores.length + "명"); 

// 첫 번째와 마지막 학생 점수를 확인
let firstStudent = mathScores[0];                 // 첫 번째 학생의 점수
let lastStudentIndex = mathScores.length - 1;    // 마지막 자리 번호를 계산
let lastStudent = mathScores[lastStudentIndex];  // 마지막 학생의 점수

console.log("\n개별 점수 확인:");                  
console.log("첫 번째 학생 점수: " + firstStudent + "점"); 
console.log("마지막 학생 점수: " + lastStudent + "점");   

// 세 번째 학생의 점수 정정 (78점 → 95점)
console.log("\n점수 정정이 있습니다!");              
console.log("세 번째 학생 원래 점수: " + mathScores[2] + "점"); 

mathScores[2] = 95;                               // 2번 자리의 점수를 새로운 점수로 정성스럽게 바꿔요

console.log("세 번째 학생 정정 점수: " + mathScores[2] + "점"); 

// 전체 학생의 점수를 하나씩 발표
console.log("\n최종 점수 발표:");                    
for(let i = 0; i < mathScores.length; i++) {     // 모든 학생을 확인해요
    let studentNumber = i + 1;                    // 1번부터 시작하도록 1을 더해요
    console.log(studentNumber + "번 학생: " + mathScores[i] + "점"); 
}

// 수정된 전체 점수 목록을 확인
console.log("\n최종 점수 목록: " + mathScores);

이 예제는 배열의 길이 정보를 활용해서 마지막 요소를 안전하게 찾는 방법과, 반복문을 사용해서 배열의 모든 요소를 정성스럽게 처리하는 방법을 보여줍니다. 실제 데이터 관리에서 자주 사용되는 방법이에요.

🔄 배열 만들기와 다루기 과정 정리하기

지금까지 배운 배열 조작 과정을 차례차례 정리해보겠습니다.

첫 번째 단계는 배열 만들기 계획 세우기입니다. 처음부터 요소를 넣을지, 빈 배열로 시작해서 나중에 채울지, 어떤 종류의 정보를 담을지 미리 생각해보세요.

두 번째 단계는 배열 만들기입니다. 계획에 따라 적절한 방법으로 배열을 만듭니다. 요소와 함께 만들거나 빈 배열로 시작할 수 있어요.

세 번째는 요소 넣기와 바꾸기 단계입니다. 인덱스를 사용해서 원하는 자리에 요소를 넣거나 기존 요소를 새로운 요소로 바꿉니다. 이때 인덱스 범위를 확인하는 것이 중요해요.

네 번째는 배열 상태 확인 단계입니다. .length로 배열의 길이를 확인하고, console.log로 전체 배열이나 특정 자리의 요소를 출력해서 원하는 대로 작동하는지 점검해요.

마지막으로 배열 정보 활용 단계입니다. 배열의 길이나 특정 자리의 요소를 이용해서 더 복잡한 작업을 수행하거나 의사결정을 내립니다.

🧚‍♀️ 이야기로 다시 배우기: 정성스러운 서재 만들기

지금까지 배운 내용을 하나의 잔잔한 이야기로 다시 정리해볼까요?

어느 날, 젊은 문학가 민지는 선생님으로부터 특별한 임무를 받았습니다. "디지털 서재를 직접 만들어서 관리해보라"는 것이었죠.

민지는 두 가지 방법 중 하나를 선택할 수 있었어요. 첫 번째는 미리 만들어진 책이 들어있는 완성된 서재를 사용하는 것이고, 두 번째는 빈 서재를 만들어서 직접 책을 모으는 것이었어요.

민지는 차분한 성격이었기 때문에 빈 서재로 시작하기로 했습니다. 서재를 만들자마자 화면에 "책 개수: 0권"이라고 표시되었어요.

첫 번째 달에 민지는 소설책을 발견했습니다. "첫 번째 자리에 넣어주세요"라고 조용히 말하자 서재가 부드럽게 반응하며 책을 받아들였어요. 화면이 "책 개수: 1권"으로 바뀌었죠.

두 번째 달에는 시집을, 세 번째 달에는 에세이집을 찾았습니다. 그때마다 서재에 "두 번째 자리에 넣어주세요", "세 번째 자리에 넣어주세요"라고 정중히 말하며 책들을 차례로 정리했어요.

어느 날, 민지의 시집이 새로운 판본으로 나왔습니다. 하지만 걱정할 필요가 없었어요. "두 번째 자리의 책을 새로운 시집으로 바꿔주세요"라고 부드럽게 말하자, 서재가 조심스럽게 책을 교체해주었거든요. 다른 자리의 책들은 전혀 영향을 받지 않았습니다.

이제 민지는 언제든지 "전체 책 목록을 보여주세요"라고 말하면 모든 책을 확인할 수 있고, "몇 권의 책이 있나요?"라고 물어보면 정확한 개수를 알 수 있게 되었답니다.

배열 다루기도 이와 같습니다. 우리의 정보를 정성스러운 서재처럼 자연스럽게 관리하면서, 필요에 따라 부드럽게 요소를 추가하고, 수정하고, 확인할 수 있는 것입니다.

🧠 자주 하는 실수와 조심할 점

배열을 만들고 다룰 때 자주 하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있습니다.

❌ 실수 1: 중간을 건너뛰고 요소 넣기

첫 번째로 많이 하는 실수는 배열의 중간 위치를 건너뛰고 요소를 넣는 것입니다.

let colors = []; // 빈 배열로 시작

// ❌ 잘못된 방법: 0, 1번을 건너뛰고 바로 5번에 넣기
colors[5] = "빨강";

console.log(colors); // [empty × 5, "빨강"]
console.log("길이: " + colors.length); // 6
console.log("1번 위치: " + colors[1]); // undefined

// ✅ 올바른 방법: 순서대로 채우기
let correctColors = [];
correctColors[0] = "빨강";
correctColors[1] = "파랑";
correctColors[2] = "노랑";

console.log(correctColors); // ["빨강", "파랑", "노랑"]

중간을 건너뛰면 빈 자리가 생기고, 이 자리들은 undefined 값을 가지게 되어 나중에 문제를 일으킬 수 있습니다.

❌ 실수 2: 배열 길이와 마지막 위치 헷갈리기

두 번째 실수는 배열의 길이와 마지막 위치를 혼동하는 것입니다.

let fruits = ["사과", "바나나", "오렌지"];

// ❌ 잘못된 이해
console.log("길이: " + fruits.length); // 3
console.log("마지막 과일: " + fruits[3]); // undefined (3번은 없어요!)

// ✅ 올바른 이해
console.log("길이: " + fruits.length); // 3
console.log("마지막 위치: " + (fruits.length - 1)); // 2
console.log("마지막 과일: " + fruits[fruits.length - 1]); // "오렌지"

배열의 길이가 3이면 유효한 위치는 0, 1, 2번이고, 마지막 위치는 항상 길이 - 1임을 기억하세요.

❌ 실수 3: 전체 배열을 바꾸려다가 실수하기

세 번째 실수는 배열의 일부만 수정하려다가 전체 배열을 교체해버리는 것입니다.

let scores = [85, 90, 78];

// ❌ 잘못된 방법: 전체 배열을 바꿔버림
scores = [95]; // 첫 번째 점수만 바꾸려 했는데 전체가 바뀜!
console.log(scores); // [95] (다른 점수들이 모두 사라짐)

// ✅ 올바른 방법: 특정 자리만 수정
let correctScores = [85, 90, 78];
correctScores[0] = 95; // 첫 번째 점수만 바꾸기
console.log(correctScores); // [95, 90, 78] (다른 점수들은 유지됨)

특정 자리의 요소만 바꾸려면 배열이름[위치] = 새값 형태를 사용해야 합니다.

이제 여러분께 연습문제를 드리려고 합니다. 잠시 마음을 차분히 하시고 지금까지 배운 내용들을 떠올려보세요. 배열을 만들고 다루는 과정이 처음에는 조금 복잡하게 느껴지실 수도 있지만, 사실 우리가 일상에서 서랍을 정리하고 물건을 관리하는 것과 다르지 않습니다. 필요할 때 물건을 넣고, 때로는 바꾸고, 현재 상태를 확인하는 것, 그것이 바로 배열 관리의 본질입니다. 연습문제를 통해 이 자연스러운 과정을 조금 더 친근하게 느껴보시길 바랍니다.

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

이제 배운 내용을 연습문제를 통해 차근차근 익혀보겠습니다.

Q1. 빈 배열을 만들고 좋아하는 음식 3개를 차례로 넣어보세요.

여러분이 직접 해보세요! 힌트: 빈 배열 []로 시작해서 0번, 1번, 2번 자리에 음식을 넣어보세요.

정답 보기 
let favoriteFoods = []; // 빈 배열로 시작

// 음식을 하나씩 추가하기
favoriteFoods[0] = "피자";
favoriteFoods[1] = "치킨";
favoriteFoods[2] = "햄버거";

console.log("좋아하는 음식들:");
console.log(favoriteFoods);
console.log("음식 개수: " + favoriteFoods.length + "가지");
console.log("가장 좋아하는 음식: " + favoriteFoods[0]);

Q2. 동물 배열을 만들고 두 번째 동물을 다른 동물로 바꿔보세요.

힌트: 두 번째 자리는 1번 위치예요!

정답 보기 
let animals = ["사자", "호랑이", "곰", "코끼리"];

console.log("원래 동물들:");
console.log(animals);

// 두 번째 동물 변경
console.log("두 번째 동물을 바꿔보겠습니다.");
console.log("원래 두 번째 동물: " + animals[1]);

animals[1] = "기린"; // 호랑이를 기린으로 변경

console.log("바뀐 두 번째 동물: " + animals[1]);
console.log("최종 동물 목록:");
console.log(animals);

Q3. 숫자 배열의 길이를 이용해서 마지막 숫자를 출력해보세요.

힌트: 마지막 위치는 배열.length - 1예요!

정답 보기 
let numbers = [10, 20, 30, 40, 50];

console.log("숫자 배열:");
console.log(numbers);
console.log("배열 길이: " + numbers.length);

// 마지막 숫자를 찾기
let lastIndex = numbers.length - 1;
let lastNumber = numbers[lastIndex];

console.log("마지막 위치: " + lastIndex + "번");
console.log("마지막 숫자: " + lastNumber);

📚 이전 단원 복습 문제

7단원까지 왔으니, 이전에 배운 중요한 내용들을 복습해볼까요?

복습 1) 함수와 반복문 (4-5단원 복습)

// 다음 함수를 완성해서 1부터 n까지의 합을 구해보세요
function calculateSum(n) {
    let sum = 0;
    for(let i = 1; i <= n; i++) {
        sum = sum + i;
    }
    return sum;
}

let result = calculateSum(5);
console.log("1부터 5까지의 합: " + result);  // 이 출력 결과는?

정답: "1부터 5까지의 합: 15"가 출력됩니다 (1+2+3+4+5 = 15).

복습 2) 조건문과 변수 (1-3단원 복습)

// 점수에 따라 등급을 정하는 코드를 작성해보세요
let score = 85;
let grade = "";

if(score >= 90) {
    grade = "A등급";
} else if(score >= 80) {
    grade = "B등급";
} else if(score >= 70) {
    grade = "C등급";
} else {
    grade = "D등급";
}

console.log("점수 " + score + "점은 " + grade + "입니다.");

정답: "점수 85점은 B등급입니다."가 출력됩니다.

지금까지 배열을 만들고 자유자재로 다루는 방법을 차근차근 알아보았습니다. 이제 여러분은 빈 배열로 시작해서 요소를 채워나가거나, 기존 배열의 요소를 필요에 따라 수정하고, 배열의 정보를 활용해서 더 복잡한 작업을 수행할 수 있게 되었어요. 마치 숙련된 정리 정돈 전문가가 된 것처럼, 정보를 자연스럽고 효율적으로 관리할 수 있는 능력을 갖추게 된 것입니다. 다음 시간에는 배열에 새로운 요소를 추가하고 제거하는 더 편리한 방법들을 배워볼 예정입니다. 오늘도 정말 잘하셨습니다! 💙

✅ 학습 완료 체크리스트

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

학습 내용 이해했나요?
배열 만들기 다양한 방법 ✅
배열 요소 가져오기와 바꾸기 ✅
배열 길이 활용하기 ✅
자주 하는 실수들 ✅
실전 예제 이해 ✅

📂 마무리 정보

오늘 배운 7.1.2 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 흥미로운 내용으로 만나요!

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


🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작