7.1.1 배열이 뭐예요? - 여러 개의 물건을 담는 똑똑한 상자

📘 7.1.1 배열이 뭐예요? - 여러 개의 물건을 담는 똑똑한 상자

안녕하세요, 여러분. 오늘은 정말 아름다운 새로운 도구를 함께 배워보겠습니다. 지금까지 우리는 변수 하나에 정보 하나씩만 담아왔는데요, 이제는 하나의 특별한 상자에 여러 개의 정보를 정성스럽게 넣을 수 있는 방법을 알아보겠습니다. 바로 '배열'이라는 놀라운 도구입니다.

혹시 여러분의 방에 작은 서랍장이 있으신가요? 아니면 연필꽂이에 색연필들을 정성스럽게 꽂아두신 적이 있으신가요? 배열도 이와 비슷합니다. 여러 개의 정보들을 차례차례 정리해서 보관하는 자연스러운 방법이에요. 마치 투명한 보석함에 여러 가지 보석을 순서대로 넣어둔 것처럼 말입니다.

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

배열을 배우는 데 필요한 중요한 단어들을 우리가 아는 친근한 말로 바꿔서 알아보겠습니다.

단어	부드러운 설명
배열 (Array)	여러 개의 정보를 차례대로 담아두는 특별한 상자입니다. 마치 보석함의 각 칸처럼요.
요소 (Element)	상자 안에 들어있는 각각의 소중한 정보 하나하나를 말합니다.
인덱스 (Index)	상자에서 각 정보가 있는 자리를 나타내는 번호입니다. (0번부터 시작해요!)
길이 (Length)	상자 안에 들어있는 정보의 총 개수입니다. 몇 개의 보석이 있는지 세는 것처럼요.

✨ 배열이 무엇인지 알아보기

배열을 처음 만난다면 조금 어려워 보일 수 있지만, 사실은 우리가 매일매일 하는 정리하기와 같습니다. 색연필을 연필꽂이에 꽂고, 옷을 옷장에 정리하고, 책가방에 준비물을 넣는 것처럼 말이에요.

배열의 가장 아름다운 점은 여러 개의 정보를 하나의 이름으로 자연스럽게 관리할 수 있다는 것입니다. 예를 들어서, 친구들의 이름을 각각 다른 변수에 넣지 않고, friends라는 하나의 큰 상자에 모든 친구 이름을 소중히 담을 수 있어요.

또한 상자 안의 정보들은 순서가 정해져 있습니다. 첫 번째, 두 번째, 세 번째... 이런 식으로 순서를 정할 수 있죠. 다만 컴퓨터 세계에서는 순서를 0번부터 센다는 점만 기억하시면 됩니다!

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

배열을 좀 더 친근하게 이해하기 위해 할머니의 보석함 이야기를 들려드리겠습니다.

우리 동네에 수빈이라는 친구가 있었습니다. 수빈이는 할머니로부터 아주 특별한 보석함을 물려받았어요. 그런데 수빈이는 여러 가지 작은 보물들을 가지고 있었지만, 항상 어디에 무엇을 두었는지 잊어버려서 고민이 많았답니다.

할머니의 보석함은 정말 신기했어요. 투명한 유리로 만들어져서 안에 있는 보물들이 한눈에 보였고, 작은 칸막이가 있어서 보물들이 일렬로 정리되어 있었거든요.

첫 번째 칸에는 빨간 구슬, 두 번째 칸에는 파란 구슬, 세 번째 칸에는 작은 열쇠가 들어있었답니다.

그런데 재미있는 점은 각 칸에 붙어있는 작은 번호표였어요. 1번이 아니라 0번부터 시작했거든요! 그래서 첫 번째 칸은 0번, 두 번째 칸은 1번, 세 번째 칸은 2번이 되는 거예요. 수빈이는 처음엔 조금 이상했지만, "아, 컴퓨터 세계에서는 0부터 세는구나!"라고 자연스럽게 받아들였답니다.

보석함 위에는 "총 3개"라고 적힌 작은 표시가 있어서, 보물이 몇 개 들어있는지 언제든지 확인할 수 있었어요. 이제 수빈이는 "2번 칸에 있는 보물을 주세요!"라고 말하기만 하면 원하는 보물을 바로 찾을 수 있게 되었답니다.

🎯 왜 배열을 배워야 할까요?

그렇다면 왜 배열을 사용해야 할까요? 실제 예를 들어서 자연스럽게 설명해드리겠습니다.

만약 여러분이 좋아하는 동물 다섯 마리를 기억해야 한다면, 배열 없이는 이렇게 해야 할 거예요.

let animal1 = "강아지";
let animal2 = "고양이"; 
let animal3 = "토끼";
let animal4 = "햄스터";
let animal5 = "새";

참 많은 변수가 필요하네요. 변수가 너무 많아져서 관리하기 어려워요. 하지만 배열을 사용하면 이 모든 동물들을 하나의 아름다운 목록으로 만들 수 있어요.

let favoriteAnimals = ["강아지", "고양이", "토끼", "햄스터", "새"];

참 간단하고 보기 좋죠? 이처럼 배열은 비슷한 종류의 정보를 자연스럽게 정리할 때 정말 유용합니다.

⚙️ 배열의 기본 사용법 배우기

배열을 만드는 기본 문법은 다음과 같습니다.

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

주요 기호들:

• 대괄호 [ ]: 배열을 만들 때 사용하는 특별한 기호입니다
• 쉼표 ,: 각 정보들을 부드럽게 구분해주는 구분 기호입니다
• 인덱스 [번호]: 특정 자리의 정보를 꺼낼 때 사용해요
• .length: 배열 안에 정보가 몇 개인지 확인할 때 사용해요

여러 가지 배열 만들기:

let numbers = [1, 2, 3, 4, 5];           // 숫자 배열
let colors = ["빨강", "파랑", "노랑"];     // 색깔 배열
let emptyArray = [];                     // 빈 배열

🧪 직접 해보면서 배우기

이제 실제 예제를 통해 배열이 어떻게 동작하는지 차근차근 살펴보겠습니다.

🔹 예제 1: 나의 첫 번째 배열 만들기

우리의 첫 번째 예제에서는 좋아하는 과일들을 배열에 담아서 하나씩 확인해보는 과정을 함께 따라해보겠습니다.

// 좋아하는 과일들을 배열에 소중히 담기
let myFruits = ["사과", "바나나", "오렌지", "딸기"];

// 만든 배열 전체를 확인하기
console.log("내가 좋아하는 과일들:"); 
console.log(myFruits);                  

// 과일이 모두 몇 개인지 세어보기
console.log("과일 종류: " + myFruits.length + "가지"); 

// 각 과일을 하나씩 확인하기
console.log("첫 번째로 좋아하는 과일: " + myFruits[0]); 
console.log("두 번째로 좋아하는 과일: " + myFruits[1]); 
console.log("세 번째로 좋아하는 과일: " + myFruits[2]); 
console.log("네 번째로 좋아하는 과일: " + myFruits[3]); 

이 예제를 차근차근 살펴보면, 먼저 대괄호 안에 과일 이름들을 쉼표로 구분해서 배열을 만듭니다. 그다음 console.log로 전체 배열을 확인하죠. .length를 사용해서 배열에 몇 개의 정보가 들어있는지 확인하고, 마지막으로 인덱스를 사용해서 각 자리의 과일 이름을 하나씩 꺼내서 보여줍니다.

🔹 예제 2: 숫자 배열로 놀아보기

두 번째 예제에서는 글자가 아닌 숫자를 배열에 담아보겠습니다. 나만의 행운의 숫자들을 관리하는 방법을 알아보겠습니다.

// 나의 행운의 숫자들을 배열에 정성스럽게 저장하기
let luckyNumbers = [7, 3, 11, 21, 9];

// 행운의 숫자 목록 확인하기
console.log("나의 행운의 숫자들:");     
console.log(luckyNumbers);              

// 몇 개의 행운의 숫자가 있는지 확인하기
console.log("행운의 숫자 개수: " + luckyNumbers.length + "개"); 

// 가장 행운의 숫자 확인하기 (첫 번째)
console.log("가장 행운의 숫자: " + luckyNumbers[0]); 

// 마지막 행운의 숫자 찾기
let lastIndex = luckyNumbers.length - 1;                       
console.log("마지막 행운의 숫자: " + luckyNumbers[lastIndex]); 

// 중간에 있는 숫자도 확인해보기
console.log("세 번째 행운의 숫자: " + luckyNumbers[2]); 

이 예제에서는 글자 대신 숫자를 배열에 담는 방법을 보여줍니다. 특히 마지막 정보에 접근하는 방법을 주목해보세요. 배열이름[배열길이 - 1]을 사용하면 항상 마지막 정보에 접근할 수 있어요.

🔹 예제 3: 우리 반 친구들 이름 관리하기

세 번째 예제에서는 좀 더 실용적인 사례로 친구들의 이름을 배열로 관리하는 방법을 알아보겠습니다.

// 우리 반 친구들 이름을 배열로 정성스럽게 만들기
let classmates = ["김철수", "이영희", "박민수", "최지은", "정한솔"];

// 반 친구들 명단 출력하기
console.log("우리 반 친구들:");           
console.log(classmates);                  

// 반 친구가 총 몇 명인지 확인하기
console.log("반 친구 수: " + classmates.length + "명"); 

// 가장 친한 친구 (첫 번째)
console.log("가장 친한 친구: " + classmates[0]); 

// 두 번째로 친한 친구
console.log("두 번째로 친한 친구: " + classmates[1]); 

// 새로운 친구도 확인해보기 (세 번째)
console.log("새로 사귄 친구: " + classmates[2]); 

// 전체 친구들을 소개하기
console.log("친구 소개:");                                      
console.log("0번째 친구: " + classmates[0] + "입니다.");         
console.log("1번째 친구: " + classmates[1] + "입니다.");         
console.log("2번째 친구: " + classmates[2] + "입니다.");         

이 예제는 실제 생활에서 자주 사용할 수 있는 형태의 배열을 보여줍니다. 친구들의 이름을 자연스럽게 관리하고, 필요할 때마다 특정 친구의 이름을 쉽게 찾아서 사용할 수 있어요.

🔄 배열 사용하는 순서 정리하기

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

첫 번째 단계는 어떤 정보를 담을지 계획하기입니다. 과일 이름인지, 숫자인지, 친구 이름인지 미리 정해두면 배열을 만들기 쉬워집니다.

두 번째 단계는 배열 만들기입니다. 대괄호 [] 안에 정보들을 쉼표로 구분해서 나열하고, 변수에 저장합니다.

세 번째는 배열 확인하기 단계입니다. console.log로 전체 배열을 출력해보고, .length로 몇 개의 정보가 들어있는지 확인해요.

마지막으로 필요한 정보 꺼내기 단계입니다. 인덱스를 사용해서 원하는 자리의 정보에 접근해요. 이때 첫 번째는 0번, 마지막은 개수-1번이라는 점을 기억하세요.

🧚‍♀️ 이야기로 다시 배우기: 작은 도서관의 책꽂이

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

우리 동네 작은 도서관에서 일어난 일이에요. 젊은 사서 김 선생님은 수많은 책들을 가지고 있었지만, 항상 어디에 무엇을 두었는지 기억하지 못해서 조용히 고민하고 있었어요.

어느 날, 경험 많은 박 관장님이 김 선생님에게 특별한 디지털 책꽂이 시스템을 설치해주었습니다. 이 시스템은 보통 책꽂이와는 달리 각 칸마다 작은 번호가 표시되어 있어서, 어떤 책이 몇 번째 칸에 있는지 컴퓨터로 확인할 수 있었어요.

박 관장님은 김 선생님에게 이렇게 부드럽게 설명해주었답니다. "이 책꽂이의 첫 번째 칸은 0번이라고 부른단다. 사람들은 보통 1번부터 세지만, 컴퓨터 시스템에서는 0번부터 센단다. 그래서 첫 번째 칸은 0번, 두 번째 칸은 1번이지."

김 선생님은 조용히 고개를 끄덕이며 자신의 책들을 정리하기 시작했어요. 0번 칸에는 소설책, 1번 칸에는 역사책, 2번 칸에는 과학책, 3번 칸에는 만화책을 소중히 넣었죠.

시스템 화면에는 "총 4권"이라고 적힌 숫자가 표시되었어요. 이제 김 선생님은 "0번 칸의 책이 필요해요"라고 컴퓨터에 말하기만 하면 원하는 책을 바로 찾을 수 있게 되었답니다.

배열도 이와 같습니다. 우리의 정보를 도서관 책꽂이처럼 자연스럽게 정리해서, 필요할 때마다 쉽게 찾아 사용할 수 있게 해주는 것입니다.

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

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

❌ 실수 1: 첫 번째가 1번이라고 생각하기

가장 많이 하는 실수는 배열의 첫 번째 정보가 1번이라고 생각하는 것입니다.

let colors = ["빨강", "파랑", "노랑", "초록"];

// ❌ 잘못된 생각: 첫 번째가 1번
console.log("첫 번째 색깔: " + colors[1]); // "파랑" (실제로는 두 번째!)

// ✅ 올바른 방법: 첫 번째는 0번
console.log("첫 번째 색깔: " + colors[0]); // "빨강" (정답!)
console.log("두 번째 색깔: " + colors[1]); // "파랑"
console.log("세 번째 색깔: " + colors[2]); // "노랑"
console.log("네 번째 색깔: " + colors[3]); // "초록"

이런 실수가 생기는 이유는 일상생활에서는 순서를 1번부터 세지만, 컴퓨터 프로그래밍 세계에서는 0번부터 세기 때문입니다.

❌ 실수 2: 배열을 변수에 저장하지 않기

두 번째로 많이 하는 실수는 배열을 만들고도 변수에 저장하지 않는 것입니다.

// ❌ 잘못된 방법: 배열을 변수에 저장하지 않음
console.log(["사과", "바나나", "오렌지"]); // 출력은 되지만...
// 나중에 다시 사용할 수 없어요!

// ✅ 올바른 방법: 배열을 변수에 저장
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits);        // 전체 배열 출력
console.log(fruits[0]);     // 첫 번째 과일
console.log(fruits[1]);     // 두 번째 과일

배열을 변수에 저장해야 나중에 다시 사용할 수 있습니다.

❌ 실수 3: 없는 자리에 접근하려고 하기

세 번째 실수는 배열의 크기보다 큰 인덱스를 사용하는 것입니다.

let animals = ["강아지", "고양이", "토끼"]; // 0, 1, 2번 자리만 있음

// ❌ 잘못된 접근: 없는 자리
console.log(animals[3]); // undefined (3번 자리는 없어요)
console.log(animals[5]); // undefined (5번 자리도 없어요)

// ✅ 올바른 접근: 존재하는 자리만 사용
console.log(animals[0]); // "강아지" (존재함)
console.log(animals[1]); // "고양이" (존재함)
console.log(animals[2]); // "토끼" (존재함)

// 마지막 자리 안전하게 찾기
console.log("마지막 동물: " + animals[animals.length - 1]); // "토끼"

없는 자리에 접근하면 undefined라는 값이 나오는데, 이는 "정보가 없어요"라는 뜻입니다. 배열의 유효한 인덱스는 항상 0부터 개수-1까지임을 기억하세요.

---

이제 여러분께 연습문제를 드리려고 합니다. 잠시 마음을 차분히 하시고 지금까지 배운 내용들을 떠올려보세요. 배열이라는 개념이 처음에는 조금 낯설게 느껴지실 수도 있지만, 사실 우리가 일상에서 늘 하고 있는 정리 정돈과 다르지 않습니다. 서랍에 물건을 정리하고, 책꽂이에 책을 나열하는 것처럼, 배열도 정보를 차례대로 정리하는 자연스러운 방법입니다. 연습문제를 통해 이 아름다운 개념을 조금 더 친근하게 느껴보시길 바랍니다.

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

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

Q1. 좋아하는 색깔 4개로 배열을 만들어보세요.

let favoriteColors = ["파랑", "보라", "분홍", "초록"];

console.log("좋아하는 색깔들:");
console.log(favoriteColors);
console.log("색깔 개수: " + favoriteColors.length + "개");
console.log("가장 좋아하는 색: " + favoriteColors[0]);
console.log("두 번째로 좋아하는 색: " + favoriteColors[1]);

Q2. 1부터 5까지 숫자로 배열을 만들고 첫 번째와 마지막 숫자를 출력해보세요.

let numbers = [1, 2, 3, 4, 5];

console.log("숫자 배열:");
console.log(numbers);
console.log("첫 번째 숫자: " + numbers[0]);
console.log("마지막 숫자: " + numbers[numbers.length - 1]);
console.log("배열의 크기: " + numbers.length);

Q3. 다음 배열에서 두 번째와 네 번째 동물을 출력해보세요.

let zoo = ["사자", "코끼리", "기린", "펭귄", "원숭이"];

console.log("동물원 동물들:");
console.log(zoo);
console.log("두 번째 동물: " + zoo[1]);     // 코끼리
console.log("네 번째 동물: " + zoo[3]);     // 펭귄
console.log("동물 총 개수: " + zoo.length); // 5

🤔 좀 더 어려운 문제로 실력 확인하기

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 배열에 대한 이해를 확인해보겠습니다.

Q1. 다음 코드의 결과를 예상해보고, 왜 그런 결과가 나오는지 설명해보세요.

let fruits = ["딸기", "키위", "망고"];
console.log(fruits[3]);
console.log(fruits.length);

정답: 첫 번째 줄은 undefined가 출력되고, 두 번째 줄은 3이 출력됩니다.

해설: 배열 fruits는 0, 1, 2번 자리에만 정보가 있습니다. 3번 자리는 존재하지 않기 때문에 undefined가 나타납니다. 배열의 크기는 3개 정보가 있으므로 3이 출력됩니다.

Q2. 배열에서 첫 번째와 마지막 정보를 안전하게 가져오는 코드를 작성해보세요.

let subjects = ["국어", "수학", "영어", "과학", "체육"];

// 첫 번째 과목 (항상 0번)
console.log("첫 번째 과목: " + subjects[0]);

// 마지막 과목 (배열 크기를 이용해 안전하게)
let lastIndex = subjects.length - 1;
console.log("마지막 과목: " + subjects[lastIndex]);

// 또는 한 줄로
console.log("마지막 과목: " + subjects[subjects.length - 1]);

해설: 첫 번째 정보는 항상 인덱스 0번이고, 마지막 정보는 배열크기 - 1번 자리에 있습니다. 이 방법을 사용하면 배열의 크기가 바뀌어도 항상 올바르게 작동해요.

📚 이전 단원 복습 문제

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

복습 1) 변수와 함수 (1-5단원 복습)

// 다음 코드의 출력 결과를 예상해보세요
function greetPerson(name) {
    return "안녕하세요, " + name + "님!";
}

let myName = "철수";
let greeting = greetPerson(myName);
console.log(greeting);  // 이 출력 결과는?

정답: "안녕하세요, 철수님!"이 출력됩니다.

해설: 함수에 "철수"를 전달하고, 함수에서 반환된 문자열을 변수에 저장한 후 출력했습니다.

복습 2) 조건문과 반복문 (3-4단원 복습)

// for문을 사용해서 1부터 5까지 출력하는 코드를 작성해보세요
for(let i = 1; i <= 5; i++) {
    console.log(i + "번째 숫자");
}

정답: "1번째 숫자", "2번째 숫자", "3번째 숫자", "4번째 숫자", "5번째 숫자"가 순서대로 출력됩니다.

지금까지 배열의 기본 개념과 사용법을 차근차근 알아보았습니다. 배열은 앞으로 여러분이 프로그래밍을 하면서 가장 자주 사용하게 될 중요한 도구 중 하나입니다. 마치 정리 정돈을 잘하는 사람이 물건을 쉽게 찾을 수 있는 것처럼, 배열을 잘 활용하면 정보를 효율적으로 관리할 수 있습니다.

다음 시간에는 배열에 새로운 정보를 추가하고 제거하는 더 유용한 방법들을 배워볼 예정입니다. 오늘도 정말 열심히 하셨습니다. 💙

✅ 학습 완료 체크리스트

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

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

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.

1단계: 대괄호 안에 값들을 쉼표로 구분해서 배열 생성 → 변수에 배열 저장 → console.log로 전체 배열 확인 → .length로 배열 길이 확인 → 인덱스 번호로 각 요소에 접근

2단계: 숫자들을 대괄호 안에 나열해서 배열 생성 → 배열을 변수에 저장 → 전체 배열과 길이 정보 출력 → 인덱스로 특정 위치의 숫자 접근 → 원하는 숫자들을 하나씩 출력

3단계: 친구 이름들을 문자열로 배열에 저장 → 배열 전체와 친구 수 확인 → 첫 번째 친구 이름 출력 → 배열 길이를 이용해 마지막 위치 계산 → 마지막 친구 이름 출력

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---