29. 배열
2026년 4월 14일
객체는 '이름이 붙은 데이터'를 저장하기 좋지만, 데이터의 **'순서'**가 중요할 때는 한계가 있습니다. 이때 우리에게 필요한 것이 바로 **배열(Array)**입니다.
사용자 목록, 쇼핑 카트의 상품 리스트 등 순서가 보장되어야 하는 데이터를 다루는 법을 노션 스타일로 정리해 드립니다.
🏗️ 1. 배열 선언과 기본 구조
배열은 대괄호 []를 사용해 만들며, 각 요소는 0부터 시작하는 **인덱스(번호)**를 가집니다.
- 특징: 요소의 자료형에 제한이 없습니다. (숫자, 문자, 객체, 심볼, 심지어 함수도 가능!)
- 접근/수정:
arr[index]문법을 사용합니다.
⚡ 2. 대기열(Queue)과 스택(Stack)
배열은 두 가지 주요 자료구조의 역할을 모두 수행할 수 있는 **데큐(Deque)**입니다.
큐 (Queue) - FIFO (먼저 들어온 게 먼저 나감)
push: 배열 끝에 요소를 추가합니다.shift: 배열 앞의 요소를 제거하고 반환합니다.
스택 (Stack) - LIFO (나중에 들어온 게 먼저 나감)
push: 배열 끝에 요소를 추가합니다.pop: 배열 끝의 요소를 제거하고 반환합니다.
🚀 3. 성능(Performance)의 비밀
배열 작업을 할 때 가장 중요한 실무 지식입니다. 어디를 건드리느냐에 따라 속도가 천차만별입니다.
| 메서드 | 위치 | 속도 | 이유 |
|---|---|---|---|
push, pop | 배열 끝 | 빠름 | 다른 요소를 옮길 필요 없이 끝에만 작업하면 됨 |
shift, unshift | 배열 앞 | 느림 | 맨 앞을 건드리면 나머지 모든 요소의 인덱스를 한 칸씩 밀거나 당겨야 함 |
🔍 4. 배열의 본질: 사실은 객체다!
자바스크립트에서 배열은 특별한 종류의 객체입니다. 하지만 일반 객체처럼 다루면(예: arr.test = 5) 자바스크립트 엔진의 최적화가 깨지게 됩니다.
- 최적화: 엔진은 배열 요소를 메모리에 인접하게 배치하여 매우 빠르게 처리합니다.
- 주의: 배열을 배열답지 않게(인덱스를 건너뛰거나, 숫자가 아닌 키를 쓰는 등) 사용하면 이 속도 이점이 사라집니다.
🔄 5. 반복문 (Iteration)
배열을 순회하는 세 가지 방법입니다.
for (let i=0; ...): 인덱스가 필요할 때 쓰는 가장 고전적인 방식.for (let item of arr): 가장 추천하는 방식. 인덱스 없이 값만 필요할 때 깔끔합니다.for (let key in arr): 절대 사용하지 마세요. 객체용이라 느리고, 배열 외의 프로퍼티까지 순회할 위험이 있습니다.
📏 6. length 프로퍼티의 진실
length는 요소의 개수가 아니라 **'가장 큰 인덱스 + 1'**입니다.
- 특이점:
length값을 수동으로 줄이면 배열이 그 자리에서 잘립니다. (삭제됨) - 초기화 팁:
arr.length = 0;을 실행하면 배열을 가장 빠르게 비울 수 있습니다.
🎙️ 기술 면접 대비 (Interview Questions)
Q1. push/pop이 shift/unshift보다 성능이 좋은 이유는 무엇인가요? (중급)
답변:
push와pop은 배열의 끝에서만 작업하므로 기존 요소들의 위치(인덱스)를 변경할 필요가 없습니다. 반면,shift와unshift는 배열의 첫 번째 요소를 건드리기 때문에 그 뒤에 있는 모든 요소의 인덱스를 재정렬하는 오버헤드가 발생하기 때문입니다.
Q2. 배열에 for..in 루프를 권장하지 않는 이유는 무엇인가요? (중급)
답변:
for..in은 객체의 모든 열거 가능한 프로퍼티를 순회하므로, 배열이 가진 숫자 인덱스 외의 불필요한 속성들까지 노출될 수 있습니다. 또한 배열에 최적화된 루프가 아니기 때문에for..of나 일반for문에 비해 속도가 현저히 느립니다.
Q3. new Array(5)와 [5]의 차이점은 무엇인가요? (기초)
답변:
[5]는 숫자5를 요소로 가진 길이가 1인 배열을 만듭니다. 하지만new Array(5)는 인자가 하나이고 숫자일 경우, 요소는 비어있지만 길이가 5인 배열을 생성합니다. 이때 요소들은undefined로 채워져 예기치 못한 실수를 유발할 수 있습니다.