Benchmark: JavaScript spread operator vs Object.assign performance - modify object

Tests:

Using the spread operator
const firstObject = { attempts: 1, created_at: 1694778031091, expires_at: 1694778091091, source: { externalId: "831f76fc-5a9d-49bc-8d4b-114010cedb73", name: "Tengen Uzui", type: "phone", }, type: "phone", value: "411273", }; const finalObject = { ...firstObject, attempts: firstObject.attempts + 1, };
Using Object.assign
const firstObject = { attempts: 1, created_at: 1694778031091, expires_at: 1694778091091, source: { externalId: "831f76fc-5a9d-49bc-8d4b-114010cedb73", name: "Tengen Uzui", type: "phone", }, type: "phone", value: "411273", }; const finalObject = Object.assign({}, firstObject, { attempts: firstObject.attempts + 1, });

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: one year ago)

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

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	54833268.0 Ops/sec
Using Object.assign	7673523.5 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares the performance of two approaches to modify an object: using the spread operator (`...`) and `Object.assign()`. The test creates an initial object, modifies it, and measures the execution time.

**Options Compared**

There are two options compared:

1. **Using the spread operator (`...`)**: This approach uses the spread operator to create a new object by copying the properties of the original object.
2. **Using `Object.assign()`**: This approach uses the `Object.assign()` method to copy the properties of the original object into a new object.

**Pros and Cons**

* **Using the spread operator (`...`)**:
	+ Pros: concise, readable code, and often faster due to its inherent efficiency.
	+ Cons: may not work as expected if the source object is modified concurrently.
* **Using `Object.assign()`**:
	+ Pros: widely supported, well-documented, and can handle complex objects with nested structures.
	+ Cons: may be slower due to its method call overhead.

**Library and Purpose**

In both test cases, no libraries are used explicitly. However, it's worth noting that modern JavaScript environments (e.g., browsers) often include various built-in functions like `Object.assign()`.

**Special JS Features or Syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. Both approaches use standard JavaScript features.

**Other Considerations**

When choosing between these two approaches, consider the following:

* Code readability: If you prioritize concise code and don't mind using a more modern syntax, the spread operator might be a better choice.
* Performance: In general, the spread operator is faster due to its inherent efficiency. However, this difference may not be significant in all cases.
* Complexity: If your object has complex nested structures or if concurrent modifications are possible, `Object.assign()` might be a safer choice.

**Alternatives**

Other alternatives for modifying objects include:

* Using the `Object.assign()` method with an empty object (`{}`) as the destination object: `const finalObject = Object.assign({}, firstObject, { attempts: firstObject.attempts + 1 });`
* Using a library like Lodash's `cloneDeep()` function to create a deep copy of the original object.
* Implementing your own custom cloning function using recursion or iteration.

Keep in mind that these alternatives may have their own pros and cons, depending on the specific use case.

Related benchmarks:

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

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

Created: one year 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 one month ago):