배열 기초

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• 배열을 생성하고 인덱스로 요소에 접근하고 수정할 수 있습니다.
• push, pop, shift, unshift, splice로 배열 요소를 추가·삭제할 수 있습니다.
• 스프레드 연산자(...)로 배열을 복사하고 합칠 수 있습니다.
• for문과 for...of로 배열을 순회하는 방법을 구분해 사용할 수 있습니다.

📋 배열이란 무엇인가

이 섹션에서는 배열의 개념과 왜 배열 같은 자료 구조가 필요한지 살펴보겠습니다.

지금까지 변수 하나에 값 하나를 저장했습니다. 그런데 학생 30명의 점수, 쇼핑몰의 상품 100개, 할 일 목록처럼 여러 개의 관련된 데이터를 다루어야 할 때는 어떻게 할까요? 변수를 30개, 100개 만들 수는 없습니다.

배열(Array)은 여러 개의 값을 순서(인덱스)를 가진 하나의 변수에 저장하는 자료 구조입니다. 상자가 여러 칸으로 나뉘어 있어 각 칸에 값을 하나씩 넣고, 칸 번호(인덱스)로 꺼낼 수 있는 것과 같습니다. 자바스크립트 배열은 특히 유연합니다. 하나의 배열에 숫자, 문자열, 불리언, 다른 배열 등 어떤 자료형이든 섞어서 저장할 수 있습니다.

// 배열 생성 — 대괄호 [] 사용
const fruits = ["사과", "바나나", "포도"];
const scores = [95, 87, 72, 100, 63];
const mixed = [1, "hello", true, null];  // 혼합 타입 가능
const empty = [];  // 빈 배열

// 배열의 기본 정보
console.log(fruits.length);    // 3 — 요소 개수
console.log(typeof fruits);    // "object" — 배열은 객체의 일종
console.log(Array.isArray(fruits));  // true — 배열 여부 확인

배열은 사실 특별한 종류의 객체입니다. 그래서 typeof로 확인하면 "object"가 나옵니다. 배열인지 정확히 확인하려면 Array.isArray()를 사용해야 합니다. 이 특성은 14강 객체에서 더 자세히 이해하게 됩니다.

🔢 배열 접근과 수정

이 섹션에서는 배열의 특정 위치에 있는 값을 읽고 쓰는 방법을 살펴보겠습니다.

배열의 각 요소는 0부터 시작하는 인덱스(Index)를 가집니다. 대괄호([])에 인덱스를 넣어 해당 위치의 값에 접근합니다. 문자열 접근(6강)과 같은 방식이지만, 배열은 값을 수정할 수도 있습니다.

const fruits = ["사과", "바나나", "포도", "딸기"];
//              0       1        2      3   ← 인덱스

// 값 읽기
console.log(fruits[0]);   // "사과"
console.log(fruits[2]);   // "포도"
console.log(fruits[10]);  // undefined — 범위 초과

// 마지막 요소에 접근
console.log(fruits[fruits.length - 1]);  // "딸기"
console.log(fruits.at(-1));              // "딸기" — at() 메서드

// 값 수정 — 배열은 const여도 내부 요소 변경 가능!
fruits[1] = "망고";
console.log(fruits);  // ["사과", "망고", "포도", "딸기"]

// 인덱스 범위를 벗어난 위치에 값 설정
fruits[10] = "멜론";  // 중간에 빈 자리(empty)가 생김
console.log(fruits.length);  // 11
console.log(fruits[5]);      // undefined (빈 자리)

const로 선언한 배열도 내부 요소는 수정할 수 있습니다. const는 변수가 다른 배열을 가리키도록 재할당하는 것을 막을 뿐입니다. 이것은 3강에서 언급했던 내용입니다. 배열의 내용(요소)을 바꾸는 것은 재할당이 아니라 배열 내부 수정이므로 허용됩니다.

➕ 배열 요소 추가·삭제

이 섹션에서는 배열에 요소를 추가하거나 제거하는 핵심 메서드들을 살펴보겠습니다.

배열에 요소를 추가하고 삭제하는 방법은 어느 위치(앞/뒤)에 작업하느냐에 따라 다른 메서드를 사용합니다.

const stack = ["A", "B", "C"];

// push() — 배열 끝에 추가 (하나 또는 여러 개)
stack.push("D");
console.log(stack);  // ["A", "B", "C", "D"]
stack.push("E", "F");
console.log(stack);  // ["A", "B", "C", "D", "E", "F"]

// pop() — 배열 끝 요소 제거하고 반환
const removed = stack.pop();
console.log(removed);  // "F" — 제거된 값 반환
console.log(stack);    // ["A", "B", "C", "D", "E"]

// unshift() — 배열 앞에 추가
stack.unshift("Z");
console.log(stack);  // ["Z", "A", "B", "C", "D", "E"]

// shift() — 배열 앞 요소 제거하고 반환
const first = stack.shift();
console.log(first);  // "Z"
console.log(stack);  // ["A", "B", "C", "D", "E"]

push/pop은 배열의 끝을 다루고, shift/unshift는 배열의 앞을 다룹니다. 앞을 다루는 shift/unshift는 모든 요소의 인덱스를 다시 계산해야 해서 성능이 좋지 않습니다. 데이터가 많을 때는 되도록 배열 끝을 기준으로 작업하는 것이 효율적입니다.

// splice() — 특정 위치에서 삭제·삽입·교체 (가장 강력)
const colors = ["빨강", "초록", "파랑", "노랑"];

// splice(시작인덱스, 삭제개수)
const deleted = colors.splice(1, 2);  // 인덱스 1부터 2개 삭제
console.log(deleted);  // ["초록", "파랑"]
console.log(colors);   // ["빨강", "노랑"]

// splice(시작인덱스, 삭제개수, ...추가할값)
colors.splice(1, 0, "보라", "주황");  // 삭제 없이 삽입
console.log(colors);  // ["빨강", "보라", "주황", "노랑"]

// indexOf + splice 조합으로 특정 값 삭제
const items = ["a", "b", "c", "d"];
const idx = items.indexOf("c");
if (idx !== -1) {
  items.splice(idx, 1);
}
console.log(items);  // ["a", "b", "d"]

splice()는 매우 강력한 메서드입니다. 삭제만, 삽입만, 또는 삭제하면서 동시에 새 값 삽입(교체)도 가능합니다. 특정 값의 위치를 indexOf()로 찾은 뒤 splice()로 삭제하는 패턴은 실무에서 자주 사용합니다.

📋 배열 복사와 합치기

이 섹션에서는 배열을 올바르게 복사하는 방법과 스프레드 연산자의 활용을 살펴보겠습니다.

배열을 복사할 때 주의해야 할 중요한 개념이 있습니다. 배열은 참조형(Reference Type)이라는 점입니다. 일반 변수 복사와 다르게 동작합니다.

// ❌ 잘못된 복사 — 참조를 복사 (같은 배열을 가리킴)
const original = [1, 2, 3];
const copy1 = original;  // 복사처럼 보이지만...
copy1.push(4);
console.log(original);  // [1, 2, 3, 4] — 원본도 바뀜!

// ✅ 올바른 복사 방법들
// 방법 1: 스프레드 연산자
const copy2 = [...original];
copy2.push(5);
console.log(original);  // [1, 2, 3, 4] — 원본 유지
console.log(copy2);     // [1, 2, 3, 4, 5]

// 방법 2: slice()
const copy3 = original.slice();

// 방법 3: Array.from()
const copy4 = Array.from(original);

// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// concat 메서드
const combined1 = arr1.concat(arr2);
console.log(combined1);  // [1, 2, 3, 4, 5, 6]

// 스프레드 연산자 — 더 직관적
const combined2 = [...arr1, ...arr2];
console.log(combined2);  // [1, 2, 3, 4, 5, 6]

// 중간에 값 삽입도 가능
const combined3 = [...arr1, 99, ...arr2];
console.log(combined3);  // [1, 2, 3, 99, 4, 5, 6]

배열(그리고 다음 강에서 배울 객체)은 변수에 배열 자체가 아닌 배열의 메모리 주소(참조)가 저장됩니다. 그래서 const copy1 = original로 복사하면 두 변수가 같은 배열을 가리켜, 하나를 수정하면 다른 것도 변합니다. 진짜 복사(독립된 새 배열)를 만들려면 [...arr]이나 arr.slice()를 사용해야 합니다. 이 얕은 복사(Shallow Copy) 개념은 실무에서 매우 자주 만나는 중요한 내용입니다.

🔄 배열 순회

이 섹션에서는 배열의 모든 요소를 하나씩 처리하는 다양한 순회 방법을 살펴보겠습니다.

배열을 순회하는 방법은 여러 가지입니다. 상황에 따라 적합한 방법이 다릅니다.

const fruits = ["사과", "바나나", "포도", "딸기"];

// 1. for 문 — 인덱스가 필요할 때
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}번: ${fruits[i]}`);
}
// 0번: 사과, 1번: 바나나 ...

// 2. for...of — 값만 필요할 때 (가장 간결)
for (const fruit of fruits) {
  console.log(fruit);
}
// 사과, 바나나, 포도, 딸기

// 3. forEach — 콜백으로 순회 (인덱스도 접근 가능)
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

// 4. for...in — 배열에는 사용 자제 (프로토타입 속성까지 순회 가능)
// 배열에는 for...of나 forEach 사용 권장

가장 많이 사용하는 순회 방법은 인덱스가 필요 없을 때 for...of, 인덱스도 함께 필요할 때 일반 for문 또는 forEach입니다. forEach는 12강 배열 메서드에서 자세히 다루겠습니다.

📝 핵심 요약

11강에서 배운 내용을 정리해 보겠습니다.

메서드/개념	설명	예시
배열 생성	대괄호로 생성	[1, 2, 3]
인덱스 접근	0부터 시작	arr[0]
push()	끝에 추가	arr.push(4)
pop()	끝에서 제거·반환	arr.pop()
unshift()	앞에 추가	arr.unshift(0)
shift()	앞에서 제거·반환	arr.shift()
splice(i, n)	특정 위치 삭제·삽입	arr.splice(1, 2)
[...arr]	배열 얕은 복사	const copy = [...arr]
[...a, ...b]	배열 합치기	[...arr1, ...arr2]

다음 강인 12강 — 배열 메서드 ①에서는 자바스크립트에서 가장 강력하고 실무에서 매일 사용하는 고차 배열 메서드를 배웁니다. forEach, map, filter, find를 화살표 함수와 결합하면 복잡한 데이터 처리도 단 몇 줄로 해결할 수 있습니다!