배열 생성, 인덱스 접근, 추가/삭제/검색 등 핵심 메서드를 배우고 스프레드 연산자와 구조분해로 배열을 다루는 현대적 패턴을 익힌다.
배열 — 순서 있는 데이터 컬렉션
배열은 여러 값을 순서대로 저장하는 자료구조입니다. 자바스크립트 배열은 타입이 혼합되어도 되고, 크기가 동적으로 변합니다. 인덱스는 0부터 시작합니다.
배열 생성
// 리터럴 (권장)
const fruits = ["apple", "banana", "cherry"];
const mixed = [1, "hello", true, null, { id: 1 }];
const empty = [];
// Array 생성자 (잘 안 씀)
const arr = new Array(3); // [empty × 3]
const arr2 = new Array(1, 2, 3); // [1, 2, 3]
Array.from({ length: 5 }, (_, i) => i); // [0, 1, 2, 3, 4]
Array.from("Hello"); // ["H", "e", "l", "l", "o"]
Array.of(1, 2, 3); // [1, 2, 3]인덱스 접근과 기본 프로퍼티
const fruits = ["apple", "banana", "cherry"];
fruits[0] // "apple"
fruits[2] // "cherry"
fruits[fruits.length - 1] // "cherry" (마지막 요소)
fruits.at(-1) // "cherry" (ES2022, 음수 인덱스 지원)
fruits.at(-2) // "banana"
fruits.length // 3
fruits[10] // undefined (범위 초과 → 에러 없음)추가/삭제 메서드
const arr = [1, 2, 3];
// 끝에 추가/삭제
arr.push(4, 5); // [1, 2, 3, 4, 5], 반환값: 새 길이
arr.pop(); // [1, 2, 3, 4], 반환값: 5 (제거된 요소)
// 앞에 추가/삭제 (느림 — 모든 인덱스 재배치)
arr.unshift(0); // [0, 1, 2, 3, 4], 반환값: 새 길이
arr.shift(); // [1, 2, 3, 4], 반환값: 0
// splice — 삽입/삭제/교체 (원본 변경)
const colors = ["red", "green", "blue"];
colors.splice(1, 1); // ["green"] 반환, 원본: ["red", "blue"]
colors.splice(1, 0, "yellow"); // 삽입: ["red", "yellow", "blue"]
colors.splice(0, 2, "pink", "gray"); // 교체검색 메서드
const nums = [10, 20, 30, 20, 40];
nums.indexOf(20) // 1 (첫 번째 위치)
nums.lastIndexOf(20) // 3 (마지막 위치)
nums.indexOf(99) // -1 (없으면 -1)
nums.includes(30) // true
nums.includes(99) // false
// find — 조건에 맞는 첫 번째 요소 반환
const users = [{id: 1, name: "Kim"}, {id: 2, name: "Lee"}];
users.find(u => u.id === 2); // {id: 2, name: "Lee"}
users.find(u => u.id === 99); // undefined
// findIndex — 조건에 맞는 첫 번째 인덱스
users.findIndex(u => u.id === 2); // 1
// findLast / findLastIndex (ES2023)
[1, 2, 3, 2].findLast(n => n === 2); // 2 (뒤에서부터)정렬과 변환
// sort (원본 변경, 주의!)
[3, 1, 4, 1, 5].sort(); // [1, 1, 3, 4, 5] — 숫자 정렬은 문자열 변환 후
[10, 9, 100].sort(); // [10, 100, 9] 잘못됨!
// 올바른 숫자 정렬
[10, 9, 100].sort((a, b) => a - b); // [9, 10, 100] 오름차순
[10, 9, 100].sort((a, b) => b - a); // [100, 10, 9] 내림차순
// 객체 배열 정렬
const people = [{name: "Lee", age: 30}, {name: "Kim", age: 25}];
people.sort((a, b) => a.age - b.age); // 나이 오름차순
// reverse (원본 변경)
[1, 2, 3].reverse(); // [3, 2, 1]
// join
["a", "b", "c"].join("-"); // "a-b-c"
["a", "b", "c"].join(""); // "abc"
["a", "b", "c"].join(", "); // "a, b, c"슬라이싱과 연결
const arr = [0, 1, 2, 3, 4, 5];
// slice (원본 유지, 새 배열 반환)
arr.slice(1, 4) // [1, 2, 3] (1 이상 4 미만)
arr.slice(3) // [3, 4, 5]
arr.slice(-2) // [4, 5] (뒤에서 2개)
arr.slice() // [0, 1, 2, 3, 4, 5] (얕은 복사)
// concat
[1, 2].concat([3, 4], [5]) // [1, 2, 3, 4, 5]
// flat — 중첩 배열 평탄화
[1, [2, 3], [4, [5, 6]]].flat() // [1, 2, 3, 4, [5, 6]]
[1, [2, 3], [4, [5, 6]]].flat(2) // [1, 2, 3, 4, 5, 6]
[1, [2, [3, [4]]]].flat(Infinity) // [1, 2, 3, 4]스프레드 연산자와 배열
const a = [1, 2, 3];
const b = [4, 5, 6];
// 배열 합치기
const merged = [...a, ...b]; // [1, 2, 3, 4, 5, 6]
const withExtra = [0, ...a, 3.5, ...b]; // [0, 1, 2, 3, 3.5, 4, 5, 6]
// 배열 복사 (얕은 복사)
const copy = [...a];
copy.push(99);
console.log(a); // [1, 2, 3] — 원본 영향 없음
// 함수 인수로 전달
Math.max(...[3, 1, 4, 1, 5, 9]); // 9구조분해 할당
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
// 건너뛰기
const [,, third] = [1, 2, 3];
console.log(third); // 3
// 기본값
const [x = 10, y = 20] = [5];
console.log(x, y); // 5, 20
// 변수 교환 (스왑)
let p = 1, q = 2;
[p, q] = [q, p];
console.log(p, q); // 2, 1관련 검색어 · 자바스크립트 배열, 배열 메서드, push pop splice, 스프레드 연산자, 배열 구조분해, Array.from