Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Loop into two arrays with products
(version: 0)
Benchmark.js
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
Go to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=489358" width="100%" height="500px"></iframe>
Array for
1.7M/s
Array reduce
1.7M/s
View exact numbers
Test name
Executions per second
✓
Array for
1,703,934 Ops/sec
Array reduce
1,663,790 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
concat 2 arrays: Array.prototype.concat vs spread operator
Concat vs Spread (Two Arrays)
Array.prototype.concat vs spread operator (new try)
Array.prototype.concat vs spread operator real
Comments
Confirm delete:
Do you really want to delete benchmark?