[JavaScript] 자바스크립트 map()과 flatMap()의 차이점

자바스크립트에서 map()과 flatMap()은 주어진 배열의 요소를 사용해서 새로운 배열로 변환하는 작업을 수행하는 함수들이다. 둘 다 배열의 요소를 사용하고 새로운 배열로 바꿔준다는 공통점은 있지만 몇 가지 차이점이 존재한다.

 

---

Map()

주어진 배열의각 요소에 대해 작성된 콜백 함수를 실행하고, 그 콜백 함수의 리턴값으로 이뤄진 새로운 배열을 생성하는 함수이다.

기존 원본 배열과 동일한 길이의 새로운 배열이 리턴된다. 이때, 기존의 원본 배열을 수정하지 않는다.

 

기본 문법은 아래와 같다.

arr.map(callback[, thisArg])

 

arr : 원본 배열

callback (필수) : 원본 배열의 각 요소에 대해 실행할 함수이며 요소, 인덱스, 배열 전체를 매개변수로 받는다.

thisArg (선택) : 콜백 함수 내에서 사용할 this 값으로, 콜백 함수의 this 값을 지정할 수 있다.

 

 

아래 예시를 살펴보자.

const arr = [1, 2, 3];

const newArr = arr.map((num) => num * 2);
console.log(newArr); // map 리턴값 : [2, 4, 6]
console.log(arr); // 원본 배열 : [1, 2, 3]

위 코드에서 원본 배열 arr은 길이가 3이고 1~3까지의 요소가 존재한다. 이 원본 배열을 순회 하는 map() 함수 내부에 각 요소들을 사용하는 콜백 함수가 작성되어 있다. 이 콜백 함수는 1부터 3까지의 요소들을 2씩 곱하는 기능을 수행한다.

각 요소를 두 배로 만들어 [2, 4, 6]으로 구성된 새로운 배열을 리턴한다. 이때, 원본 배열 arr은 변경되지 않고 그대로 유지된다.

 

 

---

flatMap()

주어진 배열의 각 요소에 대해 작성된 콜백 함수를 실행하고, 그 콜백 함수의 리턴값을 평면화하여 단일 수준의 새로운 배열을 생성하는 함수이다.

리턴되는 새로운 배열은 기존 원본의 배열 길이와 다를 수 있다. 이때, 기존의 원본 배열을 수정하지 않는다.

 

기본 문법은 아래와 같다.

arr.flatMap(callback[, thisArg])

 

arr : 원본 배열

callback (필수) : 원본 배열의 각 요소에 대해 실행할 콜백 함수이며 요소, 인덱스, 배열 전체를 매개변수로 받는다.

thisArg (선택) : 콜백 함수 내에서 사용할 this 값으로, 콜백 함수의 this 값을 지정할 수 있다.

 

 

여기까지 보면 map()과 flatMap()은 큰 차이가 없어 보인다. 둘의 차이는 리턴 값에 있다.

아래 예시를 살펴보자.

const arr = [1, 2, 3];

/* map() */
const mapArr = arr.map((num) => [num, num * 2]);
console.log(mapArr); // map 리턴값 : [[1, 2], [2, 4], [3, 6]]

/* flatMap() */
const flatMapArr = arr.flatMap((num) => [num, num * 2]);
console.log(flatMapArr); // flatMap 리턴값 : [1, 2, 2, 4, 3, 6]

map()과 flatMap()의 차이가 보이는가 ? 두 함수는 사용하는 법도 같고, 같은 원본 배열을 사용하며, 콜백 함수 또한 동일하게 작성되었다.

 

콜백 함수는 원본 배열 1~3까지의 각 요소를 순회하며 배열을 생성해서 리턴해야한다. 하지만 map() 함수는 이차원 배열이 리턴되는 반면에, flatMap() 함수는 각 요소의 배열들을 풀어서 1차원 배열로 만들어 리턴하였다.

 

 

 

flat이란?

flat이란 평면화를 한다는 뜻으로 중첩된 이중 구조를 가진 데이터를 단일 수준으로 단순화 하여 펼친다는 뜻이다. 즉, 중첩된 배열이나 객체가 있을 때, 중첩된 구조를 제거하고 모든 요소를 하나의 배열 또는 객체에 넣는 작업이다.

 

flatMap()은 콜백 함수를 실행한 결과값이 복잡한 데이터 구조를 가지고 있으면, 이를 단순화하고 처리하기 쉬운 형태로 변경시켜 최종 결과값을 리턴한다. 

 

---

결론을 요약하자면 map()과 flatMap()은 복잡한 데이터 구조를 리턴하냐 리턴하지 않느냐의 차이이다. map()은 콜백함수의 결과값이 정직하게 리턴되고, flatMap()은 단일 구조의 배열이나 객체를 리턴한다.

 

map의 종류가 늘어나는 것은 배열 순회 방법에 선택지를 넓힐 수 있으며, 개발자가 상황에 맞게 둘을 구별해서 사용하면 유용하게 코드를 작성할 수 있을 것이다.