JavaScript 컬렉션 - Array

Array 한 줄 요약

Array는 "순서 있는 값 목록(인덱스로 접근 가능)"이다.

자바스크립트에서 가장 자주 쓰는 컬렉션이며, 순회/검색/변형 메서드가 매우 많다.

 

처음에는 메서드가 너무 많아서 복잡해 보이지만,
실제로는 아래 3가지만 먼저 잡으면 훨씬 쉬워진다.

• 값 추가/삭제 (push, pop, splice)
• 검색/확인 (includes, find)
• 순회/변형 (map, filter, reduce)

---

먼저 감 잡기 (Array가 왜 중요한가?)

Array(배열)는 거의 모든 코드에서 등장한다.

• API 응답 목록
• 화면에 렌더링할 데이터 리스트
• 검색 결과
• 체크된 항목 목록
• 정렬/필터링 대상 데이터

즉, "여러 값을 순서 있게 다룬다" 싶으면 대부분 Array부터 시작한다.

---

용어 10초 정리

블로그/문서에서 아래 단어가 자주 나오는데, 처음엔 이렇게 이해하면 충분하다.

• 컬렉션(Collection): 값을 여러 개 담아두는 자료형/자료구조 (예: Array, Set, Map)
• 이터러블(Iterable): for...of로 순회할 수 있는 값 (예: Array, Set, Map, 문자열)

즉, Array는 "컬렉션"이고, 동시에 "이터러블" 이다.

• 컬렉션이라서 값을 여러 개 담을 수 있고
• 이터러블이라서 for...of, 전개 연산자(...)를 사용할 수 있다

---

Array란 뭐냐? (진짜 핵심만)

한 줄로 정리하면:

"순서가 있는 값을 인덱스로 관리하는 컬렉션"

 

핵심 특징:

• 순서 있음: 0부터 시작하는 인덱스로 접근 가능
• 인덱스 접근 가능: arr[0], arr[1]처럼 위치 기반 접근
• 메서드 많음: 추가/삭제/검색/변형 관련 메서드가 풍부함
• 이터러블: for...of, 전개 연산자(...) 사용 가능

const arr = [10, 20, 30];

console.log(arr[0]); // 10

for (const v of arr) {
  console.log(v); // 10, 20, 30
}

const copy = [...arr];
console.log(copy); // [10, 20, 30]

---

배열에서 가장 먼저 알아야 할 관점 (중요)

메서드를 외우기 전에 이 기준부터 먼저 잡자.

1) 원본 배열을 바꾸는가? - MDN

• 바꾸면: mutating method
• 안 바꾸면: non-mutating-method

2) 새 배열을 반환하는가?

• 예: map, filter, slice, concat

이 관점만 잡아도 실수(특히 사이드이펙트)가 많이 줄어든다.

---

자주 쓰는 메서드 먼저 보기

1) 기본 조작 메서드

메서드	원본 변경	설명
push()	✅	끝에 요소 추가
pop()	✅	끝 요소 제거 후 반환
shift()	✅	첫 요소 제거 후 반환
unshift()	✅	앞에 요소 추가
concat()	❌	배열 병합 → 새 배열 반환
slice()	❌	일부 구간 복사 → 새 배열 반환
splice()	✅	요소 추가/제거/교체 (파괴적)

const arr = [1, 2, 3];

arr.push(4); // [1, 2, 3, 4]

const last = arr.pop();
console.log(last); // 4
console.log(arr);  // [1, 2, 3]

const sliced = arr.slice(1);
console.log(sliced); // [2, 3] (원본 그대로)

const merged = arr.concat([4, 5]);
console.log(merged); // [1, 2, 3, 4, 5]

---

2) 검색 관련 메서드

메서드	원본 변경	설명
includes()	❌	값 포함 여부 (true/false)
indexOf()	❌	값의 첫 인덱스
find()	❌	조건을 만족하는 첫 요소
findIndex()	❌	조건을 만족하는 첫 인덱스

const nums = [10, 20, 30, 40];

console.log(nums.includes(20)); // true
console.log(nums.indexOf(30));  // 2

const found = nums.find(x => x > 25);
const idx = nums.findIndex(x => x > 25);

console.log(found); // 30
console.log(idx);   // 2

팁: 값 자체를 찾으면 find, 위치(인덱스)가 필요하면 findIndex

---

3) 순회 & 변형 메서드

메서드	원본 변경	설명
forEach()	❌	각 요소에 콜백 실행 (반환값 없음)
map()	❌	각 요소를 변환 → 새 배열
filter()	❌	조건을 만족하는 요소만 모아 새 배열
reduce()	❌	누산하여 단일 값 반환

const arr = [1, 2, 3, 4];

arr.forEach(x => console.log(x));
// 1, 2, 3, 4

const doubled = arr.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8]

const biggerThanTwo = arr.filter(x => x > 2);
console.log(biggerThanTwo); // [3, 4]

const sum = arr.reduce((acc, x) => acc + x, 0);
console.log(sum); // 10

실무 감각 한 줄

• 그냥 돌기만 하면 → forEach 또는 for...of
• 모양 바꾸면 → map
• 걸러내면 → filter
• 하나로 모으면 → reduce

map + filter + reduce 조합만 잘 써도 데이터 처리 로직이 많이 깔끔해진다.

---

정적 메서드 vs 인스턴스 메서드 (헷갈림 방지)

초보자가 자주 헷갈리는 포인트라서 딱 이렇게 기억하면 된다.

• 정적 메서드: Array.메서드() → 배열을 만들거나 판별할 때
• 인스턴스 메서드: arr.메서드() → 이미 있는 배열을 다룰 때

정적 메서드 (배열 만드는/체크하는 쪽)

Array.from()

유사 배열 또는 이터러블을 진짜 배열로 변환

console.log(Array.from('hi')); // ['h', 'i']

const set = new Set([1, 2, 3]);
console.log(Array.from(set)); // [1, 2, 3]

Array.of()

전달한 인자들을 요소로 갖는 새 배열 생성

console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array.of('a'));     // ['a']

Array.isArray()

값이 배열인지 확인

console.log(Array.isArray([1, 2])); // true
console.log(Array.isArray('hi'));   // false

---

복사에서 진짜 많이 헷갈리는 부분 (얕은 복사 vs 깊은 복사)

배열 복사는 자주 쓰지만,
중첩 배열/객체가 있는 순간 실수가 잘 난다.

const arr = [[1, 2], 3];

얕은 복사 (shallow copy)

• 바깥 배열만 새로 만들고
• 안쪽 객체/배열은 참조를 공유함

대표 예: slice(), concat(), map(), 전개 연산자(...) → 스프레드 연산자

const shallow = arr.slice();
shallow[0][0] = 9;

console.log(arr); // [[9, 2], 3] ← 원본도 바뀜

깊은 복사 (deep copy)

• 안쪽까지 전부 새로 복사해서
• 원본과 복사본이 독립적으로 동작

ES2021+ 환경에서는 structuredClone() 사용 가능

const deep = structuredClone(arr);
deep[0][0] = 5;

console.log(arr);  // [[9, 2], 3]  (원본 유지)
console.log(deep); // [[5, 2], 3]

체크 포인트: 중첩 구조를 다룰 때는 항상
"지금 복사가 얕은 복사인가, 깊은 복사인가?" 를 먼저 확인하자.

---

Array 사용할 때 내 체크리스트

실제 코드를 짤 때는 아래 순서로 생각하면 실수를 줄이기 좋다.

• 배열을 만들어야 하나?
  • 유사 배열/이터러블이면 → Array.from()
  • 값 몇 개 빠르게 만들면 → [] 또는 Array.of()
• 원본을 바꿔도 되나?
  • 괜찮으면 → push, splice 같은 파괴 메서드 사용
  • 애매하면 → slice, concat, map, filter 같은 새 배열 반환 메서드 우선
• 중첩 데이터인가?
  • 맞다면 → 얕은 복사/깊은 복사 구분 필수 (structuredClone() 고려)
• 순회만 필요한가, 변형도 필요한가?
  • 순회만 → for...of, forEach
  • 변형 → map, filter, reduce
• 최신 메서드 사용 가능한 환경인가?
  • 원본 보존 정렬 → toSorted()
  • 뒤에서 찾기 → findLast(), findLastIndex()

---

오늘 내용 한 줄씩 다시 정리

• Array = 순서 있는 값 목록(인덱스로 접근 가능)
• 메서드를 외우기 전에 먼저 원본 변경 여부부터 구분하자
• 실무에서는 includes, find, map, filter, reduce 체감 사용량이 높다
• Array.from, Array.of, Array.isArray는 "만들기/체크" 쪽에서 자주 쓴다
• 중첩 구조 복사는 얕은 복사 vs 깊은 복사를 꼭 구분하자