🗂️
객체 · 배열
중급 · 선수: 06_객체
07. 배열 기초
배열은 순서가 있는 값의 모음이며, 0 부터 시작하는 인덱스로 접근합니다.
배열pushsplice순회
소요 시간
⏱ 약 1시간
난이도
📊 초급
선수 조건
🎯 단원 6
결과물
배열은 순서가 있는 값의 모음이며, 0 부터 시작하는 인덱스로 접근합니다.
이 강의에서 배우는 것
- 1배열을 생성하고 인덱스로 접근/수정할 수 있다.
- 2`length` 의 의미와 동작을 이해한다.
- 3`push`, `pop`, `shift`, `unshift` 로 요소를 추가/삭제할 수 있다.
- 4`splice`, `slice` 의 차이(원본 변경 여부)를 안다.
- 5`for...of` 로 배열을 순회한다.
소개
배열은 순서가 있는 값의 모음이며, 0 부터 시작하는 인덱스로 접근합니다.
핵심 개념
1. 배열 생성과 인덱스
배열은 순서가 있는 값의 모음이며, 0 부터 시작하는 인덱스로 접근합니다.
javascript
const fruits = ["사과", "바나나", "포도"];
console.log(fruits[0]); // "사과"
console.log(fruits.length); // 3
fruits[1] = "딸기";`length` 는 가장 큰 인덱스 + 1 입니다. `fruits.length = 1` 처럼 줄이면 뒤쪽 요소가 잘립니다.
2. 끝/앞 추가와 제거
`push/pop` 은 끝에서, `unshift/shift` 는 앞에서 동작합니다. 앞쪽 연산은 모든 요소를 이동시키므로 더 느립니다.
javascript
const arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop(); // [1, 2, 3]
arr.unshift(0); // [0, 1, 2, 3]
arr.shift(); // [1, 2, 3]3. splice 와 slice
`splice(start, deleteCount, ...items)` 는 원본을 변경하고, `slice(start, end)` 는 새 배열을 반환합니다(end 는 미포함).
javascript
const nums = [1, 2, 3, 4, 5];
const removed = nums.splice(1, 2, 99); // nums = [1, 99, 4, 5], removed = [2,3]
const copy = nums.slice(1, 3); // [99, 4] 원본 그대로4. 순회 (for...of)
인덱스가 필요 없다면 `for...of` 가 가장 간결합니다. 인덱스도 필요하면 `entries()` 를 같이 씁니다.
javascript
for (const item of fruits) console.log(item);
for (const [i, item] of fruits.entries()) console.log(i, item);핵심 예제
| 파일 | 다루는 내용 |
|---|---|
| `01_index.js` | 인덱스 접근, length 동작 |
| `02_push_pop.js` | 추가/삭제 메서드 |
| `03_splice.js` | splice vs slice |
| `04_iteration.js` | for, for...of, forEach |
src/01_index.js
javascript
/**
* 인덱스 접근과 length
*/
"use strict";
const colors = ["red", "green", "blue"];
console.log(colors[0], colors[2]);
console.log("length =", colors.length);
colors[3] = "yellow";
console.log("after add =", colors);
colors.length = 2;
console.log("truncated =", colors);
src/02_push_pop.js
javascript
/**
* 추가/삭제 메서드
*/
"use strict";
const stack = [];
stack.push(1);
stack.push(2);
stack.push(3);
console.log("after push =", stack);
const top = stack.pop();
console.log("pop =", top, "now =", stack);
const q = [1, 2, 3];
q.unshift(0);
console.log("unshift =", q);
const first = q.shift();
console.log("shift =", first, "now =", q);
src/03_splice.js
javascript
/**
* splice vs slice
*/
"use strict";
const nums = [1, 2, 3, 4, 5];
const removed = nums.splice(1, 2, 99, 100);
console.log("after splice =", nums);
console.log("removed =", removed);
const copy = nums.slice(1, 4);
console.log("slice =", copy);
console.log("nums unchanged =", nums);
src/04_iteration.js
javascript
/**
* 배열 순회 방법
*/
"use strict";
const items = ["a", "b", "c"];
for (let i = 0; i < items.length; i++) {
console.log("for:", i, items[i]);
}
for (const x of items) {
console.log("for...of:", x);
}
items.forEach((x, i) => console.log("forEach:", i, x));
자주 하는 실수
- 존재하지 않는 인덱스를 읽고 `undefined` 에 메서드를 호출해 TypeError 발생.
- `splice` 가 원본을 바꾼다는 사실을 잊고 두 번 적용한다.
- 배열을 `===` 로 비교하려 한다 (참조 비교).
- `delete arr[1]` 을 사용해 빈 슬롯(hole)을 만든다 — `splice` 를 사용하세요.
- 객체나 배열을 복사할 때 얕은 복사임을 인지하지 못한다.
FAQ
Q1. 배열도 객체인가요?
네. `typeof []` 는 `"object"` 이며, 정확히 판별하려면 `Array.isArray()` 를 씁니다.
Q2. 빈 배열 검사는?
`arr.length === 0` 가 안전합니다.
Q3. 배열을 복사하려면?
`arr.slice()`, `[...arr]`, `Array.from(arr)` 모두 얕은 복사를 합니다.
과제
- `homework_01.js` — 정수 배열에서 최댓값과 최솟값을 구하세요.
- `homework_02.js` — 배열에서 특정 값을 모두 제거한 새 배열을 반환하세요.
homework/README.md
## homework_01.js 정수 배열을 받아 최댓값과 최솟값을 반환하는 `minMax(arr)` 를 작성하세요.
## homework_02.js 배열과 값 두 개를 받아 그 값을 모두 제거한 **새 배열** 을 반환하는 `removeAll(arr, target)` 을 작성하세요. (원본 변경 금지)
homework/answer/homework_01.js
javascript
/**
* 과제 1: 최댓값/최솟값
*/
"use strict";
/**
* @param {number[]} arr
* @returns {{min:number,max:number}}
*/
function minMax(arr) {
let min = arr[0];
let max = arr[0];
for (const x of arr) {
if (x < min) min = x;
if (x > max) max = x;
}
return { min, max };
}
console.log(minMax([3, 1, 4, 1, 5, 9, 2, 6])); // { min: 1, max: 9 }
homework/answer/homework_02.js
javascript
/**
* 과제 2: 값 제거 (원본 보존)
*/
"use strict";
/**
* @template T
* @param {T[]} arr
* @param {T} target
* @returns {T[]}
*/
function removeAll(arr, target) {
const result = [];
for (const x of arr) {
if (x !== target) result.push(x);
}
return result;
}
const original = [1, 2, 3, 2, 4, 2];
console.log(removeAll(original, 2)); // [1, 3, 4]
console.log("original =", original);
다음 단원
[08_문자열](../08_문자열/) — 텍스트 다루기.