자바스크립트 배열 메소드 정리
배열은 자바스크립트 배열 메소드(Array.prototype method)를 잘 활용하면 자료 처리·변환·탐색 속도가 극적으로 빨라집니다. 이번 글에서는 원본 변경형·비변경형·반복형 3가지 카테고리로 나눠, 가장 자주 쓰는 메소드와 예시 코드를 한눈에 살펴보겠습니다.
1. 배열 메소드 분류 기준
| 분류 | 특징 | 대표 메소드 |
|---|---|---|
| 변경형 | 원본 배열을 직접 수정 | push, pop, splice, sort, fill |
| 비변경형 | 결과만 새로 반환, 원본 유지 | slice, concat, join, indexOf |
| 반복형 | 콜백·반복자 기반 순회 | forEach, map, filter, reduce, entries |
Tip
숫자 정렬 시
sort((a, b) => a - b)형태의 콜백을 꼭 넣어야 올바른 오름차순이 됩니다.
2. 원본 배열을 변경하는 메소드 🧨
| 메소드 | 기능 | 간단 예시 |
|---|---|---|
push() / pop() |
뒤 추가 / 뒤 제거 | arr.push(1) |
unshift() / shift() |
앞 추가 / 앞 제거 | arr.unshift(0) |
reverse() |
요소 순서 뒤집기 | arr.reverse() |
sort() |
정렬(기본: 문자열) | arr.sort() |
splice(시작, 개수, ...추가) |
잘라내기 & 끼워넣기 | arr.splice(2,1,"X") |
fill(value, 시작?, 끝?) |
구간 값 채우기 | arr.fill(0) |
copyWithin(대상, 시작, 끝?) |
내부 요소 복사 | arr.copyWithin(1,0,2) |
const nums = [3, 1, 2];
nums.sort((a, b) => a - b); // [1, 2, 3]
3. 원본을 변경하지 않는 메소드 🧪
| 메소드 | 기능 | 간단 예시 |
|---|---|---|
slice(시작, 끝) |
부분 배열 추출 | arr.slice(1,3) |
concat(...arrs) |
배열 병합 | arr.concat([4,5]) |
join(sep) |
문자열 변환 | arr.join(",") |
toString() |
쉼표 문자열 | arr.toString() |
indexOf, lastIndexOf |
값 위치 찾기 | arr.indexOf("x") |
slice vs splice
slice→ 비변경형 (원본 보존)splice→ 변경형 (원본 잘라서 붙이기)
4. 반복하면서 참조하는 메소드 🔁
4-1 콜백 기반
| 메소드 | 반환 | 용도 |
|---|---|---|
forEach |
없음 | 단순 반복 (break 불가) |
map |
새 배열 | 요소 변환 |
filter |
새 배열 | 조건 추출 |
reduce / reduceRight |
누계값 | 합계·평균·객체 변환 |
every / some |
불리언 | 전체·부분 조건 검사 |
find / findIndex |
값 / 인덱스 | 첫 매칭 찾기 |
4-2 반복자(Iterator) 기반 (ES6+)
| 메소드 | 반복 대상 | for-of 사용 예 |
|---|---|---|
entries() |
[인덱스, 값] |
for (const [i,v] of arr.entries()) |
keys() |
인덱스 | for (const i of arr.keys()) |
values() |
값 | for (const v of arr.values()) |
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map((n) => n ** 2); // [1, 4, 9, 16, 25]
const even = numbers.filter((n) => n % 2); // [1,3,5] → 홀수
const sum = numbers.reduce((a, b) => a + b); // 15
5. 실전 코드 스니펫
let arr = [1, 2, 3, 4, 5];
// ① push / pop
arr.push(6); // [1,2,3,4,5,6]
arr.pop(); // [1,2,3,4,5]
// ② splice로 특정 위치 값 교체
arr.splice(2, 1, 99); // [1,2,99,4,5]
// ③ find & findIndex
const firstBig = arr.find((n) => n > 3); // 4
const idxBig = arr.findIndex((n) => n > 3); // 3
// ④ copyWithin으로 내부 복사
[1, 2, 3, 4].copyWithin(2, 0, 2); // [1,2,1,2]
6. 가장 많이 쓰는 TOP 10 메소드 ✅
| 카테고리 | 메소드 |
|---|---|
| 요소 추가/제거 | push, pop, shift, unshift |
| 값 찾기 | find, indexOf |
| 반복 처리 | forEach, map, filter |
| 누적 계산 | reduce |
| 정렬/뒤집기 | sort, reverse |
질문 정리
Q1. forEach에서 break 하려면?
forEach는 멈출 수 없습니다. for…of 또는 some / every로 대체하세요.
Q2. 숫자 배열 정렬이 이상해요!
문자열 기준 정렬되기 때문입니다. arr.sort((a,b)=>a-b) 콜백으로 숫자 비교를 지정하세요.
Q3. reduce 초깃값을 생략하면?
배열 첫 요소가 초기 누적값이 됩니다. 빈 배열이면 TypeError가 발생하니 주의!
Q4. splice(2,0,"x") 는 무슨 뜻?
2번 인덱스 위치에서 삭제 0개 + "x" 삽입 → 요소 추가 기능.
Q5. 불변 업데이트를 권장하는 이유는?
React·Vue 상태 관리에서 변경형 메소드(push 등)를 쓰면 감지가 어렵습니다. slice, concat, 스프레드([...]) 로 새 배열을 만들어 주세요.
댓글남기기