Benchmark: JavaScript spread operator vs Object.assign vs different spread performance v2

JavaScript spread operator vs Object.assign vs different spread performance v2 (version: 2)

Comparing performance of: `Using the spread operator with constant inside vs Using Object.assign to merge two objects vs Using the spread operator to merge two objects vs Using the spread operator with two extra variables vs Composing objects into new one`

Created: 2 years ago by: Registered User

Go to the latest result

Tests:

Using the spread operator with constant inside
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...secondObject, __key: "a key", __src: "a src", };
Using Object.assign to merge two objects
const firstObject = { __key: "a key", __src: "a src", } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Using the spread operator to merge two objects
const firstObject = { __key: "a key", __src: "a src", } const secondObject = { moreData: 'foo bar' } const finalObject = { ...secondObject, ...firstObject };
Using the spread operator with two extra variables
const __key = "a key"; const __src = "a src"; const secondObject = { moreData: 'foo bar' } const finalObject = { ...secondObject, __key, __src, };
Composing objects into new one
const __key = "a key"; const __src = "a src"; const data = { moreData: 'foo bar' } const finalObject = { data, __key, __src, };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator with constant inside
Using Object.assign to merge two objects
Using the spread operator to merge two objects
Using the spread operator with two extra variables
Composing objects into new one

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Composing objects into new one

140.0M/s

Using the spread operator with constant inside

63.4M/s

Using the spread operator with two extra variables

58.5M/s

Using the spread operator to merge two objects

19.2M/s

Using Object.assign to merge two objects

8.3M/s

View exact numbers

Test name	Executions per second
✓ Composing objects into new one	139,970,288 Ops/sec
Using the spread operator with constant inside	63,406,088 Ops/sec
Using the spread operator with two extra variables	58,530,804 Ops/sec
Using the spread operator to merge two objects	19,185,654 Ops/sec
Using Object.assign to merge two objects	8,271,973 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial for web development, and tools like MeasureThat.net help optimize code for better user experience.

The provided benchmark tests the performance of three different methods to merge objects in JavaScript: using the spread operator (`...`), `Object.assign()`, and combining two spreads (`...firstObject, ...secondObject`). Here's a breakdown of each approach:

**1. Using the spread operator (`...`)**

The spread operator is a shorthand way to create a new object with the properties of an existing object. In this benchmark, it's used to merge objects by spreading one object into another.

Pros: Easy to read and write, concise syntax.
Cons: Can lead to unexpected behavior if not used carefully (e.g., when dealing with nested objects).

Example code:
```javascript
const finalObject = { ...secondObject, __key: "a key", __src: "a src" };
```
**2. Using `Object.assign()`**

`Object.assign()` is a method that copies properties from one or more source objects to a target object.

Pros: Well-documented and widely supported, can handle nested objects.
Cons: Can be slower than the spread operator for simple merges.

Example code:
```javascript
const finalObject = Object.assign({}, secondObject, { __key: "a key", __src: "a src" });
```
**3. Combining two spreads (`...firstObject, ...secondObject`)**

This approach is similar to using the spread operator but combines both objects into a single merge.

Pros: Easy to read and write, can handle nested objects.
Cons: Less concise than using the spread operator alone.

Example code:
```javascript
const finalObject = { ...secondObject, ...firstObject };
```
The benchmark results show that:

* Using the spread operator with two extra variables (`__key` and `__src`) is the fastest (approximately 5-6 times faster than the other approaches).
* Using the spread operator to merge two objects is slightly slower but still fast.
* Using `Object.assign()` is the slowest of the three methods.

Other alternatives to consider:

* **Lodash's `merge()` method**: This utility library provides a convenient way to merge objects, handling various scenarios and edge cases. However, it adds an extra dependency to your project.
* **ES6's rest operator (`...rest`)**: This feature can be used to merge objects by creating a new object with the properties of another object and additional properties from a third object. However, its usage is less common compared to the spread operator.
* **Custom implementation**: Depending on your specific use case, you might want to implement a custom merging function that suits your needs.

When choosing a method for merging objects in JavaScript, consider factors like performance, readability, and maintainability.