자바스크립트 배열 메서드 핵심 정리

자바스크립트를 배우는 사람들이 가장 많이 검색하고 궁금해하는 주제 중 하나는 바로 배열 메서드이다. 그중에서도 map, filter, reduce는 자주 사용되지만 처음에는 헷갈리기 쉬운 함수들이다. 이번 포스팅에서는 이 세 가지 메서드를 깔끔하게 정리해본다.

🔄 map - 배열의 각 요소를 변형

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
  • 설명: 원본 배열의 각 요소를 가공하여 새로운 배열을 반환함.
  • 주요 사용처: 숫자 계산, 객체 구조 변경, JSX 렌더링 등

🚫 filter - 조건에 맞는 요소만 추출

const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]
  • 설명: 조건에 맞는 요소만 걸러낸 새 배열 반환
  • 주요 사용처: 검색 결과 필터링, 리스트 추리기 등

📉 reduce - 배열을 하나의 값으로 축소

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
  • 설명: 배열을 누적해서 단일 값으로 축소할 때 사용
  • 주요 사용처: 총합, 평균 계산, 객체 변환, 그룹핑 등

🧠 map vs filter vs reduce 요약

메서드 반환값 사용 목적
map 가공된 새 배열 요소 변환, 변경
filter 조건에 맞는 배열 요소 추출, 필터링
reduce 하나의 값 누적, 통계, 구조 변경