JavaScript 배열 메서드 치트시트
map, filter, reduce, find, forEach 등 자주 쓰는 자바스크립트 배열 메서드를 용도·반환값·예제로 한눈에 정리한 치트시트입니다.
자주 쓰는 배열 메서드를 무엇을 반환하는지 기준으로 정리했습니다.
변형 — 새 배열을 반환
| 메서드 | 용도 | 반환값 |
|---|---|---|
map(fn) | 각 요소를 변환 | 같은 길이의 새 배열 |
filter(fn) | 조건을 만족하는 요소만 | 걸러진 새 배열 |
slice(s, e) | 일부 잘라내기 | 새 배열(원본 보존) |
concat(arr) | 이어 붙이기 | 합쳐진 새 배열 |
flat(depth) | 중첩 배열 평탄화 | 새 배열 |
const nums = [1, 2, 3, 4];
console.log(nums.map((n) => n * 2)); // [2, 4, 6, 8]
console.log(nums.filter((n) => n % 2 === 0)); // [2, 4]
집계 — 하나의 값을 반환
| 메서드 | 용도 | 반환값 |
|---|---|---|
reduce(fn, init) | 누적 계산 | 누적 결과 |
find(fn) | 조건 맞는 첫 요소 | 요소 또는 undefined |
findIndex(fn) | 조건 맞는 첫 인덱스 | 인덱스 또는 -1 |
some(fn) | 하나라도 만족? | boolean |
every(fn) | 모두 만족? | boolean |
includes(v) | 값 포함? | boolean |
const nums = [1, 2, 3, 4];
console.log(nums.reduce((sum, n) => sum + n, 0)); // 10
console.log(nums.find((n) => n > 2)); // 3
console.log(nums.some((n) => n > 3)); // true
원본을 바꾸는 메서드 (주의)
push, pop, shift, unshift, splice, sort, reverse는 원본 배열을 직접 변경합니다. React 상태 등 불변성이 중요한 곳에서는 복사 후 사용하세요.
// ✕ 원본 변경
arr.push(5);
// ○ 새 배열로
const next = [...arr, 5];
팁: 반환값이 "새 배열"이면 체이닝(
arr.filter(...).map(...))할 수 있고, "하나의 값"이면 체인의 끝입니다.