Run results for: Filtering and mapping with .filter(...).map(...) vs .flatMap(...) vs custom filterMap(...)

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Browser: Chrome 126

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

filterMapIndices

5.4M/s

.filter.map

3.7M/s

filterMapEntries

2.7M/s

.flatMap

864K/s

View exact numbers

Test name	Executions per second
✓ filterMapIndices	5,370,224 Ops/sec
.filter.map	3,703,176 Ops/sec
filterMapEntries	2,748,371 Ops/sec
.flatMap	863,757 Ops/sec

Script Preparation code:

var arr = new Array(100).fill(null).map((val, index) => index);

function filterMapEntries(
  arr,
  filterFn,
  mapFn,
) {
  const result = [];
  for (const [i, value] of arr.entries()) {
    if (filterFn(value)) {
      result.push(mapFn(value, i));
    }
  }
  return result;
}

function filterMapIndices(
  arr,
  filterFn,
  mapFn,
) {
  const result = [];
  for (let i = 0; i < arr.length; i += 1) {
    const value = arr[i];
    if (filterFn(value)) {
      result.push(mapFn(value, i));
    }
  }
  return result;
}

Tests:

.filter.map
const a = arr .filter((val) => val % 2 === 0) .map((val) => val + 10);
.flatMap
const a = arr.flatMap((val) => val % 2 === 0 ? [val + 10] : [])
filterMapEntries
const a = filterMapEntries(arr, (val) => val % 2 === 0, (val) => val + 10);
filterMapIndices
const a = filterMapIndices(arr, (val) => val % 2 === 0, (val) => val + 10);