Benchmark: Test different ways of cloning objects

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/clone-deep@4.0.1/index.min.js"></script>

Script Preparation code:

const original = 
[
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	},
	{
		"id": " Sync ",
		"title": " Sync ",
		"attendees": 
		[
			"Raph",
			"Thomas",
			"Amy",
			"Richard",
			"Debra",
			"Kevin"
		],
		"flexible": false,
		"start": "2023-12-08T16:00:00.000Z",
		"end": "2023-12-08T16:30:00.000Z"
	}
]

function recursiveDeepCopy(o) {
    var newO,
      i;
  
    if (typeof o !== 'object') {
      return o;
    }
    if (!o) {
      return o;
    }
  
    if ('[object Array]' === Object.prototype.toString.apply(o)) {
      newO = [];
      for (i = 0; i < o.length; i += 1) {
        newO[i] = recursiveDeepCopy(o[i]);
      }
      return newO;
    }
  
    newO = {};
    for (i in o) {
      if (o.hasOwnProperty(i)) {
        newO[i] = recursiveDeepCopy(o[i]);
      }
    }
    return newO;
  }

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(original);
Native structuredClone
myCopy = structuredClone(original);
Json Clone
myCopy = JSON.parse(JSON.stringify(original));
recursiveDeepCopy
myCopy = recursiveDeepCopy(original);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
Json Clone
recursiveDeepCopy

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	24443.2 Ops/sec
Native structuredClone	23671.1 Ops/sec
Json Clone	34161.8 Ops/sec
recursiveDeepCopy	165834.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON assesses various methods for cloning JavaScript objects. Below is an overview of the options being compared, their pros and cons, and other considerations.

### Options Compared:

1. **Lodash `cloneDeep`**
   - **Code:** `myCopy = _.cloneDeep(original);`
   - **Library:** **Lodash**
     - Lodash is a popular utility library that provides various functions for manipulating arrays, objects, and other data types. The `cloneDeep` function creates a deep copy of an object, meaning it recursively copies all properties and nested objects/arrays.
   - **Pros:**
     - Handles complex structures effectively, maintaining type integrity.
     - Well-tested and widely used in the community.
   - **Cons:**
     - Can be larger in size compared to native solutions, resulting in additional overhead if the library is not already included in a project.
     - Performance may not be the best due to the overhead of the library.

2. **Native `structuredClone`**
   - **Code:** `myCopy = structuredClone(original);`
   - **Feature:** `structuredClone`
     - This is a built-in JavaScript function introduced to natively support deep cloning of objects, including those with circular references and `Date`, `Map`, `Set`, `ArrayBuffer`, and other complex types.
   - **Pros:**
     - Faster performance compared to many external libraries, particularly for complex structures.
     - No need for an additional library, making it lightweight.
   - **Cons:**
     - Support may vary in older browsers; developers need to check compatibility.
     - Cannot clone functions or symbols.

3. **JSON Clone**
   - **Code:** `myCopy = JSON.parse(JSON.stringify(original));`
   - **Method:** JSON serialization
     - This method first converts the object to a string and then parses it back into a new object.
   - **Pros:**
     - Simple and easy to implement for basic objects.
     - No external libraries required, lightweight.
   - **Cons:**
     - Cannot handle complex types such as functions, `Date`, `Map`, `Set`, `undefined`, or circular references, leading to loss of data.
     - Performance can degrade significantly on large objects due to serialization and deserialization.

4. **Recursive Deep Copy**
   - **Code:** `myCopy = recursiveDeepCopy(original);`
   - **Implementation:** A custom recursive function.
     - This manually traverses the object structure, creating copies of each property.
   - **Pros:**
     - Flexibility to specifically tailor the cloning behavior, allowing easy modification for additional features.
   - **Cons:**
     - More prone to human error, especially regarding edge cases like circular references or complex data types.
     - Typically less performant than optimized built-in and library functions.

### Performance Results:
From the benchmark results, the performance measured in `ExecutionsPerSecond` showed:
- The **recursiveDeepCopy** was the fastest, reflecting efficiency in the custom implementation for this specific scenario.
- **JSON Clone** was the second fastest, performing adequately but limited to simple objects.
- **Native structuredClone** followed, highlighting both its performance and suitability for modern JS objects.
- **Lodash cloneDeep** was the slowest, though it provides the most comprehensive functionality concerning complex data.

### Other Considerations:
- When choosing a cloning method, consider the structure of the data and whether it includes complex types or functions.
- For projects where performance is critical, using **structuredClone** (when supported) or the efficient **recursiveDeepCopy** could be ideal.
- While the JSON method is a quick and easy solution, be wary of its limitations for complex object types or nested structures.
- Each method has its place depending on developer needs, project requirements, and performance constraints.

In conclusion, software engineers can select the cloning method based on the complexity of the data structure, performance requirements, and whether including external libraries aligns with their project’s goals.

Related benchmarks:

Test different ways of cloning objects (version: 2)

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs Json Clone vs recursiveDeepCopy

Created: 2 months ago by: Registered User

Jump to the latest result

Lodash cloneDeep

Native structuredClone

Json Clone

recursiveDeepCopy

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):