Benchmark: Test case: Spread vs Object.assign

Tests:

Merge 2 Objects with spread
const firstObject = { "sampleData": "Hello world" }; const secondObject = { "test": "ValueOfTest", "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }; const finalObject = { ...firstObject, ...secondObject };
Merge 2 Objects with Object.assign
const firstObject = { "sampleData": "Hello world" }; const secondObject = { "test": "ValueOfTest", "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }; const finalObject = Object.assign({}, firstObject, secondObject);
Add/Edit one object with spread
const firstObject = { "test": "ValueOfTest", "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }; const finalObject = { ...firstObject, test:"ValueOfTest 2" };
Add/Edit one object with object.assign
const firstObject = { "test": "ValueOfTest", "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }; const finalObject = Object.assign({}, firstObject, {test: "ValueOfTest 2"});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Merge 2 Objects with spread
Merge 2 Objects with Object.assign
Add/Edit one object with spread
Add/Edit one object with object.assign

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark compares three ways to merge two objects: `Object.assign`, using the spread operator (`...`), and concatenating strings.

**Options Compared**

1. **Merge 2 Objects with Object.assign**: This method uses the `Object.assign()` function to merge two objects.
2. **Add/Edit one object with spread**: This method uses the spread operator (`...`) to add or edit a single property in an existing object.
3. **Merge 2 Objects with spread**: This method uses the spread operator (`...`) to merge two objects.

**Pros and Cons of Each Approach**

1. **Object.assign**
	* Pros:
		+ Widely supported by most browsers.
		+ Can handle nested objects and arrays.
	* Cons:
		+ May be slower than other methods due to its overhead.
2. **Spread Operator (Add/Edit one object)**
	* Pros:
		+ Fast and efficient for adding or editing a single property.
		+ Easy to read and understand.
	* Cons:
		+ Not as widely supported by older browsers.
		+ May not work correctly with nested objects or arrays.
3. **Spread Operator (Merge 2 Objects)**
	* Pros:
		+ Fast and efficient for merging two objects.
		+ Easy to read and understand.
	* Cons:
		+ Requires JavaScript version 7.0 or higher.

**Benchmark Results**

The latest benchmark results show that:

1. Adding or editing a single property with the spread operator is the fastest method, executing approximately 4568449 executions per second on a desktop device running Firefox 105.
2. Merging two objects using the spread operator (Merge 2 Objects) is slightly slower than adding or editing a single property, but still quite fast, executing around 3473269 executions per second.

In contrast, merging two objects using `Object.assign()` is the slowest method, executing approximately 2649406 executions per second on a desktop device running Firefox 105.

Overall, these results suggest that for most use cases, the spread operator (Add/Edit one object or Merge 2 Objects) is a good choice due to its speed and simplicity. However, if you need to support older browsers or handle complex merging scenarios, `Object.assign()` might still be a better option.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0

Browser/OS: Firefox 105 on Windows

View result in a separate tab

Test name	Executions per second
Merge 2 Objects with spread	2649406.5 Ops/sec
Merge 2 Objects with Object.assign	3473269.0 Ops/sec
Add/Edit one object with spread	4568449.5 Ops/sec
Add/Edit one object with object.assign	3906350.0 Ops/sec

Related benchmarks:

Test case: Spread vs Object.assign (version: 5)

Comparing performance of: Merge 2 Objects with spread vs Merge 2 Objects with Object.assign vs Add/Edit one object with spread vs Add/Edit one object with object.assign

Created: 5 years ago by: Registered User

Jump to the latest result

Merge 2 Objects with spread

Merge 2 Objects with Object.assign

Add/Edit one object with spread

Add/Edit one object with object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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