Benchmark: JavaScript spread operator vs Object.assign performance for cloning

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world', b: 'foo', d: 'dummy' } const clone = { ...firstObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world', b: 'foo', d: 'dummy' } const clone = Object.assign({}, firstObject);

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 (iPhone; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 11 on iOS 11.3

View result in a separate tab

Test name	Executions per second
Using the spread operator	292353.2 Ops/sec
Using Object.assign	503474.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining what is tested on the provided JSON.

**Benchmark Definition**

The benchmark defines two test cases for measuring the performance of cloning an object using different approaches: the JavaScript spread operator (`{ ...firstObject }`) and `Object.assign()`.

**Options Compared**

Two options are compared:

1. **JavaScript spread operator**: This approach uses the syntax `{ ...firstObject }` to create a shallow copy of the original object.
2. **`Object.assign()` method**: This approach uses the `Object.assign()` method to create a new object and then copies the properties from the original object into it.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **JavaScript spread operator**:
	* Pros: Simple, concise syntax; creates a shallow copy by default (i.e., only copies own enumerable properties).
	* Cons: Can be slower for large objects due to the overhead of creating a new object and copying its properties.
2. **`Object.assign()` method**:
	* Pros: More explicit and controlled way of cloning an object; can be faster for large objects since it uses optimized implementations under the hood.
	* Cons: Requires more code to set up, as you need to create a new object and then copy its properties from the original.

In general, the JavaScript spread operator is a convenient and easy-to-read syntax for creating shallow copies of small to medium-sized objects. However, when dealing with large objects or performance-critical code, `Object.assign()` might be a better choice due to its optimized implementations and explicit control over the cloning process.

**Library**

There is no external library used in this benchmark definition.

**Special JS Features or Syntax**

None mentioned explicitly, but note that the JavaScript spread operator (`{ ...firstObject }`) uses a syntax feature called "object destructuring" (introduced in ECMAScript 2015).

**Other Considerations**

When measuring performance differences between these two approaches, consider the following factors:

* **Shallow vs. deep cloning**: If your object has nested objects or arrays that need to be cloned recursively, you may want to use `Object.assign()` with a library like Lodash's `cloneDeep` instead of the JavaScript spread operator.
* **Browser support**: While both approaches are supported in modern browsers, older versions might not support the JavaScript spread operator. You should test your code on different browsers and versions if performance is critical.

**Alternatives**

Other alternatives for cloning objects include:

1. **Lodash's `cloneDeep` function**: A popular utility library that provides a deep cloning implementation.
2. **For...of loop with Object.assign()**: This approach uses a loop to assign properties from the original object to a new object, which can be more efficient than using `Object.assign()` with an array of properties.
3. **JSON.parse(JSON.stringify(obj))**: This method is often used for serializing and deserializing objects but can be slower due to the overhead of parsing JSON.

When choosing an alternative, consider your specific use case, performance requirements, and code maintainability needs.

Related benchmarks:

JavaScript spread operator vs Object.assign performance for cloning (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):