[FE] 함수형 프로그래밍 vs 가독성 / 메모리절약 (+ 성능?)

[yeynii]

이슈 내용

함수형 프로그래밍 패러다임을 전반적으로 유지할 지, 특정 상황에는 조금 포기하더라도 가독성과 메모리 절약에 좀 더 신경쓸지 논의가 필요합니다.

• 논란의 대상 1

  <Container>
    {Array.from({ length: 100 }, (_, i) => i).map((v) => {
      const randomSize = Math.random();
      return (
        <Star
          key={v}
          style={{
            width: `${randomSize * 3 + 1}px`,
            height: `${randomSize * 3 + 1}px`,
            animationDuration: `${Math.random() * 5 + 5}s`,
            animationDelay: `${Math.random() * 5}s`,
            top: `${Math.random() * height}px`,
            left: `${Math.random() * width}px`,
          }}
        >
          <Blur />
        </Star>
      );
    })}
  </Container>

컴포넌트 100개 생성을 위해 억지 Array를 생성하는게 아닐까?

• 논란의 대상 2

  // keyword와 매치되는 첫번째 author 찾기
  const findMatchedAuthor = (authors: string[]) => {
    return authors
      .concat()
      .reduce(
        (_, crr, i, arr: string[]) => (crr.toLowerCase().includes(keyword.toLowerCase()) ? arr.splice(i)[0] : ''),
        '',
      );
  };

for 문 break 걸면 끝나는걸 굳이 reduce를 사용해서 가독성을 떨어트린것은 아닐까?

기대 결과

• 납득할만한 결론

[yeynii]

  // keyword와 매치되는 첫번째 author 찾기
  const findMatchedAuthor = (authors: string[]) => {
    return authors
      .concat()
      .filter((v, i, arr: string[]) => v.toLowerCase().includes(keyword.toLowerCase()) && arr.splice(i))[0];
  };

input : ["abc", "yeyun choi", "hoho choi"]
keyword : "choi"
output : "yeyun choi"

filter를 사용해도 원본 array를 splice해서 탈출할 수 있었군요