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

Test name	Executions per second
.filter.map	1571797.1 Ops/sec
.flatMap	346118.4 Ops/sec
filterMapEntries	1111850.6 Ops/sec
filterMapIndices	2311454.5 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