타입스크립트(자바스크립트) 배열 반복(iteration) 메서드 정리

프론트엔드 개발에서 배열을 다룰 때 자주 사용하는 반복(iteration) 메서드들에 대해 정리해봅니다.

map, filter, forEach, find, reduce 등은 모두 배열의 각 요소를 순회하며 무언가를 처리하는 함수형 도구입니다.

---

✅ 1. map()

배열의 각 요소를 **변형(transform)**하여 새로운 배열을 생성

• ✅ 리턴값 필요: 각 요소를 어떻게 바꿀지 return 필수

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

• 원본 배열 유지됨
• JSX에서도 아주 자주 쓰임

{todoList.map((todo) => (
  <div key={todo.id}>{todo.text}</div>
))}

---

✅ 2. filter()

조건에 맞는 요소만 걸러내서 새 배열 반환

• ✅ 리턴값 필요: true를 return하면 유지, false면 제거됨

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

• 원본 배열은 변경되지 않음

---

✅ 3. forEach()

배열 요소 하나하나에 대해 **부수 효과(side-effect)**를 수행. 새 배열은 반환하지 않음

• ❌ 리턴값 무시됨 (return 해도 의미 없음)

const numbers = [1, 2, 3];
numbers.forEach((n) => console.log(n));

• 출력, 상태 변경, DOM 조작 등에 적합

---

✅ 4. find()

조건을 만족하는 첫 번째 요소를 반환 (없으면 undefined)

• ✅ 리턴값 필요: 조건을 만족하면 return true
• ❗ 배열이 아닌 하나의 요소 반환

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const user = users.find((u) => u.name === 'Bob');
// { id: 2, name: 'Bob' }

---

✅ 5. reduce()

배열을 누적하여 단일 값으로 축약할 때 사용

• ✅ 리턴값 필요: 누적할 값을 계속 return 해야 함

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

• 누적 계산, 객체 집계, 통계 계산 등에 유용

---

✅ 6. some() / every()

일부/전체 요소가 조건을 만족하는지 여부를 확인

• ✅ 리턴값 필요: 조건을 만족하는지를 boolean으로 return

const hasEven = [1, 3, 5, 6].some((n) => n % 2 === 0); // true
const allPositive = [1, 2, 3].every((n) => n > 0); // true

• some: 하나라도 조건 만족하면 true
• every: 모두 조건 만족해야 true

---

📌 요약 표

map	✅ 필수	새 배열	각 요소 변형
filter	✅ 필수	새 배열	조건 필터링
forEach	❌ 무시됨	없음	side effect 처리
find	✅ 필수	요소 하나	조건에 맞는 첫 값 찾기
reduce	✅ 필수	단일 값	누적 계산, 집계
some / every	✅ 필수	boolean	조건 만족 여부 판별

---

이런 고차 배열 메서드들은 for문보다 선언적이고 가독성이 높으며, 함수형 패러다임과 궁합이 좋습니다.

실전에서는 map + filter + find의 조합으로 대부분의 UI 렌더링과 데이터 처리 작업이 가능합니다!