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/116.0.0.0 Safari/537.36

Browser: Chrome 116

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
.filter.map	1990008.1 Ops/sec
.flatMap	69523.3 Ops/sec
filterMapEntries	995741.3 Ops/sec
filterMapIndices	3028306.8 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);

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

.filter.map

.flatMap

filterMapEntries

filterMapIndices