Benchmark: JavaScript spread operator vs Object.assign performance(New Reference)

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' }; const finalObject = Object.assign( {}, firstObject, secondObject, );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 105 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	3700487.2 Ops/sec
Using Object.assign	5547838.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**What is being tested?**

The benchmark compares the performance of two approaches to merge objects:

1. **Spread Operator (`...`)**: The `...` operator is used to spread the properties of an object into a new object. In the provided code, `firstObject` and `secondObject` are merged into `finalObject` using this approach.
2. **`Object.assign()`**: This method returns a new object with the properties of two or more source objects.

**Options compared**

The benchmark tests these two options for merging objects, which is a fundamental operation in JavaScript programming.

**Pros and Cons:**

* **Spread Operator (`...`)**:
	+ Pros:
		- More concise and readable syntax.
		- Can be used with arrays and other iterable values.
	+ Cons:
		- May have performance implications due to the creation of a new object.
		- Can lead to unexpected behavior if not used carefully (e.g., when merging objects with different property types).
* **`Object.assign()`**:
	+ Pros:
		- More efficient than the spread operator, as it uses the existing object's prototype chain.
		- Allows for more control over the resulting object (e.g., using `Object.assign({}, firstObject, secondObject)` to create a new object with specific properties).
	+ Cons:
		- Less concise and less readable syntax.
		- Limited to merging objects, not arrays or other iterables.

**Library and special JS features**

* **`Object`**: The `Object` constructor is used in the benchmark to create empty objects (`const finalObject = Object.assign({}, firstObject, secondObject);`).
* **Spread Operator (`...`)**: This feature was introduced in ECMAScript 2018 (ES10) and allows spreading iterable values into new objects.
* **`Object.assign()`**: This method has been part of the JavaScript language since its inception.

**Other alternatives**

While not explicitly mentioned in this benchmark, other ways to merge objects in JavaScript include:

* Using the `Object.create()` method: `const finalObject = Object.create(firstObject).constructor = secondObject.constructor;`
* Using a library like Lodash (`_.merge()`): `const finalObject = _.merge({}, firstObject, secondObject);`

Note that these alternatives may have different performance characteristics or trade-offs in terms of readability and conciseness.

Related benchmarks:

JavaScript spread operator vs Object.assign performance(New Reference) (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

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