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()

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

base line

11.8M/s

no copy2

10.9M/s

two passes

8.1M/s

no copy

4.1M/s

typeof before clone

85K/s

just clone

70K/s

Fastest: base line (168.2x faster)

View exact numbers

✓ base line: 11,823,767 ops/sec
• no copy2: 10,894,472 ops/sec
• two passes: 8,146,348 ops/sec
• no copy: 4,078,646 ops/sec
• typeof before clone: 85,060 ops/sec
• just clone: 70,299 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Latest run results:

Run details: (Test run date: 2 years 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

base line

11.8M/s

plain for loop

11.4M/s

no copy2

10.9M/s

two passes

8.1M/s

no copy

4.1M/s

typeof before clone

86K/s

just clone

71K/s

View exact numbers

Test name	Executions per second
✓ base line	11,823,767 Ops/sec
plain for loop	11,351,482 Ops/sec
no copy2	10,859,913 Ops/sec
two passes	8,101,998 Ops/sec
no copy	4,053,722 Ops/sec
typeof before clone	86,344 Ops/sec
just clone	70,554 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

fastest filter and map (version: 3) Benchmark.js

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 years ago by: Registered User

Go to the latest result

base line

typeof before clone

just clone

two passes

no copy

no copy2

plain for loop

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

fastest filter and map (version: 3) Benchmark.js

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 years ago by: Registered User

Go to the latest result

base line

typeof before clone

just clone

two passes

no copy

no copy2

plain for loop

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

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`