JavaScript 배열 메서드 정리

개발하다가 “이게 반환을 하던가?”, “break는 되던가?” 헷갈릴 때.. 내가 다시 보려고 정리하는 노트

---

1. forEach — 단순 반복 (리턴 없음)

[1, 2, 3].forEach(n => console.log(n * 2));
// 출력: 2, 4, 6

• 반환값 없음(undefined)
• break 불가능 (중단하려면 for 문 써야 함)
• 단순한 side-effect 작업 (console, API 호출) 등에 사용

❌ 데이터를 가공해서 새로운 배열을 만들고 싶을 때는 사용 X

---

2. map — 변환 (항상 길이 동일)

const doubled = [1, 2, 3].map(n => n * 2);
console.log(doubled); // [2, 4, 6]

• 원본 배열을 같은 길이의 새로운 배열로 변환
• 반환값 있음
• React에서 JSX 렌더링 시 자주 사용

  {list.map(item => <Item key={item.id} {...item} />)}

---

3. filter — 조건에 맞는 항목만 추출

const even = [1, 2, 3, 4].filter(n => n % 2 === 0);
console.log(even); // [2, 4]

• 콜백이 true를 리턴한 요소만 남김
• 배열 길이가 줄어듦

실무 예시: active 상태인 항목만 보여줄 때, isVisible 필터링할 때

---

4. reduce — 누적해서 하나의 값 만들기

const sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10

• 누적(acc) + 현재값(cur) 조합으로 하나의 결과를 만들어감
• 초기값을 주면 안정적으로 동작함 (0, [], {} 등)
• 합계, 평균, 객체 합치기, 평탄화 등 다양하게 사용 가능

실무 예시: 장바구니 총합 계산, 댓글 수 누적 등

---

5. flat — 중첩 배열을 평탄화

console.log([1, [2, 3], [4, [5]]].flat());
// [1, 2, 3, 4, [5]]

console.log([1, [2, [3, [4]]]].flat(2));
// [1, 2, 3, [4]]

• 기본 깊이는 1 (flat(1))
• 깊이를 지정해 중첩 해제 가능
• 단, undefined / empty slot 제거 효과도 있음

---

6. flatMap — map + flat(1)

const arr = [1, 2, 3];
const result = arr.flatMap(n => [n, n * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

• 각 원소를 배열로 변환(map)
• 변환된 결과를 한 단계 평탄화(flat)
• 즉, arr.map(...).flat() 과 같지만 더 빠르고 간결함

실무 예시:
API 결과를 flatten 하거나, 중첩 구조를 단순 리스트로 바꿀 때

---

7. find / findIndex — 첫 번째 일치 항목 찾기

const users = [{id: 1}, {id: 2}, {id: 3}];
console.log(users.find(u => u.id === 2)); // {id: 2}
console.log(users.findIndex(u => u.id === 2)); // 1

• filter는 여러 개 반환, find는 첫 번째만 반환
• 없으면 undefined

---

8. some / every — 조건 만족 여부

const arr = [1, 2, 3];
console.log(arr.some(n => n > 2)); // true
console.log(arr.every(n => n > 0)); // true

• some: 하나라도 조건을 만족하면 true
• every: 전부 만족해야 true

---

✅ 정리 요약표

메서드	반환값	길이 변화	주용도
forEach	없음	X	단순 반복, 출력
map	새 배열	동일	데이터 변환
filter	새 배열	줄어듦	조건 필터링
reduce	누적 결과	하나	합계, 집계
flat	새 배열	줄어듦	중첩 해제
flatMap	새 배열	유동적	map+flat 결합
find	원소	X	첫 항목 찾기
some / every	boolean	X	조건 검사

---

✍️ 마무리

“배열을 순회하면서 무엇을 얻을 것인가”에 따라 선택해서 사용하기

• 단순 실행: forEach
• 형태 변환: map
• 조건 추출: filter
• 누적 계산: reduce
• 구조 평탄화: flat / flatMap