[JavaScript] map, flatMap, reduce

BE 공부/Node.js

[JavaScript] map, flatMap, reduce

꼬질꼬질두부 2024. 12. 30. 09:41

JavaScript에서 map, flatMap, 그리고 reduce는 배열을 처리할 때 자주 사용되는 고차 함수입니다. 이들은 각각 고유한 목적과 사용 사례를 가지고 있으며, 다양한 방식으로 데이터를 조작할 수 있는 강력한 도구입니다. 이번 블로그에서는 각 함수의 개념과 동작 방식을 코드 예제를 통해 설명하고, 이를 비교하며 각각을 사용하면 좋은 경우를 살펴보겠습니다.

1. map

개념

map 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다. 기존 배열은 변경되지 않습니다.

동작 방식

입력 배열을 순회합니다.
각 요소에 대해 콜백 함수를 실행합니다.
콜백 함수의 반환값으로 구성된 새 배열을 반환합니다.

코드 예제

const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num ** 2);
console.log(squared); // [1, 4, 9, 16]

사용하면 좋은 경우

기존 배열의 각 요소를 변환하여 새로운 배열을 생성하고 싶을 때.
요소의 값을 일정한 규칙에 따라 변경하거나 조작할 때.

2. flatMap

개념

flatMap 함수는 map 함수와 flat 함수(깊이 1)를 결합한 기능을 수행합니다. 각 요소에 대해 콜백을 실행한 결과가 중첩 배열이라면 이를 평탄화하여 단일 배열로 반환합니다.

동작 방식

입력 배열을 순회합니다.
각 요소에 대해 콜백 함수를 실행합니다.
콜백 함수의 결과를 평탄화(깊이 1)하여 단일 배열로 반환합니다.

코드 예제

const words = ["hello", "world"];
const characters = words.flatMap(word => word.split(""));
console.log(characters); // ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

사용하면 좋은 경우

각 요소를 변환한 결과가 배열이고, 이를 하나의 배열로 평탄화해야 할 때.
map과 flat을 조합하여 사용하는 경우.

3. reduce

개념

reduce 함수는 배열을 순회하며, 콜백 함수의 결과를 누적하여 단일 값을 생성합니다. 초기값을 설정할 수 있으며, 배열의 각 요소를 차례로 처리합니다.

동작 방식

초기값(옵션)을 설정합니다.
배열의 각 요소에 대해 콜백 함수를 실행하여 누적값을 업데이트합니다.
마지막으로 누적값을 반환합니다.

코드 예제

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

사용하면 좋은 경우

배열의 값을 기반으로 단일 값을 생성해야 할 때 (예: 합계, 평균, 최대값).
배열을 객체나 다른 데이터 구조로 변환할 때.

4. 비교

기능	map	flatMap	reduce
반환값	변환된 배열	변환되고 평탄화된 배열	단일 값 (배열, 객체, 숫자 등)
주요 목적	각 요소를 변환하여 새로운 배열 생성	각 요소를 변환하고 평탄화하여 새로운 배열 생성	누적 계산 및 단일 값 생성
불변성	기존 배열 유지	기존 배열 유지	기존 배열 유지
평탄화 지원 여부	지원하지 않음	깊이 1 평탄화 지원	지원하지 않음

5. 사용하면 좋은 경우 요약

map

배열의 요소를 일대일로 변환해야 할 때.
예: 숫자를 제곱하거나 객체의 특정 속성을 추출할 때.

flatMap

배열의 요소를 변환한 결과가 중첩 배열이고, 이를 하나의 배열로 평탄화해야 할 때.
예: 문자열을 개별 문자로 나누거나 중첩 데이터를 단순화할 때.

reduce

배열의 값을 기반으로 단일 값(숫자, 객체, 배열 등)을 생성해야 할 때.
예: 배열의 합계를 계산하거나 배열을 객체로 변환할 때.

이처럼 map, flatMap, 그리고 reduce는 각기 다른 목적을 가지고 있지만, 적절한 상황에서 조합하여 사용하면 더욱 강력한 데이터 처리 도구로 활용할 수 있습니다. 코드의 가독성과 효율성을 높이기 위해 상황에 맞는 함수를 선택해 보세요!