Benchmark: Reduce and Spread vs. Foreach and Mutate 3

Script Preparation code:

var objectsArray = Array(1000).fill(() => {
  const key = Math.random().toString(36).substring(2, 5);
  const value = Math.random().toString(36).substring(2, 5);
  return {[key]: value};
});

Tests:

Reduce and Spread
var combined = objectsArray.reduce((memo, obj) => ({...memo, ...obj}), {});
ForEach and Mutate (for .. in loop)
var combined = {} objectsArray.forEach(obj => { for (key in obj) { combined[key] = obj[key]; } });
Mutate with Object.assign
var combined = Object.assign(...objectsArray)
Foreach and Mutate (Object.assign)
var combined = {} objectsArray.forEach(obj => Object.assign(combined, obj));
Reduce Mutate
var combined = objectsArray.reduce((memo, obj) => Object.assign(memo, obj), {});
reduce mutate 2
var combined = objectsArray.reduce((acc, obj) => { for (key in obj) { acc[key] = obj[key]; } return acc; }, {});
reduce mutate 3
var combined = objectsArray.reduce((acc, obj) => { Object.keys(obj).forEach((key) => acc[key] = obj[key]); return acc; }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce and Spread
ForEach and Mutate (for .. in loop)
Mutate with Object.assign
Foreach and Mutate (Object.assign)
Reduce Mutate
reduce mutate 2
reduce mutate 3

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Reduce and Spread	56009.0 Ops/sec
ForEach and Mutate (for .. in loop)	237257.6 Ops/sec
Mutate with Object.assign	159431.8 Ops/sec
Foreach and Mutate (Object.assign)	13880.9 Ops/sec
Reduce Mutate	15005.5 Ops/sec
reduce mutate 2	232357.6 Ops/sec
reduce mutate 3	14103.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is tested?**

The provided JSON represents a set of benchmark tests that compare different approaches to merge and manipulate arrays in JavaScript. The tests measure the performance of various methods, including:

1. `reduce` with spreading (`Reduce and Spread`)
2. `forEach` with mutating loops (`ForEach and Mutate (for .. in loop)`)
3. `Object.assign`
4. Combining `reduce` with `Object.assign` or using `forEach` with `Object.assign`

**Options compared**

The tests compare the following options:

1. **Reduce with spreading**: Using the spread operator (`...`) to merge objects into a new object.
2. **ForEach with mutating loops**: Using a traditional `for` loop to iterate over each object in the array and update a target object.
3. **Object.assign**: Using the `Object.assign` method to merge one or more targets into a single object.
4. **Combining reduce with Object.assign**: Using `reduce` to iterate over the array and merge objects using `Object.assign`.
5. **ForEach with Object.assign**: Using `forEach` to iterate over each object in the array and update a target object using `Object.assign`.

**Pros and cons of each approach**

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

1. **Reduce with spreading**:
	* Pros: concise, efficient, and easy to read.
	* Cons: may not work as expected if objects have complex structures or circular references.
2. **ForEach with mutating loops**:
	* Pros: can handle complex object structures and circular references.
	* Cons: verbose, error-prone, and may have performance issues due to the use of explicit loops.
3. **Object.assign**:
	* Pros: efficient, flexible, and widely supported.
	* Cons: may not work as expected if objects are not plain objects or if there are circular references.
4. **Combining reduce with Object.assign**:
	* Pros: handles complex object structures and circular references efficiently.
	* Cons: may be less readable than other approaches.
5. **ForEach with Object.assign**:
	* Pros: concise, easy to read, and efficient.
	* Cons: may not handle complex object structures or circular references as well as other approaches.

**Other considerations**

When choosing an approach, consider the following factors:

1. **Readability**: How easy is it to understand and maintain your code?
2. **Performance**: How efficient is your code in terms of execution time and memory usage?
3. **Complexity**: Can your code handle complex object structures or circular references?
4. **Browser support**: Are you targeting specific browsers that may have quirks or differences in how they handle these approaches?

**Other alternatives**

If none of the above approaches suit your needs, consider alternative methods:

1. **Lodash's `merge` function**: A comprehensive utility library for functional programming.
2. **Underscore.js's `_.extend` function**: Another popular utility library for functional programming.

These libraries provide a range of useful functions for merging and manipulating objects in JavaScript, including those that handle complex object structures and circular references.

I hope this helps you navigate the world of JavaScript microbenchmarks!

Related benchmarks:

Reduce and Spread vs. Foreach and Mutate 3 (version: 0)

Comparing performance of: Reduce and Spread vs ForEach and Mutate (for .. in loop) vs Mutate with Object.assign vs Foreach and Mutate (Object.assign) vs Reduce Mutate vs reduce mutate 2 vs reduce mutate 3

Created: 4 years ago by: Registered User

Jump to the latest result

Reduce and Spread

ForEach and Mutate (for .. in loop)

Mutate with Object.assign

Foreach and Mutate (Object.assign)

Reduce Mutate

reduce mutate 2

reduce mutate 3

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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