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

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser: Chrome 122

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

filterMapIndices

2.3M/s

.filter.map

1.6M/s

filterMapEntries

1.1M/s

.flatMap

346K/s

View exact numbers

Test name	Executions per second
✓ filterMapIndices	2,311,454 Ops/sec
.filter.map	1,571,797 Ops/sec
filterMapEntries	1,111,851 Ops/sec
.flatMap	346,118 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);