배열 메서드 (map, filter, reduce)

1. 도입 (왜 배워야 하는가)

JavaScript에서 배열 메서드는 데이터 처리의 매우 중요한 도구입니다. 특히 map, filter, reduce는 배열의 데이터를 효율적으로 변형하고, 필터링하며, 집계하는 데 사용됩니다. 실무에서 자주 마주치는 데이터 처리 작업에서 이 메서드를 활용하지 않으면, 복잡한 반복문을 작성해야 하며, 이는 코드의 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다.

예를 들어, 쇼핑몰에서 장바구니에 담긴 상품들의 총 가격을 계산할 때, 단순히 반복문을 사용하면 코드가 복잡해질 수 있습니다. 이럴 때 reduce 메서드를 활용하면 훨씬 간결하고 명확한 코드를 작성할 수 있습니다. 만약 이 메서드들을 모른다면, 배열 데이터를 다루는 데 많은 시간을 허비하게 될 것입니다.

2. 핵심 개념 설명

2.1 map

map 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 반환합니다.

비유: 요리를 할 때 재료를 다듬는 것과 같습니다. 원래의 재료를 가지고 새로운 상태로 가공하는 것이죠.

2.2 filter

filter 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과가 true인 요소만으로 구성된 새로운 배열을 반환합니다.

비유: 과일 바구니에서 상한 과일을 골라내는 것과 같습니다. 신선한 과일만을 남기는 것이죠.

2.3 reduce

reduce 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하여 단일 값을 반환합니다. 이 메서드는 배열 내 요소를 누적하여 하나의 결과를 생성합니다.

비유: 여러 가지 재료를 섞어서 하나의 반죽을 만드는 과정과 같습니다. 재료들이 합쳐져서 최종 결과를 만들어내는 것이죠.

메서드	설명	반환값
map	각 요소에 함수를 적용하여 새 배열 생성	변형된 새 배열
filter	조건에 맞는 요소만 추출하여 새 배열 생성	조건을 만족하는 배열
reduce	배열 요소를 누적하여 단일 값 반환	단일 값

3. 기본 코드 예제

map 예제

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);

// 실행 결과: [1, 4, 9, 16, 25]

• const numbers = [1, 2, 3, 4, 5]; : 숫자 배열을 정의합니다.
• const squared = numbers.map(num => num * num); : 각 숫자를 제곱해서 새 배열을 만듭니다.

filter 예제

const ages = [12, 18, 20, 15, 30];
const adults = ages.filter(age => age >= 18);

// 실행 결과: [18, 20, 30]

• const ages = [12, 18, 20, 15, 30]; : 나이 배열을 정의합니다.
• const adults = ages.filter(age => age >= 18); : 성인(18세 이상)만 추출하여 새 배열을 만듭니다.

reduce 예제

const prices = [10, 20, 30, 40];
const total = prices.reduce((accumulator, current) => accumulator + current, 0);

// 실행 결과: 100

• const prices = [10, 20, 30, 40]; : 가격 배열을 정의합니다.
• const total = prices.reduce((accumulator, current) => accumulator + current, 0); : 모든 가격을 합산하여 총액을 계산합니다.

4. 실전 활용 예제

쇼핑몰 장바구니 총액 계산

장바구니에 담긴 상품들의 가격을 바탕으로 총액을 계산할 때 reduce를 활용할 수 있습니다.

const cartItems = [
    { name: '상품 A', price: 30 },
    { name: '상품 B', price: 20 },
    { name: '상품 C', price: 50 }
];

const totalPrice = cartItems.reduce((total, item) => total + item.price, 0);
// 실행 결과: 100

사용자 필터링

사용자 목록에서 성인 사용자만 필터링할 때 filter를 사용할 수 있습니다.

const users = [
    { name: '홍길동', age: 17 },
    { name: '이순신', age: 25 },
    { name: '강감찬', age: 19 }
];

const adults = users.filter(user => user.age >= 18);
// 실행 결과: [{ name: '이순신', age: 25 }, { name: '강감찬', age: 19 }]

5. 흔한 실수와 주의사항

실수 1: map과 forEach의 혼동

• 잘못된 코드:

    const result = numbers.forEach(num => num * 2);
    // result는 undefined가 됩니다.

• 올바른 코드:

    const result = numbers.map(num => num * 2);

실수 2: filter에서 올바른 조건 사용

• 잘못된 코드:

    const adults = ages.filter(age => age < 18);
    // 성인이 아닌 나이를 추출합니다.

• 올바른 코드:

    const adults = ages.filter(age => age >= 18);

6. 정리

• map, filter, reduce는 배열 데이터를 가공하고 처리하는 데 매우 유용한 메서드입니다.
• 각각의 메서드는 고유한 목적과 동작 방식이 있으며, 이를 잘 활용하면 코드의 가독성과 효율성을 높일 수 있습니다.
• 실무에서 자주 사용하는 패턴을 익히면 데이터 처리에 대한 자신감을 얻을 수 있습니다.

다음에 학습하면 좋은 주제는 비동기 처리(Promise, async/await)입니다. 이 주제를 통해 데이터 처리와 관련된 더 복잡한 예제들을 다룰 수 있습니다.