reduce를 filter처럼 써보기

[HOJOON07]

예전에 블로그를 탐방하다가 좋은 글을 본적이 있어서 제 블로그에 글을 썼던 경험이 생각나서 적어봤습니다.

const { a, b, c, d } = types.reduce(
    (acc, type) => {
      switch (types.type) {
        case 'a':
          acc.a.push(type);
          break;
        case 'b':
          acc.b.push(type);
          break;
        case 'c':
          acc.c.push(type);
          break;
        case 'd':
          acc.d.push(type);
          break;
        default:
          acc.all_types.push(type);
          break;
      }
      return acc;
    },
    {
      a: [],
      b: [],
      c: [],
      d: [],
    } as Record<string, Types[]>,
  );

코드가 길어졌을 수도 있다고 생각하지만 같은 배열을 4번이나 반복하던 것을 한번으로 줄이고 로직만 따로 분리하면 유용하게 쓸 수 있습니다.!!

추가로 객체를 반복문처럼 돌리기 위해서는

const obj = {
 a: "1",
 b: "2",
 c: "3"
};

console.log(Object.entries(obj))
// 3) [Array(2), Array(2), Array(2)]

0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]

리액트에서

 {Object.entries(types).map(([name, type]) => (
      <>
        <h3>{name}</h3>
        <ul className="type">
          {type.map((item) => <PlayerCard key={item.key} />)}
        </ul>
      </>
    ))}

원래 코드라면

<h3>a</h3>
<ul className="list">
	{list.map((name) => <PlayerCard key={name.key} />))} 		
</ul>
<h3>b</h3>
<ul className="list">
	{list.map((name) => <PlayerCard key={name.key} />))} 		
</ul>
<h3>c</h3>
<ul className="list">
	{list.map((name) => <PlayerCard key={name.key} />))} 		
</ul>