flatMap()은 배열을 "평탄화(flatten)"하고 변환하는 메서드입니다. data.pages.flatMap((page) => page.posts)에서 flatMap()은 각 page 객체의 posts 배열을 하나의 큰 배열로 합치는 역할을 합니다.
역할
data.pages는 페이지 배열입니다. 각 페이지는 여러 개의 post를 포함하고 있을 것입니다.
page.posts는 각 페이지에 포함된 post 배열입니다.
flatMap()은 각 page의 posts 배열을 추출하여 하나의 배열로 합칩니다.
즉, flatMap()을 사용하면, data.pages 안에 여러 개의 posts 배열이 있고, 이를 하나의 배열로 합친 결과를 얻을 수 있습니다.
예시:
const data = {
pages: [
{ posts: [{ id: 1 }, { id: 2 }] },
{ posts: [{ id: 3 }, { id: 4 }] },
],
};
const allPosts = data.pages.flatMap((page) => page.posts);
console.log(allPosts);
// 결과: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]flatMap()과 map()의 차이
map()은 각 항목을 변환하여 새로운 배열을 반환합니다. 예를 들어, map()을 사용하면 각 page.posts 배열이 포함된 배열을 반환하게 되므로 배열이 중첩된 상태로 결과가 나옵니다.
코드 복사
const allPostsUsingMap = data.pages.map((page) => page.posts);
console.log(allPostsUsingMap);
// 결과: [[{ id: 1 }, { id: 2 }], [{ id: 3 }, { id: 4 }]]여기서 볼 수 있듯이, map()을 사용하면 각 페이지의 posts 배열이 그대로 포함된 중첩된 배열이 됩니다.
flatMap()은 배열을 평탄화하여, 중첩된 배열을 하나의 배열로 합칩니다.
const allPostsUsingFlatMap = data.pages.flatMap((page) => page.posts);
console.log(allPostsUsingFlatMap);
// 결과: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]따라서, flatMap()을 사용하는 이유는 여러 개의 배열을 하나로 합치기 위함이고, map()을 사용하면 중첩된 배열이 반환됩니다.
결론
flatMap()은 배열을 평탄화하면서 변환하는 데 유용합니다.
map()을 사용하려면 중첩된 배열을 반환하게 되며, 이를 평탄화하려면 추가적인 flat() 메서드를 사용해야 합니다.
예를 들어 map()을 사용할 경우, 중첩된 배열을 풀어내려면 이렇게 해야 합니다:
const allPostsUsingMap = data.pages.map((page) => page.posts).flat();
console.log(allPostsUsingMap);
// 결과: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]flatMap()을 사용하면 map()과 flat()을 따로 사용할 필요가 없으므로 더 간편하고 효율적입니다.
