Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
reduce variants
(version: 0)
Adapted from https://gist.github.com/snapwich/7604b2d827f320e470a07e088e0293f3
Comparing performance of:
for...of vs reduce spread vs reduce mutate vs object.fromEntries ...map
Created:
5 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Script Preparation code:
function getItems(count) { let id = 1; return _.times(count, () => ({ name: "city" + id++, visited: true })) } var items = getItems(1000)
Tests:
for...of
const result = {}; for(let item of items) { result[item.name] = item.visited; }
reduce spread
let initial = {}; const result = items.reduce((accumulator, item) => ({ ...accumulator, [item.name]: item.visited }), initial);
reduce mutate
let initial = {}; const result = items.reduce((accumulator, item) => { accumulator[item.name] = item.visited; return accumulator; }, initial);
object.fromEntries ...map
let result = Object.fromEntries( items.map(({ name, visited }) => [name, visited]) );
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
for...of
reduce spread
reduce mutate
object.fromEntries ...map
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON benchmark and explain what is being tested. **Benchmark Definition** The benchmark is testing four different ways to reduce an array of objects in JavaScript: 1. **For...of loop**: Iterating over the array using a `for...of` loop and accumulating the results in an object. 2. **Reduce spread**: Using the `reduce()` method with the spread operator (`{ ...accumulator }`) to accumulate the results in an object. 3. **Reduce mutate**: Using the `reduce()` method without the spread operator, modifying the accumulator object directly as it iterates over the array. 4. **Object.fromEntries...map**: Converting the array of objects to an array of key-value pairs using `Object.fromEntries()`, mapping each pair to a single value, and then reducing the resulting array. **Library and Special Features** * The benchmark uses Lodash library (`https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js`) for its `_times()` function, which is used to generate an array of objects. * No special JavaScript features or syntax are used in this benchmark. **Options Compared** The benchmark compares the performance of four different approaches: 1. **For...of loop**: Iterating over the array using a `for...of` loop and accumulating the results in an object. 2. **Reduce spread**: Using the `reduce()` method with the spread operator (`{ ...accumulator }`) to accumulate the results in an object. 3. **Reduce mutate**: Using the `reduce()` method without the spread operator, modifying the accumulator object directly as it iterates over the array. 4. **Object.fromEntries...map**: Converting the array of objects to an array of key-value pairs using `Object.fromEntries()`, mapping each pair to a single value, and then reducing the resulting array. **Pros and Cons** Here's a brief summary of the pros and cons of each approach: 1. **For...of loop**: * Pros: Simple, straightforward, and easy to understand. * Cons: May be slower due to the need to create an object for each iteration. 2. **Reduce spread**: * Pros: Concise and efficient, as it avoids creating multiple objects. * Cons: May require a higher proficiency in JavaScript syntax. 3. **Reduce mutate**: * Pros: Fast, as it modifies the accumulator object directly. * Cons: May be less readable due to the need to modify an object directly. 4. **Object.fromEntries...map**: * Pros: Concise and efficient, as it avoids creating multiple objects. * Cons: Requires knowledge of `Object.fromEntries()` and array methods. **Other Considerations** When choosing a method for reducing an array of objects in JavaScript, consider the trade-offs between performance, readability, and maintainability. The benchmark result suggests that **Reduce spread** is the fastest approach, followed closely by **Reduce mutate**. However, **For...of loop** may still be suitable for certain use cases where simplicity and ease of understanding are more important than raw performance. Keep in mind that this benchmark only tests these four approaches and does not account for other factors like caching, memoization, or optimizations specific to the Lodash library.
Related benchmarks:
Immer vs Spread Reducer With Filled State
Building object from arrays
Building object from big arrays
Immer vs Spread
Comments
Confirm delete:
Do you really want to delete benchmark?