map()과 filter()를 함께 사용할 때 중첩 배열이 생긴다면?

📦 배열을 쌓아. 그 다음 또 쌓아. 그 다음 또..

---

: React나 JavaScript로 데이터를 다룰 때 map()과 filter()를 함께 사용하면 종종 예상치 못한 중첩 배열이 만들어지는 경우가 있다. 필자의 경우는 특정 ID 리스트(rotationData)를 기반으로 챔피언 데이터를 필터링하는 로직을 아래와 같이 작성했다.

const rotationChampionsData = rotationData.map((rotationId: number) =>
  championData.filter((champion: Champion) => Number(champion.key) === rotationId)
);

필터링된 데이터는 다음과 같이 반환됐다.

✅ 필자가 원한 데이터 형식 : [{...}, {...}, {...}, {...}, ...]
⛔ 실제 반환된 데이터 형식 : [[{...}], [{...}], [{...}], [{...}], ...]

🤔 왜냐하면 ..

map() 내부에서 filter() 를 사용하는데 이 filter()의 반환값이 배열이기 때문에 이중 배열이 돼버린 것 !
이와 같이 예상치 못한 중첩 배열을 해결하는 데는 두 가지 방법이 있는데, 첫 번째는 flat()이고, 두 번째는 flatMap() 이다.

💡 해결 방법

---

✅ flat()을 활용한 방법

: flat() 메서드는 배열의 깊이를 줄여주는 역할을 한다. 즉, 기존의 이중 배열을 평탄화(flatten) 할 수 있게 된다.

const rotationChampionsData = rotationData
  .map((rotationId: number) =>
    championData.filter((champion: Champion) => Number(champion.key) === rotationId)
  )
  .flat();

이렇게 하면 map()을 통해 만들어진 이중 배열이 평탄화되면서 원하는 형태의 결과를 얻을 수 있게 된다.

✅ flatMap()을 활용한 방법

: flatMap()은 map()과 flat()을 한 번에 처리할 수 있는 강력한 휘뚜루마뚜루 메서드다. 따라서 위 코드를 더 간결하게 만들 수 있는데,

const rotationChampionsData = rotationData.flatMap((rotationId: number) =>
  championData.filter((champion: Champion) => Number(champion.key) === rotationId)
);

이렇게 하면 map()을 실행한 후 flat()을 따로 호출할 필요 없이 한 번에 평탄화까지 가능하다!

📌 flat() vs flatMap() 비교

메서드	설명	예제
flat()	기존 배열을 평탄화 (중첩 배열 제거)	[[], [], []].flat() → []
flatMap()	map() + flat()을 한 번에 수행	array.flatMap(callback)