Benchmark: Merge objects with spread vs foreach & new

Script Preparation code:

var a = {'a': 10, 'b': 20, 'c': 30};
var b = {'b': 21, 'c': 31};

Tests:

Spread object
var c = {...a, ...b};
forEach & new
var c = {} Object.keys(a).forEach(k => c[k] = a[k]); Object.keys(b).forEach(k => c[k] = b[k]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread object
forEach & new

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Linux

View result in a separate tab

Test name	Executions per second
Spread object	20076260.0 Ops/sec
forEach & new	5960717.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the details of this benchmark.

**Overview**

This benchmark compares two approaches for merging objects in JavaScript: using the spread operator (`...`) and using `Array.prototype.forEach` with `Object.keys`. The test is designed to measure which approach is faster and more efficient.

**Options Compared**

Two options are compared:

1. **Spread Operator (Spread)**: Using the spread operator (`...`) to merge two objects into a new object. This method creates a new object by copying all enumerable own properties from one or more source objects onto it.
2. **forEach & new**: Using `Array.prototype.forEach` with `Object.keys` to iterate over the keys of both objects and assign their values to a new object.

**Pros and Cons**

1. **Spread Operator (Spread)**:
	* Pros: concise, readable, and efficient way to merge objects.
	* Cons: may not work as expected if one or more sources are null or undefined.
2. **forEach & new**:
	* Pros: flexible, handles any number of source objects, and can be used with other iteration methods (e.g., `for` loop).
	* Cons: slightly less readable and concise than the spread operator method.

**Library and Purpose**

The only library used in this benchmark is not explicitly stated, but it appears to be a basic JavaScript implementation. However, if we assume a modern browser environment (like Chrome 114), some built-in functions like `Object.keys()` might rely on a library or framework. In this case, since the results are consistent across multiple browsers and devices, it's likely that any necessary libraries or frameworks are included in the benchmark environment.

**Special JS Feature/Syntax**

This benchmark doesn't explicitly test any special JavaScript features or syntax. It focuses solely on two standard object merging approaches.

**Other Alternatives**

Before this benchmark was created, developers might have used other methods for merging objects, such as:

* Using `Object.assign()`: This method has been deprecated since ECMAScript 2015 (ES6) in favor of the spread operator (`...`).
* Recursion: One could create a recursive function to merge two or more objects.
* Using `Array.prototype.reduce()`: Another approach would be to use `reduce()` to iterate over the keys and values of both sources.

These alternatives might still be viable options for merging objects in certain situations, but they are less concise and readable than the spread operator method used in this benchmark.

Related benchmarks:

Merge objects with spread vs foreach & new (version: 0)

Comparing performance of: Spread object vs forEach & new

Created: 2 years ago by: Guest

Jump to the latest result

Spread object

forEach & new

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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