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

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: 6 years ago)

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

Browser/OS: Chrome 69 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	1818269.2 Ops/sec
Using Object.assign	2412055.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.

**Benchmark Goal**

The goal of this benchmark is to compare the performance of two approaches: using the JavaScript spread operator (`...`) and `Object.assign` to merge two objects into one.

**Options Compared**

There are only two options being compared:

1. **Using the spread operator**: This approach uses the syntax `{ ...firstObject, ...secondObject }` to create a new object with properties from both `firstObject` and `secondObject`.
2. **Using Object.assign**: This approach uses the `Object.assign` method to merge two objects into one: `Object.assign({}, firstObject, secondObject)`.

**Pros and Cons**

* **Using the spread operator**:
	+ Pros: Can be more concise and readable, especially for simple merges.
	+ Cons: Can be slower than `Object.assign` because it creates a new object with properties from both sources.
* **Using Object.assign**:
	+ Pros: Typically faster than the spread operator because it modifies the original object instead of creating a new one.
	+ Cons: May require more code to set up the merge, especially when dealing with nested objects.

**Library and Purpose**

In this benchmark, `Object.assign` is used as a library function to merge two objects. The purpose of `Object.assign` is to provide a way to copy properties from one or more source objects into another object, returning the destination object.

**Special JS Feature/Syntax (None)**

There are no special JavaScript features or syntax being tested in this benchmark.

**Other Considerations**

When choosing between the spread operator and `Object.assign`, consider the following:

* If you're working with simple merges where readability is important, using the spread operator might be a good choice.
* If you're working with complex merges or performance-critical code, using `Object.assign` might be a better option.

**Alternatives**

If you don't want to use either the spread operator or `Object.assign`, there are alternative approaches:

1. **Using the concat method**: You can use the `concat` method to merge two arrays into one: `[...firstArray, ...secondArray]`.
2. **Using a custom function**: You can create a custom function that merges two objects by iterating over their properties and adding them to a new object.
3. **Using a library like Lodash**: Lodash provides the `merge` function, which can merge two or more objects into one.

Keep in mind that these alternatives might have performance implications compared to using the spread operator or `Object.assign`.

Related benchmarks:

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

JavaScript spread operator vs Object.assign performance, fixed. The original test did not create new object for the Object.assign case

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

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