Benchmark: order variants find & filter vs reduce

Script Preparation code:

var id = "085805540784";
var variants = [
  {
    id: "085805540753",
    shade: {
      normalizedColor: "BLACK",
      editorialColor: "Black",
      swatchColor: "121212",
      swatchImage: "",
      __typename: "Shade"
    },
    size: null,
    price: {
      numericalPrice: 32,
      formattedPrice: "$32",
      __typename: "Price"
    },
    stockLevel: 3,
    maxOrderQuantity: 6,
    __typename: "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"
  },
  {
    id: "085805540821",
    shade: {
      normalizedColor: "BLUE",
      editorialColor: "Blue",
      swatchColor: "1c418d",
      swatchImage: "",
      __typename: "Shade"
    },
    size: null,
    price: {
      numericalPrice: 32,
      formattedPrice: "$32",
      __typename: "Price"
    },
    stockLevel: 2,
    maxOrderQuantity: 6,
    __typename: "Variant"
  },
  {
    id: "085805540852",
    shade: {
      normalizedColor: "PURPLE",
      editorialColor: "Purple",
      swatchColor: "903388",
      swatchImage: "",
      __typename: "Shade"
    },
    size: null,
    price: {
      numericalPrice: 32,
      formattedPrice: "$32",
      __typename: "Price"
    },
    stockLevel: 8,
    maxOrderQuantity: 6,
    __typename: "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];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
find & filter - 2 loops
reduce - 1 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: 3 years ago)

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/OS: Chrome 85 on Mac OS X 10.15.6

View result in a separate tab

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

order variants find & filter vs reduce (version: 0)

Comparing performance of: find & filter - 2 loops vs reduce - 1 loop

Created: 3 years ago by: Registered User

Jump to the latest result

find & filter - 2 loops

reduce - 1 loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A