Benchmark: JavaScript spread operator vs Object.assign performance

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 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1 Safari/605.1.15

Browser/OS: Safari 11 on Mac OS X 10.12.6

View result in a separate tab

Test name	Executions per second
Using the spread operator	798916.8 Ops/sec
Using Object.assign	1855897.9 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Test**

The benchmark measures the performance of two approaches to merge objects in JavaScript:

1. **Using the spread operator (`...`)**: This approach uses the spread operator to merge two objects into a new object. The syntax `const finalObject = { ...firstObject, ...secondObject };` is used to create a new object that combines the properties of both `firstObject` and `secondObject`.

2. **Using `Object.assign()`**: This approach uses the `Object.assign()` method to merge two objects into a new object. The syntax `const finalObject = Object.assign({}, firstObject, secondObject);` is used to create a new object that combines the properties of both `firstObject` and `secondObject`.

**Comparison**

The benchmark compares the performance of these two approaches:

* **Pros of using the spread operator:**
	+ More concise and readable syntax
	+ No need to specify the target object
	+ Can be used with arrays and other iterable objects
* **Cons of using the spread operator:**
	+ May have slower performance due to the creation of a new array or object
	+ Limited support in older browsers

**Pros of using `Object.assign():`
	+ Wide support across modern browsers
	+ Can be used with both objects and arrays
	+ More control over the target object

* **Cons of using `Object.assign():`
	+ Less concise syntax compared to the spread operator
	+ Requires specifying the target object
	+ May have slower performance due to the creation of a new array or object

**Library Usage**

None of the benchmark tests use any external libraries.

**Special JS Features/Syntax**

There is no special JavaScript feature or syntax used in this benchmark. The tests only utilize standard JavaScript syntax and built-in methods (`Object.assign()`).

**Alternatives**

Some alternative approaches to merge objects include:

1. **Using `Object.prototype.concat()`**: This method can be used to concatenate two objects into a new object.
2. **Using `Array.prototype.reduce()`**: This method can be used to merge two objects into a new object by reducing the properties of both objects into a single object.

```javascript
const finalObject = Object.keys(firstObject).reduce((acc, key) => {
  acc[key] = firstObject[key];
}, {});

finalObject = Object.assign({}, acc, secondObject);
```

However, these alternatives are less common and may not be as efficient or readable as the spread operator or `Object.assign()`.

Related benchmarks:

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

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