Benchmark: JavaScript spread operator vs Object.assign performance - nested objects

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world', nestedObj: { property1: 'property1', property2: 'property2', property3: 'property3', property4: 'property4' } } const secondObject = { oreData: 'foo bar', anotherNestedObj: { property1: 'property1', property2: 'property2', property3: 'property3', property4: 'property4' } } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world', nestedObj: { property1: 'property1', property2: 'property2', property3: 'property3', property4: 'property4' } } const secondObject = { oreData: 'foo bar', anotherNestedObj: { property1: 'property1', property2: 'property2', property3: 'property3', property4: 'property4' } } 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/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	21612154.0 Ops/sec
Using Object.assign	8663908.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks!

**What is being tested?**

The provided JSON represents two individual test cases for measuring the performance difference between using the spread operator (`...`) and `Object.assign()` when merging two objects in JavaScript.

In both test cases, we have:

1. Two objects: `firstObject` and `secondObject`, each containing nested objects with similar properties.
2. A final object (`finalObject`) that is created by either spreading the properties of `firstObject` using the spread operator or using `Object.assign()` to merge the two objects.

**Options being compared**

The two options being compared are:

1. **Spread Operator (`...`)**: This syntax was introduced in ECMAScript 2018 (ES9) and allows you to expand an object's properties into a new object.
2. **Object.assign()**: This method is used to create a shallow copy of an object by merging two or more source objects.

**Pros and Cons of each approach**

1. **Spread Operator (`...`)**:
	* Pros:
		+ Concise and readable syntax
		+ Less boilerplate code compared to `Object.assign()`
		+ Works well with nested objects
	* Cons:
		+ May not be as performant as other methods due to the creation of new arrays for property names and values
2. **Object.assign()**:
	* Pros:
		+ More performant than the spread operator, especially when dealing with large numbers of properties
		+ Allows for shallow copying of objects
	* Cons:
		+ Requires a separate function call (e.g., `Object.assign({}, firstObject, secondObject)`)
		+ Can be less readable and more verbose

**Library or framework**

Neither the spread operator nor `Object.assign()` rely on any specific library or framework. They are both part of the JavaScript standard library.

**Special JS feature or syntax**

The spread operator is a new syntax introduced in ECMAScript 2018 (ES9). If you're not familiar with it, you can think of it as a shorthand for creating a new object with properties from another object.

**Benchmark preparation and test setup**

The benchmark definition JSON provides the necessary information to run the tests. The `Script Preparation Code` field is empty in this case, suggesting that the script is already prepared and only needs to be executed. The `Html Preparation Code` field is also empty, indicating that no HTML is required for the benchmark.

**Other alternatives**

While not tested here, other methods for merging objects include:

1. **Object.keys()**: Iterate over an object's keys and assign values from another object.
2. **For...in loops**: Use a loop to iterate over an object's properties and assign values from another object.
3. **Array.prototype.reduce()**: Convert an array of key-value pairs into an object using `reduce()`.

Keep in mind that these alternatives might be less efficient or more verbose than the spread operator or `Object.assign()` methods.

That's a wrap!

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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