Benchmark: JavaScript fastest way to clone an object including JSON.parse and structuredClone methods

Tests:

Using the spread operator
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = {...firstObject};
Using Object.assign
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = Object.assign({}, firstObject);
Manually copying properties
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; let finalObject = {}; finalObject.prop0 = firstObject.prop0; finalObject.prop1 = firstObject.prop1; finalObject.prop2 = firstObject.prop2; finalObject.prop3 = firstObject.prop3; finalObject.prop4 = firstObject.prop4; finalObject.prop5 = firstObject.prop5;
Create new object while copying
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = { prop0: firstObject.prop0, prop1: firstObject.prop1, prop2: firstObject.prop2, prop3: firstObject.prop3, prop4: firstObject.prop4, prop5: firstObject.prop5 };
Create new object from scratch
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 };
StructuredClone
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = structuredClone(firstObject);
JSON
const firstObject = { prop0: 'Hello world', prop1: 1, prop2: 2, prop3: "3", prop4: false, prop5: 0.2 }; const finalObject = JSON.parse(JSON.stringify(firstObject));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Manually copying properties
Create new object while copying
Create new object from scratch
StructuredClone
JSON

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 days ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	50114908.0 Ops/sec
Using Object.assign	13289986.0 Ops/sec
Manually copying properties	177094800.0 Ops/sec
Create new object while copying	152535328.0 Ops/sec
Create new object from scratch	162404368.0 Ops/sec
StructuredClone	933025.6 Ops/sec
JSON	2325886.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark aims to evaluate the performance of different methods to clone JavaScript objects, comparing several approaches regarding their execution speed. Below are the methods being tested, their pros and cons, considerations, as well as alternative techniques.

### Methods Compared:

1. **Using the Spread Operator**
   - **Benchmark Definition:** 
     ```javascript
     const finalObject = {...firstObject};
     ```
   - **Pros:** 
     - Concise and easy to read.
     - Handles shallow copying efficiently.
   - **Cons:**
     - Only performs a shallow copy, meaning nested objects are not cloned, but referenced.
   - **Considerations:** 
     - Best used when cloning simple or flat objects.

2. **Using `Object.assign`**
   - **Benchmark Definition:** 
     ```javascript
     const finalObject = Object.assign({}, firstObject);
     ```
   - **Pros:** 
     - Similar to the spread operator in terms of readability and functionality.
     - Can merge multiple source objects into a target object.
   - **Cons:**
     - Like the spread operator, it performs a shallow copy.
   - **Considerations:** 
     - It may be preferred in older codebases where ES6 features are not extensively used.

3. **Manually Copying Properties**
   - **Benchmark Definition:** 
     ```javascript
     let finalObject = {};
     finalObject.prop0 = firstObject.prop0;
     finalObject.prop1 = firstObject.prop1;
     // and so on...
     ```
   - **Pros:**
     - Complete control over which properties to copy.
   - **Cons:**
     - Verbose and error-prone, especially with many properties or deep objects.
     - Not reusable or flexible.
   - **Considerations:** 
     - Only practical for specific cases with a few known properties.

4. **Create New Object While Copying**
   - **Benchmark Definition:** 
     ```javascript
     const finalObject = {
         prop0: firstObject.prop0,
         prop1: firstObject.prop1,
         // and so on...
     };
     ```
   - **Pros:** 
     - Similar to the manual method but a bit more structured.
   - **Cons:** 
     - Also a verbose approach and not reusable.
   - **Considerations:** 
     - Good for cases with a known structure and fixed properties.

5. **Using `structuredClone`**
   - **Benchmark Definition:** 
     ```javascript
     const finalObject = structuredClone(firstObject);
     ```
   - **Pros:**
     - Handles deep cloning, including nested objects and arrays.
     - Supports cloning of various types like `Date`, `Map`, `Set`, and more.
   - **Cons:**
     - Not universally supported in older browsers.
   - **Considerations:** 
     - Ideally used for complex data structures that require a true duplicate.

6. **Using `JSON.parse` and `JSON.stringify`**
   - **Benchmark Definition:** 
     ```javascript
     const finalObject = JSON.parse(JSON.stringify(firstObject));
     ```
   - **Pros:** 
     - Simple way to achieve deep cloning.
     - Works with a variety of data types (as long as they can be serialized) and is widely supported.
   - **Cons:** 
     - Ignores functions, dates, and undefined properties.
     - Can lead to performance issues with large objects due to serialization overhead.
   - **Considerations:** 
     - Avoid using for objects containing properties that cannot be stringified.

### Performance Insights from Results:

1. **Fastest Method: Create New Object While Copying**
   - This method achieved the highest execution rate, indicating that creating properties directly is generally faster when cloning flat objects.

2. **Spread Operator and `Object.assign`**
   - Both performed moderately well but are surpassed by the manual copying method.

3. **StructuredClone and JSON Methods**
   - These methods were significantly slower. `structuredClone` is particularly slow because of its complexity in handling deep structures, while the JSON method suffers from performance issues related to serialization and deserialization.

### Alternatives:
- ***Libraries:*** 
   - Libraries like Lodash provide utility functions such as `_.cloneDeep`, which can handle deep cloning effectively, abstracting the complexity away for the developer.
   
- ***Immutable.js:***
   - A library for creating immutable data structures which can help manage object states without the need for traditional cloning methods.

When choosing a method for object cloning, engineers should weigh the complexity of the objects they are working with against the performance needs and browser compatibility considerations.

Related benchmarks:

JavaScript fastest way to clone an object including JSON.parse and structuredClone methods (version: 1)

Comparing performance of: Using the spread operator vs Using Object.assign vs Manually copying properties vs Create new object while copying vs Create new object from scratch vs StructuredClone vs JSON

Created: 2 months ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Manually copying properties

Create new object while copying

Create new object from scratch

StructuredClone

JSON

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):