flatMap()

서비스에서 사용되는 메서드 중 특이한 map인 flatMap을 발견하여 정리하고자 합니다.

 

보통 map을 사용해 새로운 배열을 리턴받는 것만 보아왔는데, flatMap을 사용해 새로운 배열을 리턴받는 것을 보고선

문득 둘의 차이가 궁금해졌습니다. 무슨 차이가 있는걸까요?

특징

map() 메서드는 원래의 배열 구조를 유지한 채로 새로운 배열을 반환합니다.

예시:

let arr = [1, 2, 3];
let newArr = arr.map(x => [x * 2]);
console.log(newArr);// [[2], [4], [6]].  새로운 하위배열을 포함하는 형태로 반환

flatMap() 메서드는 추가적으로 한 단계 깊이까지 평탄화(flatten) 작업을 수행하며 새로운 배열을 반환합니다.

예시:

let arr = [1, 2, 3];
let newArr = arr.flatMap(x => [x * 2]);
console.log(newArr);// [2, 4, 6]. 하위배열들을 평탄화하여 단일레벨의 배열을 반환.

 

언제 사용하는게 효율적일까?

1) 중첩 배열 구조 제거

let arr = [[1], [2, 3], [4, 5, 6]];
let newArr = arr.flatMap(item => item);
console.log(newArr); // [1, 2, 3, 4, 5, 6]

 

2) 2) 매핑 함수가 여러 개의 값을 반환할 때

let arr = [1, 2, 3];
let newArr = arr.flatMap(item => {
  if (item % 2 === 0) {
    return [item, item * 2];// 짝수인 경우 해당 요소와 그 요소의 두 배 값을 반환
  } else {
    return [item];// 홀수인 경우 해당 요소만 반환
  }
});

 

예시를 통해 느낀 것은 데이터의 구조를 변경하는 데 map()보단 flatMap()가 효과적일 것이라는 겁니다.

 

서버 response를 확인 시, 2차원 배열로 데이터가 전달되고 있을 때 depth를 줄여

접근을 쉽게 만들어 줄 수 있으니까요.

 

Reference

[MDN flatMap]