복잡한 조건에 이름 붙이기 | Frontend Fundamentals

[giscus[bot]]

복잡한 조건에 이름 붙이기 | Frontend Fundamentals

변경하기 쉬운 프론트엔드 코드를 위한 지침서

https://frontend-fundamentals.com/code/examples/condition-name.html

[leesh9098]

중요한 내용이네요
항상 기한 내 구현을 우선시하고 디테일한 부분은 신경을 잘 안쓰다보니 위 글과 같이 변수화를 안써왔습니다

[KNHui]

isPriceInRange와 같이 범위를 검사하는 로직은 수학에서 작성하는 것처럼 쓰는 것이 읽기 좋더라고요:

// minPrice ≤ price ≤ maxPrice
(price) => minPrice <= price && price <= maxPrice

[chweyun]

안녕하세요! 유익한 글 감사합니다.
코드 예시를 보다가 궁금한 점이 있어 댓글 남깁니다.

const matchedProducts = products.filter((product) => {
  return product.categories.some((category) => {
    const isSameCategory = category.id === targetCategory.id;
    const isPriceInRange = product.prices.some(
      (price) => price >= minPrice && price <= maxPrice
    );

    return isSameCategory && isPriceInRange;
  });
});

위 코드에서 product의 개수가 아주 많을 경우에도 isPriceInRange를 계산하기 위해 some을 호출하는 게 적절한 방식인지 궁금합니다.
isSameCategory가 false라면 some을 호출하지 않는 방식이 더 효율적일 수 있을 것 같은데, 이런 경우에는 가독성과 성능 중 어떤 것을 우선하는 게 좋을까요?

[9mande]

실행하지 않고, 로직만 분리하는 방법은 어떨까요?
+) 본문의 코드에서 category를 순회하면서 price를 체크하는 건 어색한 것 같아요.

const isSameCategory = (a: Category, b: Category) => a.id === b.id;
const hasTargetCategory = (categories: Category[], targetCategory: Category) =>
  categories.some((category) => isSameCategory(category, targetCategory));

const isPriceInRange = (price: number, minPrice: number, maxPrice: number) =>
  price >= minPrice && price <= maxPrice;
const hasPriceInRange = (prices: number[], minPrice: number, maxPrice: number) =>
  prices.some((price) => isPriceInRange(price, minPrice, maxPrice));

const matchedProducts = products.filter((product) => {
  return (
    hasTargetCategory(product.categories, targetCategory) &&
    hasPriceInRange(product.prices, minPrice, maxPrice)
  );
});

[Huinno-joonhonoh]

위 개선 코드 중 const isPriceInRange = product.prices.some 값 할당은 product.categories.some 루프 안에서 isSameCategory 값을 할당하는것과 독립적인것으로 보입니다.
product.prices.some, product.categories.some루프를 분리하는게 성능 측면으로나 가독성 측면으로나 이득인게 아닐까요? 😅

[dinnertime-who]

const matchedProducts = products.filter(product => {
// 1) 먼저 카테고리 일치 여부만 검사
const hasCategory = product.categories.some(c => c.id === targetCategory.id);
if (!hasCategory) return false;

// 2) 일치하는 제품에 대해서만 가격 범위 검사
const hasRightPrice = product.prices.some(p => p >= minPrice && p <= maxPrice);
return hasRightPrice;

// 3) ... 이후에 추가되는 검사 로직
});

Huinno-joonhonoh님께서 말씀해주신것 처럼 some 루프를 분리시키면 가독성이나 추후 확장성이 더 좋아질것 같습니다!!