Benchmark: JavaScript spread operator vs Object.assign performance vs manual copy

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } Object.assign(firstObject, secondObject);
Manual copy
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } firstObject.moreData = secondObject.moreData;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Manual copy

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	46792724.0 Ops/sec
Using Object.assign	51430432.0 Ops/sec
Manual copy	220655264.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark created on MeasureThat.net. The benchmark compares the performance of three approaches: using the spread operator, `Object.assign`, and manual copying.

**Test Cases**

1. **Using the Spread Operator**
```javascript
const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
const finalObject = {
  ...firstObject,
  ...secondObject
}
```
This test case demonstrates the use of the spread operator (`...`) to merge two objects into a new one.

2. **Using Object.assign**
```javascript
const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
Object.assign(firstObject, secondObject)
```
This test case uses the `Object.assign()` method to merge two objects into a new one.

3. **Manual Copy**
```javascript
const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
firstObject.moreData = secondObject.moreData
```
This test case manually assigns the properties of `secondObject` to `firstObject`.

**Options Compared**

The benchmark compares the performance of these three approaches:

* **Using the spread operator**: Merging two objects using the spread operator (`...`)
* **Using Object.assign**: Using the `Object.assign()` method to merge two objects
* **Manual copy**: Manually assigning properties from one object to another

**Pros and Cons**

1. **Using the Spread Operator**
	* Pros:
		+ concise syntax
		+ efficient ( creates a new object with shallow copies of properties)
	* Cons:
		+ may not be suitable for deep objects or complex mergers
2. **Using Object.assign**
	* Pros:
		+ widely supported and well-documented
		+ flexible (can handle deep objects and complex mergers)
	* Cons:
		+ may be slower due to the overhead of the `Object.assign()` method
3. **Manual Copy**
	* Pros:
		+ simple and familiar syntax
	* Cons:
		+ can lead to errors if not done correctly
		+ inefficient ( creates a new object with shallow copies of properties)

**Libraries Used**

None.

**Special JS Features or Syntax**

The spread operator (`...`) is used in the first test case, but it's a standard JavaScript feature introduced in ECMAScript 2018. The `Object.assign()` method is also a standard JavaScript method.

**Alternatives**

Other alternatives for merging objects include:

* Lodash's `merge` function
* Underscore.js's `_.merge`
* Immutable.js's `merge`

These libraries provide more complex and flexible ways to merge objects, but may have additional overhead or dependencies.

Related benchmarks:

JavaScript spread operator vs Object.assign performance vs manual copy (version: 0)

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

Created: 2 months ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Manual copy

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