Run results for: fastest filter and map

Run details:

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

Browser: Chrome 120

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
base line	11875754.0 Ops/sec
typeof before clone	85060.0 Ops/sec
just clone	70298.6 Ops/sec
two passes	8146348.0 Ops/sec
no copy	4078645.5 Ops/sec
no copy2	10916347.0 Ops/sec
plain for loop	15838686.0 Ops/sec

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

Run results for: fastest filter and map

base line

typeof before clone

just clone

two passes

no copy

no copy2

plain for loop