Benchmark: reduce variants - MeasureThat.net

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>

Previous results

Test case name	Result
for...of
reduce spread
reduce mutate
object.fromEntries ...map

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; rv:79.0) Gecko/20100101 Firefox/79.0

Browser/OS: Firefox 79 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
for...of	4841.6 Ops/sec
reduce spread	22.7 Ops/sec
reduce mutate	5061.4 Ops/sec
object.fromEntries ...map	2513.5 Ops/sec

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

LLMs can make mistakes. Check important info.

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:

**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:

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: 4 years ago by: Registered User

Jump to the latest result

for...of

reduce spread

reduce mutate

object.fromEntries ...map

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):