Run results for: order variants find & filter vs reduce with 10,000 records

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36

Browser: Chrome 85

Operating system: Mac OS X 10.15.6

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
find & filter - 2 loops	4143.7 Ops/sec
reduce - 1 loop	1289.6 Ops/sec

Script Preparation code:

var id = "085805540784";
var variant =   {
    id: "085805540784",
    shade: {
      normalizedColor: "BROWN",
      editorialColor: "Brown",
      swatchColor: "8f3a1d",
      swatchImage: "",
      __typename: "Shade"
    },
    size: null,
    price: {
      numericalPrice: 32,
      formattedPrice: "$32",
      __typename: "Price"
    },
    stockLevel: 4,
    maxOrderQuantity: 6,
    __typename: "Variant"
  }
var ids = [...Array(10000).keys()];
var variantsWithout = ids.map( id => ({...variant, id}));
var variants = variantsWithout.concat([variant]);
  

let reduceArr = [],
  findFilterArr = [];

Tests:

find & filter - 2 loops
const findFilter = (candidateAr, id) => { if (candidateAr[0].id === id) { return candidateAr; } const findVariant = candidateAr.find(variant => variant.id === id); if (findVariant) { const variantsWithout = candidateAr.filter(variant => variant.id !== id); const newVariants = [findVariant].concat(variantsWithout); return newVariants; } return candidateAr; }; findFilterArr = findFilter(variants, id);
reduce - 1 loop
const sortArr = variants.reduce((acc, variant) => { if (variant.id === id) { acc.firstVariant = variant return acc; } acc.remVariants.push(variant) return acc; }, { firstVariant:{}, remVariants:[]}); const { firstVariant, remVariants } = sortArr; reduceArr = [ firstVariant, ...remVariants];

Run results for: order variants find & filter vs reduce with 10,000 records

find & filter - 2 loops

reduce - 1 loop