Benchmark: Reduce vs Map+FromEntries vs for loop vs forof loop

Script Preparation code:

var data = Array.from(Array(10000).keys());

Tests:

reduce mutating acc
Object.entries(data).reduce((acc, [k, v]) => { acc[k] = v.toString(); return acc; }, {});
map + fromEntries
Object.fromEntries(Object.entries(data).map(([k, v]) => ([k, v.toString()])));
for loop
const dataObject = Object.entries(data) const acc = {} for (let i = 0; i < dataObject.length; i++) { const [k, v] = dataObject[i]; acc[k] = v.toString() }
forof loop
const dataObject = Object.entries(data) const acc = {} for (const [k,v] of dataObject) { acc[k] = v.toString() }
forin loop
const dataObject = Object.entries(data) const acc = {} for (const property in data) { if (data.hasOwnProperty(property)){ acc[property] = data[property].toString(); } }
reduce without mutating acc
Object.entries(data).reduce((acc, [k, v]) => { return { ...acc, [k]: v.toString() }; }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce mutating acc
map + fromEntries
for loop
forof loop
forin loop
reduce without mutating acc

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll dive into explaining the benchmark and its various approaches.

**Benchmark Overview**

The provided benchmark measures the performance of different approaches to process an array of objects using JavaScript. The test case is designed to iterate over the object's entries, perform some operations on each entry, and accumulate the results in a new object.

**Approaches Compared**

1. **Reduce**: This approach uses the `reduce()` method to accumulate the results. The callback function takes two arguments: the accumulator (`acc`) and the current iteration value (`[k, v]`). It updates the accumulator by adding the string representation of each value to it.
2. **Map + FromEntries**: This approach first maps over the object's entries using `map()`, converting each entry into an array with a single element. Then, it uses `Object.fromEntries()` to create a new object from this array of arrays.
3. **For Loop**: This approach uses a traditional for loop to iterate over the object's entries, updating the accumulator by adding the string representation of each value to it.
4. **For-of Loop**: This approach uses a for-of loop (introduced in ECMAScript 2015) to iterate over the object's entries, updating the accumulator by adding the string representation of each value to it.
5. **For-in Loop**: This approach uses a traditional for-in loop to iterate over the object's properties, checking if they are own properties using `hasOwnProperty()`. If so, it updates the accumulator by adding the string representation of each property to it.
6. **Reduce without Mutating Accumulator**: Similar to the first approach, but instead of updating the accumulator directly, it returns a new object with the updated values.

**Pros and Cons of Each Approach**

1. **Reduce**:
	* Pros: Efficient and concise, as it only requires a single callback function.
	* Cons: Can be less readable due to its functional programming style, and may not be suitable for all use cases where side effects are required.
2. **Map + FromEntries**:
	* Pros: More explicit and intuitive than reduce, as it involves two separate operations.
	* Cons: May incur higher overhead due to the additional mapping step, and can result in a larger intermediate array.
3. **For Loop**:
	* Pros: Highly readable and maintainable, with direct access to each property.
	* Cons: Can be less efficient than other approaches, especially for large arrays.
4. **For-of Loop**:
	* Pros: More modern and concise than traditional for loops, with improved readability.
	* Cons: Still may incur some overhead due to the loop's inherent complexity.
5. **For-in Loop**:
	* Pros: Can be used when accessing both own properties and prototype chains, but has its own set of nuances (e.g., using `hasOwnProperty()`).
	* Cons: May be less efficient than other approaches, as it requires additional checks for property existence.
6. **Reduce without Mutating Accumulator**:
	* Pros: Similar to the first approach, with an added layer of readability and maintainability.
	* Cons: Requires more code and may not be suitable for performance-critical use cases.

**Library Usage**

In this benchmark, `Object.entries()` is used to get an array-like object containing the object's entries. No external libraries are required beyond what's built into JavaScript.

**Special JS Features/Syntax**

This benchmark does not explicitly test any special JavaScript features or syntax. However, it does rely on modern language features like for-of loops and Object.fromEntries(), which have become more widespread in recent years.

I hope this explanation provides a thorough overview of the benchmark and its various approaches!

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce mutating acc	1336.0 Ops/sec
map + fromEntries	749.6 Ops/sec
for loop	1595.4 Ops/sec
forof loop	1551.7 Ops/sec
forin loop	503.3 Ops/sec
reduce without mutating acc	43.1 Ops/sec

Related benchmarks:

Reduce vs Map+FromEntries vs for loop vs forof loop (version: 0)

Comparing performance of: reduce mutating acc vs map + fromEntries vs for loop vs forof loop vs forin loop vs reduce without mutating acc

Created: 8 months ago by: Guest

Jump to the latest result

reduce mutating acc

map + fromEntries

for loop

forof loop

forin loop

reduce without mutating acc

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