🗂️ 09. 배열 고차함수 — map·filter·reduce를 제대로 쓰는 시니어의 사고법

const posts = [
  { id: 1, title: "클로저", viewCount: 1234, isPublished: true },
  { id: 2, title: "this 바인딩", viewCount: 567, isPublished: false },
  { id: 3, title: "Promise", viewCount: 890, isPublished: true },
];
 
// ❌ 순진한 코드 — 명시적 for 루프 + 새 배열
const titles = [];
for (const post of posts) {
  titles.push(post.title);
}
 
// ✅ map — 의도 명확, 한 줄
const titles = posts.map((post) => post.title);
// ["클로저", "this 바인딩", "Promise"]
 
// 객체 변환 (DTO 패턴)
const postSummaries = posts.map(({ id, title, viewCount }) => ({
  id,
  title,
  viewCount,
  // 서버 응답 그대로 노출하지 않고 프론트 전용 형태로 변환
  formattedViews: viewCount.toLocaleString(),
}));
 
// React에서의 사용
const PostList = ({ posts }) => (
  <ul>
    {posts.map((post) => (
      <li key={post.id}>{post.title}</li> // key 필수!
    ))}
  </ul>
);

// 공개된 게시글만
const publishedPosts = posts.filter((post) => post.isPublished);
// [{ id: 1, ...}, { id: 3, ...}]
 
// 조회수 500 이상인 게시글
const popularPosts = posts.filter((post) => post.viewCount >= 500);
 
// 복합 조건
const featuredPosts = posts.filter(
  (post) => post.isPublished && post.viewCount >= 1000
);
 
// 중복 제거 (원시값)
const tags = ["js", "react", "js", "css", "react"];
const uniqueTags = tags.filter((tag, index) => tags.indexOf(tag) === index);
// ["js", "react", "css"]
 
// 더 현대적: Set으로 중복 제거
const uniqueTags2 = [...new Set(tags)];

// 기본 형태: reduce(callback, initialValue)
// callback(accumulator, currentValue, index, array) → nextAccumulator
 
// 합계
const totalViews = posts.reduce((sum, post) => sum + post.viewCount, 0);
// 1234 + 567 + 890 = 2691
 
// 객체 그룹핑 (매우 자주 쓰이는 패턴)
const users = [
  { id: 1, name: "영철", role: "junior" },
  { id: 2, name: "영호", role: "lead" },
  { id: 3, name: "영수", role: "lead" },
  { id: 4, name: "영숙", role: "designer" },
];
 
const byRole = users.reduce((groups, user) => {
  const { role } = user;
  return {
    ...groups,
    [role]: [...(groups[role] ?? []), user],
  };
}, {});
// {
//   junior: [{ id: 1, name: "영철", ... }],
//   lead: [{ id: 2, ... }, { id: 3, ... }],
//   designer: [{ id: 4, ... }]
// }
 
// ID를 키로 하는 Map 생성 (O(1) 조회용)
const postsById = posts.reduce((map, post) => {
  map[post.id] = post;
  return map;
}, {});
postsById[1]; // { id: 1, title: "클로저", ... } — O(1)!

// ❌ filter + map — 두 번 순회 (각각 새 배열 생성)
const result = posts
  .filter((post) => post.isPublished)
  .map(({ id, title, viewCount }) => ({ id, title, viewCount }));
 
// ✅ reduce 하나로 — 한 번 순회, 배열 하나만 생성
const result = posts.reduce((acc, post) => {
  if (!post.isPublished) return acc; // filter 역할
  acc.push({ id: post.id, title: post.title, viewCount: post.viewCount }); // map 역할
  return acc;
}, []);
 
// 주의: 소량 데이터에서는 filter + map이 더 가독성이 좋다.
// reduce 최적화는 배열이 충분히 클 때 의미 있다.

const posts = [
  { id: 1, title: "클로저", isPublished: true },
  { id: 2, title: "Promise", isPublished: false },
  { id: 3, title: "async/await", isPublished: true },
];
 
// find — 조건에 맞는 첫 번째 원소 반환 (없으면 undefined)
const foundPost = posts.find((p) => p.id === 2);
// { id: 2, title: "Promise", isPublished: false }
 
// 찾자마자 순회 중단 → filter보다 효율적 (하나만 찾을 때)
 
// findIndex — 인덱스 반환 (없으면 -1)
const index = posts.findIndex((p) => p.id === 2); // 1
// 배열에서 특정 항목 교체/삭제 시 유용
 
// 배열에서 항목 교체 패턴 (불변)
const togglePublish = (posts, targetId) =>
  posts.map((p) =>
    p.id === targetId ? { ...p, isPublished: !p.isPublished } : p
  );
 
// some — 하나라도 조건 충족하면 true (단락 평가)
const hasUnpublished = posts.some((p) => !p.isPublished); // true
// 찾자마자 true 반환 — 전체 순회 안 함
 
// every — 모두 조건 충족하면 true
const allPublished = posts.every((p) => p.isPublished); // false
// 실패하자마자 false 반환 — 전체 순회 안 함
 
// includes — 원시값 포함 여부
const tags = ["js", "react", "css"];
tags.includes("react"); // true (find보다 간단)

// 영수네 커뮤니티 — 게시글 목록 필터링/정렬/페이지네이션 파이프라인
 
const getPaginatedPosts = ({
  posts,
  category,
  minViews = 0,
  sortBy = "viewCount",
  page = 1,
  pageSize = 10,
}) => {
  return posts
    .filter((p) => !category || p.category === category) // 카테고리 필터
    .filter((p) => p.isPublished && p.viewCount >= minViews) // 공개 + 조회수 필터
    .sort((a, b) => b[sortBy] - a[sortBy]) // 정렬 (내림차순)
    .slice((page - 1) * pageSize, page * pageSize); // 페이지네이션
};
 
// 사용
const result = getPaginatedPosts({
  posts: allPosts,
  category: "javascript",
  minViews: 100,
  sortBy: "viewCount",
  page: 2,
  pageSize: 10,
});
 
// 함수형 파이프라인 — compose/pipe 패턴
const pipe =
  (...fns) =>
  (value) =>
    fns.reduce((acc, fn) => fn(acc), value);
 
const processUsers = pipe(
  (users) => users.filter((u) => u.isActive),
  (users) => users.map((u) => ({ ...u, displayName: `${u.name} (${u.role})` })),
  (users) => users.sort((a, b) => a.name.localeCompare(b.name))
);

// ❌ 루프 안에서 배열 메서드 중복 호출
const isValidComment = (commentId) => {
  // posts.find를 comment마다 호출 → O(n * m)
  const post = posts.find((p) => p.comments.includes(commentId));
  return !!post;
};
 
// ✅ 먼저 Set으로 변환 → O(1) 조회
const commentIdSet = new Set(
  posts.flatMap((p) => p.comments)
);
const isValidComment = (commentId) => commentIdSet.has(commentId); // O(1)
 
// flatMap — map + flat(1) 결합
const nestedTags = [
  { title: "React 기초", tags: ["react", "js"] },
  { title: "Next.js 심화", tags: ["nextjs", "react", "ssr"] },
];
 
// ❌ map + flat
const allTags = nestedTags.map((p) => p.tags).flat();
 
// ✅ flatMap — 한 번에
const allTags = nestedTags.flatMap((p) => p.tags);
// ["react", "js", "nextjs", "react", "ssr"]
 
// sort의 불변성 주의
const posts = [{ id: 3 }, { id: 1 }, { id: 2 }];
 
// ❌ sort는 원본 배열을 변경함!
const sorted = posts.sort((a, b) => a.id - b.id); // posts도 변경됨!
 
// ✅ 복사 후 정렬
const sorted = [...posts].sort((a, b) => a.id - b.id);
// 또는 (ES2023)
const sorted = posts.toSorted((a, b) => a.id - b.id); // 원본 불변 새 메서드

const result = posts.reduce((acc, p) => ({
  ...acc,
  total: acc.total + 1,
  views: acc.views + p.viewCount,
  published: acc.published + (p.isPublished ? 1 : 0),
}), { total: 0, views: 0, published: 0 });

// ❌ React state 직접 변경 — 리렌더 안 됨!
const [posts, setPosts] = useState([...]);
 
const handleSort = () => {
  posts.sort((a, b) => a.viewCount - b.viewCount); // 원본 직접 변경
  setPosts(posts); // 동일한 배열 참조 → React가 변경을 감지 못함
};
 
// ✅ 복사 후 정렬 — 새 배열 참조
const handleSort = () => {
  const sorted = [...posts].sort((a, b) => a.viewCount - b.viewCount);
  setPosts(sorted); // 새 배열 참조 → 리렌더 발생
};
 
// ✅ ES2023 toSorted — 원본 불변 새 메서드
const handleSort = () => {
  setPosts(posts.toSorted((a, b) => a.viewCount - b.viewCount));
};