Benchmark: Loop into two arrays with products

Tests:

Array reduce
const products = [{id: '189234'}, {id: '12434'}, {id: '12354'}, {id: '13234'}, {id: '12134'}, {id: '12342'}, {id: '12349'}, {id: '12348'}, {id: '12374'}, {id: '12364'}, {id: '12345'}] const result = products.reduce((selectionData, product) => { selectionData[product.id] = true; return selectionData; }, {});
Array for
const selectionData = {}; const products = [{id: '189234'}, {id: '12434'}, {id: '12354'}, {id: '13234'}, {id: '12134'}, {id: '12342'}, {id: '12349'}, {id: '12348'}, {id: '12374'}, {id: '12364'}, {id: '12345'}] for (let i = 0; i < products.length; i++) { const product = products[i]; selectionData[product.id] = true; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array reduce
Array for

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0

Browser/OS: Firefox 113 on Ubuntu

View result in a separate tab

Test name	Executions per second
Array reduce	1663789.6 Ops/sec
Array for	1703934.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark.

**Benchmark Purpose**

The benchmark measures the performance difference between two approaches for creating an object from an array using JavaScript:

1. The traditional `concat()` method followed by `reduce()`.
2. A simple loop to iterate through the array and set properties on an object.

**Options Compared**

In this case, there are only two options being compared: "Array reduce" and "Array for". Both methods aim to achieve the same result, but they differ in their implementation:

* **Array Reduce**: This method uses the `reduce()` function to create an object from an array. It iterates through each element of the array, using the accumulator (`selectionData`) as a temporary object that accumulates properties.
* **Array For**: This method uses a simple loop to iterate through each element of the array and set a property on an object (`selectionData`).

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

### Array Reduce

Pros:

* More concise and expressive code
* Fewer lines of code, making it easier to maintain and modify
* Can be more efficient due to the optimized implementation of `reduce()` in modern JavaScript engines

Cons:

* May have higher overhead due to the function call and potential caching issues
* Less control over the iteration process (e.g., no direct access to individual elements)

### Array For

Pros:

* More control over the iteration process, allowing for fine-grained optimization
* Can be more efficient if you need to iterate through the array multiple times or perform additional operations on each element

Cons:

* More verbose code, making it harder to read and maintain
* May lead to more errors due to the increased complexity of the loop

**Library Usage**

In this benchmark, there is no explicit library usage. However, the `reduce()` method is a built-in JavaScript function that uses internal libraries (e.g., V8 in Chrome) under the hood.

**Special JS Features or Syntax**

There are no special JS features or syntax used in these benchmarks. The code is straightforward and conformant with modern JavaScript standards.

**Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* **Object.fromEntries()**: A newer method (introduced in ES2017) that creates an object from key-value pairs using `Map`. While it might be more concise than the traditional `reduce()` or `for` loop, it may not be as efficient.
* **Array.prototype.forEach()**: An alternative iteration method that calls a provided callback function for each element of the array. It's generally slower than `reduce()` and `for` loops but can provide more flexibility in certain scenarios.
* **Other frameworks or libraries**: Depending on your specific requirements, you might consider using other libraries like Lodash (which includes a `mapValues()` method) or a custom implementation that leverages specific optimizations.

In conclusion, the benchmark provides a straightforward comparison between two approaches for creating an object from an array. While both methods have their trade-offs, the choice ultimately depends on your project's specific needs and performance requirements.

Related benchmarks:

Loop into two arrays with products (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: Array reduce vs Array for

Created: 2 years ago by: Guest

Jump to the latest result

Array reduce

Array for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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