title: Chaining variable number of filter functions in Javascript
body: <p>let's say i wanted refactor this approach, rather than using a for loop, is there any other way
  to  do this dynamically</p>
  <pre><code>  //to apply filter functions in one loop
    const booleanFilterFunctions = [
      (launchData) =&gt;
        launchData.launch_year === filterState.year ||
        filterState.year === &quot;0000&quot;,
      (launchData) =&gt; launchData.launch_success === filterState.launch,
      (launchData) =&gt; launchData.land_success === filterState.landing,
    ];
  return (
   &lt;div className={styles.grid}&gt;
            {data
              .filter((launchData) =&gt; {
                let result = true;
                for (let i of booleanFilterFunctions)
                  result = result &amp;&amp; i(launchData);
                return result;
              })
              .map((launchData) =&gt; (
                &lt;a key={launchData.flight_id} className={styles.card}&gt;
                  &lt;img alt={launchData.links.mission_patch_small} loading=&quot;lazy&quot; src={launchData.links.mission_patch_small}&gt;&lt;/img&gt;
  
                  &lt;h3&gt;
                    {launchData.mission_name} #{launchData.flight_number}
                  &lt;/h3&gt;
                &lt;/a&gt;
              ))}
          &lt;/div&gt;);
  </code></pre>