Benchmark: fastest filter and map

HTML Preparation code:


<div id=''></div>

Script Preparation code:

var testArray = [
  {
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
      testString: 'test string',
      testNumber: 12345,
    },
    testArray: [
      {
        myName: 'test name',
        myNumber: 123245,
      },
    ],
  },
  {
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
      testString: 'test string',
      testNumber: 12345,
    },
    testArray: [
      {
        myName: 'test name',
        myNumber: 123245,
      },
    ],
  },

  {
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
      testString: 'test string',
      testNumber: 12345,
    },
    testArray: [
      {
        myName: 'test name',
        myNumber: 123245,
      },
    ],
  },

  {
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
      testString: 'test string',
      testNumber: 12345,
    },
    testArray: [
      {
        myName: 'test name',
        myNumber: 123245,
      },
    ],
  },

  {
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
      testString: 'test string',
      testNumber: 12345,
    },
    testArray: [
      {
        myName: 'test name',
        myNumber: 123245,
      },
    ],
  },
];

var testStringArray = [
  'Random description.',
  'Random description.',
  'Random description.',
  'Random description.',
];

var merged = testStringArray.concat(testArray);

var baseLine = () => {
  return merged.map(elem => elem);
};

const filterMapA = (array, predicate, mapFn) => {
  return array.reduce((accumulator, element, index) => {
    if (!predicate(element, index, array)) {
      return accumulator;
    }
    const shouldClone = typeof element === 'object' || Array.isArray(element);
    return [
      ...accumulator,
      mapFn(
        shouldClone ? structuredClone(element) : element,
        accumulator.length - 1,
      ),
    ];
  }, []);
};

const filterMapB = (array, predicate, mapFn) => {
  return array.reduce((accumulator, element, index) => {
    if (!predicate(element, index, array)) {
      return accumulator;
    }

    return [
      ...accumulator,
      mapFn(structuredClone(element), accumulator.length - 1),
    ];
  }, []);
};

const filterMapC = (array, predicate, mapFn) => {
  return array.reduce((accumulator, element, index) => {
    if (!predicate(element, index, array)) {
      return accumulator;
    }

    return [...accumulator, mapFn(element, accumulator.length - 1)];
  }, []);
};

const filterMapD = (array, predicate, mapFn) => {
  return array.reduce((accumulator, element, index) => {
    if (!predicate(element, index, array)) {
      return accumulator;
    }
    accumulator.push(mapFn(element, accumulator.length - 1));
    return accumulator;
  }, []);
};

const filterMapE = (array, predicate, mapFn) => {
  const length = array.length;
  const result = [];
  for (let index = 0; index < length; index++) {
    const value = array[index];
    if (predicate(value, index, array)) {
      result.push(mapFn(value, result.length - 1));
    }
  }
  return result;
};

var checkBeforeClone = () => {
  filterMapA(
    merged,
    value => !!value,
    value => value,
  );
};

var justClone = () => {
  filterMapB(
    merged,
    value => !!value,
    value => value,
  );
};

var twoPass = () => {
  merged.filter(value => !!value).map(value => value);
};

var noCopy = () => {
  filterMapC(
    merged,
    value => !!value,
    value => value,
  );
};

var noCopy2 = () => {
  filterMapD(
    merged,
    value => !!value,
    value => value,
  );
};

var forLoopFilterMap = () => {
  filterMapE(
    merged,
    value => !!value,
    value => value,
  );
};

Tests:

base line
baseLine()
typeof before clone
checkBeforeClone()
just clone
justClone()
two passes
twoPass()
no copy
noCopy()
no copy2
noCopy2()
plain for loop
forLoopFilterMap()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
base line
typeof before clone
just clone
two passes
no copy
no copy2
plain for loop

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Linux

View result in a separate tab

Test name	Executions per second
base line	11823770.0 Ops/sec
typeof before clone	86344.4 Ops/sec
just clone	70554.4 Ops/sec
two passes	8101998.0 Ops/sec
no copy	4053722.0 Ops/sec
no copy2	10859910.0 Ops/sec
plain for loop	11351480.0 Ops/sec

fastest filter and map (version: 3)

Comparing performance of: base line vs typeof before clone vs just clone vs two passes vs no copy vs no copy2 vs plain for loop

Created: 2 months ago by: Registered User

Jump to the latest result

base line

typeof before clone

just clone

two passes

no copy

no copy2

plain for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A