Chaining variable number of filter functions in Javascript

Question

let's say i wanted refactor this approach, rather than using a for loop, is there any other way to do this dynamically

  //to apply filter functions in one loop
  const booleanFilterFunctions = [
    (launchData) =>
      launchData.launch_year === filterState.year ||
      filterState.year === "0000",
    (launchData) => launchData.launch_success === filterState.launch,
    (launchData) => launchData.land_success === filterState.landing,
  ];
return (
 <div className={styles.grid}>
          {data
            .filter((launchData) => {
              let result = true;
              for (let i of booleanFilterFunctions)
                result = result && i(launchData);
              return result;
            })
            .map((launchData) => (
              <a key={launchData.flight_id} className={styles.card}>
                <img alt={launchData.links.mission_patch_small} loading="lazy" src={launchData.links.mission_patch_small}></img>

                <h3>
                  {launchData.mission_name} #{launchData.flight_number}
                </h3>
              </a>
            ))}
        </div>);

hmm maybe but kind of a blurred line between review and asking for a better approach, this certainly isn't for work :p — Ishank Sharma
– Ishank Sharma, Commented Sep 26, 2020 at 17:17
You might want to check out composing predicates using And = (f, g) => x => f(x) && g(x) and Or = (f, g) => x => f(x) || g(x) like I describe in this answer — user3297291
– user3297291, Commented Sep 29, 2020 at 8:20

Bergi · Accepted Answer · 2020-09-26 15:47:25Z

1

You can use the array every method for this:

data.filter(launchData =>
  booleanFilterFunctions.every(i => i(launchData))
)

answered Sep 26, 2020 at 15:47

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ishank Sharma Over a year ago

i'm looking for a composition kind of way, every would take only 1 function, maybe i shoul have been more clear, what i want to do is getList of available functions let's say from a user, apply them all in one go

Bergi Over a year ago

@IshankSharma No, the every in my answer is called on that list of available functions (booleanFilterFunctions) and runs them all (i(launchData)). It does exactly the same thing as the loop in your question.

ankit sinha · Accepted Answer · 2020-09-26 15:59:23Z

0

Instead of applying 3 filter functions one after the another, have you considered chaining the internal boolean logic? From the logic it looks like you want to show the content only when the 3 conditions are fulfilled. You can do something like this..

const filterData = (launchData) =>
  (launchData.launch_year === filterState.year ||
    filterState.year === "0000") &&
  launchData.launch_success === filterState.launch &&
  launchData.land_success === filterState.landing;


return (
 <div className={styles.grid}>
          {data
            .filter(filterData)
            .map((launchData) => (
              <a key={launchData.flight_id} className={styles.card}>
                <img alt={launchData.links.mission_patch_small} loading="lazy" src={launchData.links.mission_patch_small}></img>

                <h3>
                  {launchData.mission_name} #{launchData.flight_number}
                </h3>
              </a>
            ))}
        </div>);

You should be able to go even further on optimization and can avoid the extra iteration through data, by putting the condition directly on the content. Something like,

const shouldShowContent = (launchData) =>
  (launchData.launch_year === filterState.year ||
    filterState.year === "0000") &&
  launchData.launch_success === filterState.launch &&
  launchData.land_success === filterState.landing;


return (
 <div className={styles.grid}>
          {data
            .map((launchData) => shouldShowContent(launchData) && (
              <a key={launchData.flight_id} className={styles.card}>
                <img alt={launchData.links.mission_patch_small} loading="lazy" src={launchData.links.mission_patch_small}></img>

                <h3>
                  {launchData.mission_name} #{launchData.flight_number}
                </h3>
              </a>
            ))}
        </div>);

answered Sep 26, 2020 at 15:59

ankit sinha

366 bronze badges

5 Comments

Ishank Sharma Over a year ago

yes i have but that would default the purpose of question, to allow more dynamic behaviour

Bergi Over a year ago

No, you should not "put the condition directly on the content". That will render an array of false values.

ankit sinha Over a year ago

@Bergi right. But react doesn't render "false" value. That means it'll only render non-falsy elements. Let me know if I'm missing anything here.

Bergi Over a year ago

Yes, react might filter them out for you, but it's still not a good practice to mix different types in the same array. The .filter(shouldShowContent) call is much cleaner (and there's hardly potential for micro-optimisation). At least use something like shouldShowContent(launchData) ? <a>…</a> : null if you think it's necessary.

ankit sinha Over a year ago

Hmm.. right that makes sense to not have react render different types from the same array. Thanks!

Collectives™ on Stack Overflow

Chaining variable number of filter functions in Javascript

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related