Good way to chain filter functions in javascript

Store your filter functions in an array and have array.reduce() run through each filter, applying it to the data. This comes at the cost of running through all of them even when there's no more data to filter.

const data = [...]
const filters = [f1, f2, f3, ...]
const filteredData = filters.reduce((d, f) => d.filter(f) , data)

Another way to do it is to use array.every(). This takes the inverse approach, running through the data, and checking if all filters apply. array.every() returns false as soon as one item returns false.

const data = [...]
const filters = [f1, f2, f3, ...]
const filteredData = data.filter(v => filters.every(f => f(v)))

Both are similar to your first and second samples, respectively. The only difference is it doesn't hardcode the filters or conditions.

interesting question

data = new Array(111111).fill().map((a,n) => n);

const f1 = (a) => a % 2;
const f2 = (a) => a % 5;
const f3 = (a) => a > 347;
const filters = [f1, f2, f3];

var benches = [
  [ "filter().filter.. - 1", () => {
    var res = data.filter(a=>a%2).filter(a=>a%5).filter(a=>a>347);
  }],
  [ "filter(&& &&) - 2", () => {
    var res = data.filter(a=>a%2 && a%5 && a>347);
  }],
  [ "reduce - 3", () => {
    var res = filters.reduce((d, f) => d.filter(f) , data);
  }],
  [ "filter(every) - 4", () => {
    var res = data.filter(v => filters.every(f => f(v)))
  }],
];

function bench(f) {
  var t0 = performance.now();
  var res = f();
  return performance.now() - t0;
}

var times = benches.map( a => [a[0], bench(a[1])] )
            .sort( (a,b) => a[1]-b[1] );
var max = times[times.length-1][1];
times = times.map( a => {a[2] = (a[1]/max)*100; return a; } );
var template = (title, time, n) =>
  `<div>` +
    `<span>${title} &nbsp;</span>` +
    `<span style="width:${3+n/2}%">&nbsp;${Number(time.toFixed(3))}msec</span>` +
  `</div>`;
var strRes = times.map( t => template(...t) ).join("\n");
var $container = document.getElementById("container");
$container.innerHTML = strRes;

body { color:#fff; background:#333; font-family:helvetica; }
body > div > div {  clear:both   }
body > div > div > span {
  float:left;
  width:43%;
  margin:3px 0;
  text-align:right;
}
body > div > div > span:nth-child(2) {
  text-align:left;
  background:darkorange;
  animation:showup .37s .111s;
  -webkit-animation:showup .37s .111s;
}
@keyframes showup { from { width:0; } }
@-webkit-keyframes showup { from { width:0; } }

<div id="container"> </div>

also remember in for-loop and for example with case of two loops one 3000 and one 7 then : 3000x7 > 7x3000 in time measuring .

The two options are not exactly the same, although they could produce the same result

var filtered = data.filter(function(data) {
    return Conditional1
  })
  .filter(function(data) {
    return Conditional2
  })
  .filter(function(data) {
    return Conditional3
  }) etc...;

That option is better if you want to check the conditions independently of one another. You should use that if you need the data filtered by condition1 before filtering by condition2. If what you want is to filter items that match the 3 conditions or a combination of them, use the second one:

var condition1 = Conditional1
var condition2 = Conditional2
var condition3 = Conditional3
etc...

var filtered = data.filter(function(data) {
  return condition1 && condition2 && condition3 && etc...
});

If you think of this as a "for-loop" optimization problem, you can see that the original approach results in iterating the list multiple times.

Your second approach will reduce the iterations to one pass.

After that, you're just looking at the best way to quickly decide whether an item passes muster or not.

not sure about performance but I am in love with reduce method in javascript these days. Something like:

arr.reduce((itemMap, item) => {
    if (item.something !== somethingElse) return itemMap;
    return itemMap.push(item);
}, [])

this works essentially like .filter but you can do much more with it. Like if you want to even map some values, you could do so by updating the item object and returning that item if it matches all the conditionals. Although, not sure how performant this is..

Not the fastest to get all results in an array, but if you just want to get an iterator over the final result, without creating an array, then ECMAScript 2025 offers a filter method on native iterators (instances of Iterator):

const f1 = (a) => a % 2;
const f2 = (a) => a % 5;
const f3 = (a) => a > 347;

const it = Array(111111).keys().filter(f1).filter(f2).filter(f3);
const [first] = it;
console.log(first);

You can of course still use the && operator in a single filter callback.

Using iterator helpers will save on array creation, and will typically yield the first result sooner, as the involved iterators are lazy, so you get the first result before the next ones are consumed.

type PredicateFn = (input: any) => boolean

const isBig: PredicateFn = (n: number): boolean => {
  return n > 100
}
const isEven: PredicateFn = (n: number): boolean => {
  return n % 2 === 0
}

const isInt: PredicateFn = (n: number): boolean => {
  return !n.toString().includes('.')
}


function composeFilters<T>(array: T[], predicates: PredicateFn[]): T[] {
  function filter(input: T) {
    return predicates.every(predicate => predicate(input))
  }
  return array.filter(filter)
}

const input = [1, 2.5, 101, 100.5, 110, 220.24, 333, 400, 500, 223, 111]

const result = composeFilters(input, [isBig, isInt, isEven])

console.log(result)