Benchmark: Compare deep clone object performance

Script Preparation code:

var testObj = {
 "content": [
   {
     "columnGap": 10,
     "columns": [
       {
         "svg": "\n    <svg><path/></svg>",
		 "width": 100
       },
       {
        "style": "reportMainHeading",
         "text": "Azure-Central-US",
         "width": "*" 
       }
      ]
   },
   {
    "canvas": [
        {
          "lineColor": "#CCCCCC",
          "lineWidth": 3,
          "type": "line"
        }
      ],
     "margin": [0, 10]
   }
 ]
};

var recursiveDeepCopy = (obj) => {
  return Object.keys(obj).reduce(
          (acc, key) =>
              Object.assign(acc, {
                  [key]:
                      typeof obj[key] === 'object' && obj[key].constructor === Object
                          ? getDeepCloneObj(obj[key])
                          : obj[key]
              }),
          {}
      );
};

var jsonDeepCopy = (obj) => {
 	return JSON.parse(JSON.stringify(obj)); 
}

Tests:

recursiveDeepCopy
recursiveDeepCopy(testObj);
jsonDeepCopy
jsonDeepCopy(testObj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
recursiveDeepCopy
jsonDeepCopy

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 136 on Windows

View result in a separate tab

Test name	Executions per second
recursiveDeepCopy	19114720.0 Ops/sec
jsonDeepCopy	256072.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark compares the performance of two methods for creating a deep clone of an object: `recursiveDeepCopy` and `jsonDeepCopy`.

**Methods Comparison**

1. **Recursive Deep Copy (`recursiveDeepCopy`)**:
	* This method creates a deep copy of the object by recursively traversing its properties.
	* It uses the `Object.keys()` method to iterate over the object's properties, and then uses `Object.assign()` to create a new object with the cloned properties.
	* If a property is an object itself, it calls the `getDeepCloneObj()` function (not shown in the benchmark code) to recursively clone it.
2. **JSON Deep Copy (`jsonDeepCopy`)**:
	* This method uses the `JSON.parse(JSON.stringify(obj))` syntax to create a deep copy of the object.
	* This syntax serializes the object to a JSON string, and then parses it back into an object, effectively cloning the original object.

**Pros and Cons**

1. **Recursive Deep Copy (`recursiveDeepCopy`)**:
	* Pros:
		+ Can handle complex object structures with nested objects and arrays.
		+ Can be more efficient than `jsonDeepCopy` for large objects.
	* Cons:
		+ Can be slower than `jsonDeepCopy` due to the recursive traversal.
		+ May throw errors if the object has circular references.
2. **JSON Deep Copy (`jsonDeepCopy`)**:
	* Pros:
		+ Fast and efficient, as it uses a built-in JavaScript method.
		+ Handles simple objects with nested objects and arrays without issues.
	* Cons:
		+ May not handle complex object structures correctly.
		+ Can throw errors if the object has circular references.

**Library/Function Descriptions**

1. **`Object.keys()`**: Returns an array of a given object's own enumerable property names.
2. **`Object.assign()`**: Copies the values of all enumerable own properties from one or more source objects to a target object.
3. **`JSON.parse()`** and `JSON.stringify()`**: Convert JavaScript objects to and from JSON strings, respectively.

**Special JS Feature/Syntax**

1. **Arrow functions (`(obj) => {...}`)**: Used in the `recursiveDeepCopy` function to define a concise function expression.
2. **Template literals (`\n    <svg><path/></svg>\`)**: Used to create an SVG string within the object's properties.

**Alternatives**

Other methods for creating deep clones of objects include:

1. **Using `lodash.clone()` or other cloning libraries**, which can handle complex object structures and provide additional features like support for circular references.
2. **Implementing a custom cloning function using a library like `immer`**, which provides a safer and more efficient way to clone objects, especially when dealing with complex data structures.

Keep in mind that the choice of method depends on the specific requirements of your project, such as performance, complexity, and error handling.

Related benchmarks:

Compare deep clone object performance (version: 0)

Comparing performance of: recursiveDeepCopy vs jsonDeepCopy

Created: 2 years ago by: Registered User

Jump to the latest result

recursiveDeepCopy

jsonDeepCopy

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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