Benchmark: Compare deep copy 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) => {
    if (Array.isArray(obj)) {
        return [...obj].map(v => {
            return v?.constructor === Object ? recursiveDeepCopy(v) : v;
        });
    } else if (obj && obj?.constructor === Object) {
        return Object.keys(obj).reduce((v, d) => {
            const curr = obj[d];
            let updatedV = curr;
            if (curr?.constructor === Object || Array.isArray(curr)) {
                updatedV = recursiveDeepCopy(curr);
            } else if (typeof curr === 'function') { // remove pure functions from object
                updatedV = undefined;
            }
            return Object.assign(v, updatedV === undefined ? {} : {
                [d]: updatedV
            });
        }, {});
    }
    return obj;
};

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition JSON**

The provided benchmark definition represents two different approaches to creating a deep copy of an object: `recursiveDeepCopy` and `jsonDeepCopy`.

*   **`recursiveDeepCopy`**: This function recursively traverses the object graph, creating new objects for each nested element. It uses the spread operator (`[...obj]`) to create a new array, and then maps over it to create new objects.
*   **`jsonDeepCopy`**: This function uses `JSON.parse()` and `JSON.stringify()` to create a deep copy of the object. The idea is that by parsing a JSON representation of the original object and then stringifying its parsed version, you effectively create a new, independent copy.

**Options Compared**

The two options being compared are:

1.  **`recursiveDeepCopy`**: This approach has several pros:
    *   It's generally more efficient than using `JSON.parse()` and `JSON.stringify()`, since it avoids the overhead of parsing and stringifying JSON.
    *   It creates a true copy of the object, rather than just creating a shallow copy that shares references with the original.
    However, this approach has some cons:
    *   It can be slower for very large objects, due to the overhead of recursive function calls.
2.  **`jsonDeepCopy`**: This approach has its own set of pros and cons:

Pros:

*   It's often faster than `recursiveDeepCopy`, since it avoids the overhead of recursive function calls.
Cons:

*   It creates a shallow copy of the object, which can lead to unexpected behavior if the original object is modified.

**Library Used**

The `JSON` library is used implicitly by the `jsonDeepCopy` function. The `JSON.parse()` and `JSON.stringify()` methods are part of the ECMAScript standard and don't require any external libraries.

**Special JS Feature/Syntax**

There doesn't appear to be any special JavaScript features or syntax being used in this benchmark, aside from the use of arrow functions (`=>`) in some places. However, it's worth noting that the use of `?.` (the nullish coalescing operator) is present in one place, which was introduced in ECMAScript 2020.

**Other Alternatives**

There are other approaches to creating deep copies of objects in JavaScript, such as:

*   **Using a library like Lodash's `cloneDeep()`**: This approach provides a convenient and efficient way to create deep copies of objects.
*   **Using a library like Immer's `create` function**: This approach uses a virtual DOM-like data structure to efficiently update object values.

In terms of implementing your own deep copy logic, some alternatives include:

*   **Using a recursive function with a queue**: Similar to the `recursiveDeepCopy` implementation in the benchmark.
*   **Using a library like ` deepcopy` from TypeScript's lib.d.ts file**: Provides a simple and efficient way to create deep copies of objects.

Ultimately, the choice of approach depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

Compare deep copy performance (version: 0)

Comparing performance of: recursiveDeepCopy vs jsonDeepCopy

Created: 2 years ago by: Guest

Jump to the latest result

recursiveDeepCopy

jsonDeepCopy

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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