JavaScript 배열(Array): 여러 값을 하나로 관리하기

우리는 값(values)과 변수(variables)를 다루는 방법을 배웠습니다. 아직 실용적인 기능을 만들 수 있는 단계는 아니지만, 이러한 기초 개념들이 앞으로 유용한 프로그램을 만드는 핵심 구성 요소가 됩니다.

지금까지는 주로 문자열(strings)과 숫자(numbers)를 다뤘습니다. 이 두 가지는 매우 중요하고 자주 사용하는 값 타입이죠. 하지만 JavaScript에는 다른 유용한 값 타입도 있습니다.

오늘은 그중에서 배열(Array)에 대해 알아보겠습니다.

배열이 없다면 어떤 문제가 생길까요?

사용자로부터 입력을 받는 상황을 예로 들어보겠습니다:

let age = 32;

let userName = "Max";

let hobbies = ??? // 취미가 여러 개라면?

여기서 문제가 생깁니다. 취미는 한 가지가 아니라 여러 개일 수 있죠. 운동도 좋아하고, 요리도 좋아하고, 독서도 좋아한다면 어떻게 저장해야 할까요?

첫 번째 시도: 변수를 여러 개 만들면 되지 않을까요?

let hobby1 = "운동";

let hobby2 = "요리";

let hobby3 = "독서";

언뜻 보면 괜찮아 보입니다. 하지만 곰곰이 생각해 보면 심각한 문제들이 있습니다.

문제 1: 사용자마다 취미 개수가 다르면 어떻게 하죠?

A 사용자는 취미가 2개
B 사용자는 취미가 5개
C 사용자는 취미가 10개

몇 개의 변수를 미리 만들어 둬야 할까요? 10개? 20개? 100개? 개발자인 우리가 사전에 알 수 있는 방법이 없습니다.

문제 2: 변수 관리가 너무 복잡하지 않나요?

취미가 20개라면 hobby1, hobby2, hobby3... hobby20까지 만들어야 합니다. 상상만 해도 끔찍하죠.

문제 3: 이 변수들이 서로 연관되어 있다는 걸 어떻게 알 수 있죠?

코드를 다시 읽을 때, 또는 다른 개발자가 볼 때 hobby1, hobby2, hobby3이 서로 연관된 데이터라는 것을 직관적으로 알기 어렵습니다.

그렇다면 해답은?

바로 배열입니다!

let hobbies = ["sports", "cooking", "reading"];

이렇게 하나의 변수에 여러 값을 담을 수 있다면 앞서 말한 모든 문제가 해결됩니다.

배열이란 정확히 무엇인가요?

배열은 여러 값을 담을 수 있는 리스트입니다. 마치 서랍장에 여러 물건을 정리해서 보관하는 것처럼, 하나의 변수에 여러 개의 값을 저장할 수 있습니다.

배열의 핵심 장점:

✅ 연관된 여러 값을 하나의 변수에 깔끔하게 저장합니다
✅ 나중에 값을 동적으로 추가하거나 제거할 수 있습니다
✅ 코드가 훨씬 깔끔하고 관리하기 쉬워집니다

배열은 어떻게 만드나요?

기본 문법

배열은 []를 사용해서 만듭니다:

let hobbies = ["sports", "cooking", "reading"];

구조를 자세히 살펴볼까요?

[ : 배열의 시작을 알립니다
"sports", "cooking", "reading" : 배열에 저장할 값들 (요소들)
, : 각 값을 구분하는 쉼표 (꼭 필요합니다!)
] : 배열의 끝을 알립니다

쉼표와 공백, 어떻게 써야 할까요?

// 가독성을 위해 공백 추가 (권장)

let hobbies = ["sports", "cooking", "reading"];

// 공백 없이도 작동함 (비권장)

let hobbies = ["sports","cooking","reading"];

쉼표(,): 필수입니다! JavaScript가 각 값의 경계를 알 수 있게 해줍니다
공백: 선택 사항입니다. 하지만 가독성을 위해 추가하는 것을 권장합니다

배열에는 어떤 값을 넣을 수 있나요?

같은 타입의 값만 넣어야 할까요? 아닙니다! 자유롭게 섞어서 사용할 수 있습니다:

// 문자열만

let hobbies = ["sports", "cooking", "reading"];

// 숫자만

let scores = [95, 87, 92, 100];

// 문자열과 숫자 혼합도 가능!

let mixedData = ["Max", 32, "Seoul", 2025];

저장하려는 데이터의 성격에 따라 적절한 값 타입을 선택하면 됩니다.

배열에 저장한 값은 어떻게 꺼내 쓰나요?

전체 배열을 한 번에 보고 싶다면?

let hobbies = ["sports", "cooking", "reading"];

alert(hobbies);

```

**결과:**

```

sports,cooking,reading

alert() 함수는 똑똑해서 배열을 자동으로 인식하고 모든 요소를 출력해 줍니다.

그런데 특정 항목만 필요하다면?

실제로는 배열 전체가 아니라 하나의 항목만 필요한 경우가 많습니다. 첫 번째 취미만, 또는 두 번째 점수만 필요하다면 어떻게 할까요?

이때 사용하는 것이 바로 인덱스(index)입니다.

인덱스(Index)가 뭔가요?

인덱스의 개념

배열의 각 항목에는 자동으로 고유한 번호가 부여됩니다. 이 번호를 인덱스라고 합니다. 마치 아파트 호수처럼 각 항목을 구분하는 주소 같은 거죠.

let hobbies = ["sports", "cooking", "reading"];

// 인덱스: 0 1 2

```

### 왜 1이 아니라 0부터 시작하나요?

처음 프로그래밍을 배우는 분들이 가장 헷갈려하는 부분입니다.

```

첫 번째 항목: 인덱스 0

두 번째 항목: 인덱스 1

세 번째 항목: 인덱스 2

...

"상식적으로 첫 번째는 1 아닌가요?"

맞습니다. 일상생활에서는 첫 번째를 1이라고 하죠. 하지만 대부분의 프로그래밍 언어에서는 0부터 시작합니다. 이것은 컴퓨터 과학의 오랜 전통이고, JavaScript도 이 규칙을 따릅니다.

처음에는 헷갈리지만, 익숙해지면 자연스러워질 것입니다. "0부터 센다"는 것을 꼭 기억하세요!

인덱스로 값에 접근하려면?

let hobbies = ["sports", "cooking", "reading"];

alert(hobbies[0]); // "sports" 출력

alert(hobbies[1]); // "cooking" 출력

alert(hobbies[2]); // "reading" 출력

문법:

변수명 뒤에 대괄호 []를 붙입니다
대괄호 안에 원하는 항목의 인덱스 번호를 넣습니다

배열을 만들 때와 접근할 때, 대괄호가 다르게 쓰이나요?

예리한 질문입니다! 네, 같은 대괄호지만 위치에 따라 의미가 완전히 다릅니다:

// 배열 생성: 등호(=) 오른쪽의 대괄호

let hobbies = ["sports", "cooking", "reading"];

// 배열 접근: 변수명 뒤의 대괄호

alert(hobbies[0]);

등호 오른쪽의 []: 새로운 배열을 만듭니다
변수명 뒤의 []: 이미 만들어진 배열의 특정 항목에 접근합니다

실전에서는 어떻게 활용하나요?

예제 1: 사용자 정보 관리

let userName = "Max";

let age = 32;

let hobbies = ["sports", "cooking", "reading"];

// 전체 정보 출력

alert(userName); // "Max"

alert(age); // 32

alert(hobbies); // "sports,cooking,reading"

// 첫 번째 취미만 출력

alert(hobbies[0]); // "sports"

예제 2: 시험 점수 관리

let examScores = [95, 87, 92, 100, 88];

alert(examScores[0]); // 첫 번째 시험: 95점

alert(examScores[3]); // 네 번째 시험: 100점 (인덱스는 3!)

alert(examScores[4]); // 다섯 번째 시험: 88점

예제 3: 장바구니 만들기

let cart = ["사과", "우유", "빵", "계란"];

alert("첫 번째 상품: " + cart[0]); // "첫 번째 상품: 사과"

alert("마지막 상품: " + cart[3]); // "마지막 상품: 계란"

```

## 마지막 항목의 인덱스는 어떻게 알 수 있나요?

배열의 항목 개수를 알고 있다면, 간단한 계산으로 알 수 있습니다:

```

마지막 인덱스 = 항목 개수 - 1

왜 -1을 하나요?

인덱스가 0부터 시작하기 때문입니다!

예시:

let hobbies = ["sports", "cooking", "reading"];

// 항목 개수: 3개

// 인덱스: 0, 1, 2

// 마지막 인덱스: 3 - 1 = 2

alert(hobbies[2]); // "reading" (마지막 항목)

배열은 언제 사용하면 좋을까요?

배열이 특히 유용한 상황들을 정리해 볼까요?

1. 관련된 데이터를 그룹화할 때

한 학생의 전체 과목 성적
쇼핑 카트에 담긴 상품들
오늘 해야 할 일 목록

2. 순서가 중요한 데이터를 다룰 때

게임 순위표
요리 레시피의 단계
월별 매출 데이터

3. 개수가 미리 정해지지 않은 데이터를 다룰 때

사용자가 입력하는 검색어들
댓글 목록
파일 업로드 목록

더 알아두면 좋은 점은?

앞으로 배울 강력한 기능들

본 글에서는 배열의 기본 개념과 값을 읽어오는 방법을 배웠습니다. 하지만 배열로 할 수 있는 일은 훨씬 더 많습니다!

향후 알게될 내용들:

배열에 새로운 항목을 추가하는 방법
배열에서 항목을 제거하는 방법
배열의 모든 항목을 자동으로 순회하며 처리하기
배열의 길이(항목 개수) 확인하기
배열을 정렬하고, 필터링하고, 변환하기

이러한 고급 기능들은 조금 더 복잡하므로, 차근차근 개념을 익히시길 바랍니다.