배열 메서드 완벽 정리: map, filter, reduce 활용법

 

자바스크립트(JavaScript)로 개발하다 보면 배열 데이터를 다루는 일이 거의 절반 이상을 차지합니다. 과거에는 for 문이나 forEach를 주로 사용했지만, 현대 자바스크립트에서는 선언적 프로그래밍을 지향하며 map, filter, reduce를 사용하는 것이 표준이 되었습니다.

코드의 가독성을 높이고 버그를 줄여주는 이 세 가지 핵심 메서드를 풍부한 예제와 함께 마스터해 보겠습니다.

1. Array.prototype.map() : "데이터 변환기"

map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 기존 배열은 변경되지 않습니다(불변성 유지).

📝 핵심 포인트

• 배열의 길이는 변하지 않습니다 (Input 개수 = Output 개수).
• 데이터를 일정한 규칙에 따라 가공할 때 사용합니다.

실무 예제 1: 숫자 배열 가공

const numbers = [1, 2, 3, 4, 5];

// 모든 숫자에 2를 곱하기
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

실무 예제 2: 객체 배열에서 특정 속성만 추출

const users = [
  { id: 1, name: '홍길동', email: 'hong@example.com' },
  { id: 2, name: '김철수', email: 'kim@example.com' },
  { id: 3, name: '이영희', email: 'lee@example.com' }
];

// 사용자 이름만 모아서 새로운 배열 만들기
const userNames = users.map(user => user.name);

console.log(userNames); // ["홍길동", "김철수", "이영희"]

2. Array.prototype.filter() : "데이터 여과기"

filter 메서드는 주어진 함수의 테스트를 통과하는(결과가 true인) 모든 요소를 모아 새로운 배열을 반환합니다.

📝 핵심 포인트

• 조건에 맞는 요소만 걸러낼 때 사용합니다.
• 결과가 없으면 빈 배열 []을 반환합니다.

실무 예제 1: 특정 조건의 숫자 필터링

const scores = [45, 80, 92, 60, 38, 100];

// 60점 이상인 '합격자' 점수만 추출
const passingScores = scores.filter(score => score >= 60);

console.log(passingScores); // [80, 92, 60, 100]

실무 예제 2: 쇼핑몰 카테고리 필터링

const products = [
  { name: '노트북', category: 'electronics', price: 1200000 },
  { name: '셔츠', category: 'clothing', price: 35000 },
  { name: '마우스', category: 'electronics', price: 50000 },
  { name: '바지', category: 'clothing', price: 45000 }
];

// 가전제품(electronics) 카테고리만 필터링
const electronics = products.filter(item => item.category === 'electronics');

console.log(electronics);
// [{ name: '노트북', ... }, { name: '마우스', ... }]

3. Array.prototype.reduce() : "데이터 응축기"

reduce는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 가장 강력하지만 구조가 조금 더 복잡합니다.

📝 핵심 포인트

• accumulator (누산기): 이전 작업까지의 결과물
• currentValue: 현재 처리할 요소
• initialValue (초기값): 반드시 설정해 주는 것이 안전합니다.

실무 예제 1: 총합 계산하기

const prices = [1000, 2500, 4000, 1500];

// 모든 가격의 합계 구하기
const totalPrice = prices.reduce((acc, cur) => {
  return acc + cur;
}, 0); // 초기값 0

console.log(totalPrice); // 9000

실무 예제 2: 배열을 객체로 변환 (데이터 그룹화)

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

// 과일별 개수를 세는 객체 만들기
const fruitCounts = fruits.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {}); // 초기값 빈 객체 {}

console.log(fruitCounts); 
// { apple: 3, banana: 2, orange: 1 }

4. 메서드 체이닝 (Method Chaining)

이 메서드들의 진가는 여러 개를 연결해서 사용할 때 나타납니다. 코드 한 줄로 복잡한 로직을 해결할 수 있습니다.

실무 시나리오

"재고가 있는 상품 중에서, 전자기기 카테고리 상품들의 총 가격을 구하시오."

const inventory = [
  { name: '모니터', category: 'electronics', price: 300, stock: 5 },
  { name: '키보드', category: 'electronics', price: 100, stock: 0 },
  { name: '티셔츠', category: 'clothing', price: 20, stock: 10 },
  { name: '헤드셋', category: 'electronics', price: 150, stock: 2 }
];

const totalValue = inventory
  .filter(item => item.stock > 0)          // 1. 재고 있는 상품만
  .filter(item => item.category === 'electronics') // 2. 전자기기만
  .map(item => item.price)                // 3. 가격 데이터로 변환
  .reduce((acc, cur) => acc + cur, 0);    // 4. 합계 계산

console.log(totalValue); // 450 (300 + 150)

요약 및 정리

메서드용도결과물

map	요소를 일괄적으로 변경할 때	같은 길이의 새로운 배열
filter	조건에 맞는 요소만 골라낼 때	조건에 맞는 요소들로 구성된 새 배열
reduce	배열을 하나의 값(숫자, 객체, 배열 등)으로 응축할 때	단일 값 (설정에 따라 무엇이든 가능)

이 세 가지 메서드만 자유자재로 다뤄도 자바스크립트 코드가 훨씬 깔끔해지고 함수형 프로그래밍의 이점을 누릴 수 있습니다. 직접 데이터를 변형해 보며 연습해 보세요!