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

Latest run results:

Run details: (Test run date: 4 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	1950564.8 Ops/sec
reduce - 1 loop	1655299.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this benchmark.

The test case is designed to compare two different approaches for filtering and reducing an array of objects: `find & filter` vs `reduce`. The input data consists of an array of variant objects, each with properties such as `id`, `shade`, `size`, `price`, etc.

**Find & Filter**

This approach involves using the `filter()` method to create a new array that excludes variants with a specific `id`, and then using the `find()` method to find the first matching variant. The resulting array is then returned.

In the benchmark definition, we can see the implementation of this approach in the `findFilter` function:
```javascript
const findFilter = (candidateAr, id) => {
  // ...
}
```
This implementation has two loops: one for filtering out variants with the wrong `id`, and another for finding the first matching variant.

**Reduce**

This approach involves using the `reduce()` method to process the array of variants. The implementation is as follows:
```javascript
const sortArr = variants.reduce((acc, variant) => {
  if (variant.id === id) {
    acc.firstVariant = variant;
    return acc;
  }
  acc.remVariants.push(variant);
  return acc;
}, { firstVariant: {}, remVariants: [] });
```
This implementation has a single loop that iterates through the array of variants.

**Pros and Cons**

Here are some pros and cons of each approach:

**Find & Filter**

Pros:

* Easy to understand and implement
* Can be more efficient for small arrays

Cons:

* Has two loops, which can increase overhead
* May not be as efficient for large arrays

**Reduce**

Pros:

* Often faster and more efficient than `find` and `filter`
* Can be used for more complex processing operations

Cons:

* More complex to understand and implement
* May require additional setup and handling of edge cases

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* Size of the input array: For small arrays, `find` and `filter` might be sufficient. For larger arrays, `reduce` might be more efficient.
* Complexity of processing: If you need to perform complex operations on the array elements, `reduce` might be a better choice.
* Readability and maintainability: If code readability is important, `find` and `filter` might be easier to understand.

**Alternatives**

There are other approaches that could be used for this benchmark, such as:

* Using `map()` and `forEach()` instead of `reduce()`
* Using a library like Lodash or Ramda for functional programming
* Using a more specialized data structure, such as an object with arrays, to avoid the need for filtering and reduction.

However, without seeing the benchmark results, it's difficult to determine which alternative would be most effective.

Related benchmarks:

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

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

Created: 4 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

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