Benchmark: JavaScript merge properties (huge object)

Script Preparation code:

var propertyNames1 = Array.from({
    length: 1000
}).map((_, i) => `props${i}`)
var propertyNames2 = Array.from({
    length: 1000
}).map((_, i) => `props${i+1000}`)


var firstObject = {};

for (const propertyName of propertyNames1) {
    firstObject[propertyName] = propertyName;
}


var secondObject = {};

for (const propertyName of propertyNames2) {
    secondObject[propertyName] = propertyName;
}

Tests:

Using the spread operator
const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const finalObject = Object.assign({}, firstObject, secondObject);
Using assignment
const finalObject = {}; for (const key in firstObject) { finalObject[key] = firstObject[key]; } for (const key in secondObject) { finalObject[key] = secondObject[key]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using assignment

Fastest: N/A

Slowest: N/A

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 data and explain what is tested, compared, and their pros/cons.

**Benchmark Definition**

The benchmark measures the performance of three different approaches to merge two large objects:

1. **Using the spread operator**: `const finalObject = { ...firstObject, ...secondObject };`
2. **Using Object.assign**: `const finalObject = Object.assign({}, firstObject, secondObject);`
3. **Using assignment**: `const finalObject = {}; for (const key in firstObject) { finalObject[key] = firstObject[key]; } for (const key in secondObject) { finalObject[key] = secondObject[key]; }`

**Options Compared**

The three options are compared to determine which one is the most efficient.

* **Pros and Cons:**
	+ **Using the spread operator**: This approach is concise and readable, but it may incur overhead due to the creation of a new object. It's also supported in modern browsers.
	+ **Using Object.assign**: This approach is straightforward and widely supported, but it can be slower than the spread operator due to the creation of an intermediate array.
	+ **Using assignment**: This approach is simple and well-known, but it can lead to issues with property order and may require more memory allocation.

**Library Used**

None of the options rely on external libraries. However, `Object.assign` is a standard method that has been part of the JavaScript language since ECMAScript 2015 (ES6).

**Special JS Feature or Syntax**

The spread operator (`...`) was introduced in ECMAScript 2018 (ES8). It's a new way to create objects by spreading arrays or other iterable objects. The syntax is simple and concise, but it may be unfamiliar to developers who are not familiar with this feature.

**Benchmark Results**

The latest benchmark results show that:

* **Using assignment** outperforms both the spread operator and `Object.assign` in terms of executions per second.
* **Using the spread operator** performs better than `Object.assign`, but still lags behind `using assignment`.
* The difference between the two is relatively small, indicating that these approaches are well-optimized by modern browsers.

**Other Alternatives**

If you want to explore alternative approaches, here are a few options:

1. **Using a library like Lodash**: You can use the `_.merge` method from Lodash to merge objects in a more functional way.
2. **Using a different object merger**: Some libraries, like Immutable.js, provide optimized object merging functions that may outperform the built-in methods.
3. **Using a custom implementation**: You can write your own function to merge objects, which may offer better performance than the built-in methods.

Keep in mind that these alternatives may introduce additional overhead or require more memory allocation, so they should be used judiciously.

Latest run results:

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

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	1472.3 Ops/sec
Using Object.assign	1441.7 Ops/sec
Using assignment	2640.6 Ops/sec

Related benchmarks:

JavaScript merge properties (huge object) (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs Using assignment

Created: one year ago by: Registered User

Jump to the latest result

Using the spread operator

Using Object.assign

Using assignment

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