배열 다루기

배열 — 순서 있는 데이터 컬렉션

배열은 여러 값을 순서대로 저장하는 자료구조입니다. 자바스크립트 배열은 타입이 혼합되어도 되고, 크기가 동적으로 변합니다. 인덱스는 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