Benchmark: deep clone2 - MeasureThat.net

HTML Preparation code:


<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/ivolovikov/fastest-clone/master/index.js"></script>

Script Preparation code:

var source = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}};
//var source = {a:1};
//var CloneFactory = FastClone.factory(source);

function clone(value) {
        var type = typeof value;
        switch (type) {
            case 'object':
                // null and undefined
                if (value == null) {
                    return value;
                }
                var result = void 0;
                if (value instanceof Date) {
                    result = new Date();
                    result.setTime(value.getTime());
                    return result;
                }
                else if (value instanceof RegExp) {
                    result = newRegExp(value);
                    return result;
                }
                result = JSON.parse(JSON.stringify(value));
                fixTypes(value, result);
                return result;
            default:
                return value;
        }
    }
    function fixPropertyValue(original, copy, key) {
        var originalValue = original[key];
        var originalType = typeof originalValue;
        switch (originalType) {
            case 'object':
                if (originalValue instanceof Date) {
                    var newValue = new Date();
                    newValue.setTime(originalValue.getTime());
                    copy[key] = newValue;
                }
                else if (originalValue instanceof RegExp) {
                    copy[key] = newRegExp(originalValue);
                }
                else if (originalValue == null) {
                    copy[key] = originalValue;
                }
                else {
                    fixTypes(originalValue, copy[key]);
                }
                break;
            case 'number':
                if (isNaN(originalValue)) {
                    copy[key] = NaN;
                }
                else if (originalValue == Infinity) {
                    copy[key] = Infinity;
                }
                break;
            default:
                break;
        }
    }
    function fixTypes(original, copy) {
        if (original instanceof Array) {
            for (var index = 0; index < original.length; index++) {
                fixPropertyValue(original, copy, index);
            }
        }
        else {
            var keys = Object.getOwnPropertyNames(original);
            keys.forEach(function (key) {
                fixPropertyValue(original, copy, key);
            });
        }
    }
    function newRegExp(value) {
        var regexpText = String(value);
        var slashIndex = regexpText.lastIndexOf('/');
        return new RegExp(regexpText.slice(1, slashIndex), regexpText.slice(slashIndex + 1));
    }

Tests:

JSON parse
var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello']; //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}}; var deep = JSON.parse(JSON.stringify(objects));
_.deepClone
var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello']; //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}}; var deep = _.cloneDeep(objects);
fast-clone
//var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}}; var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello']; var deep = clone(objects);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON parse
_.deepClone
fast-clone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
JSON parse	315053.4 Ops/sec
_.deepClone	282218.6 Ops/sec
fast-clone	85869.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition**

The benchmark compares three methods for creating a deep clone of an object:

1. The new ES6 spread operator (`{...obj}`).
2. The traditional `concat()` method (by joining arrays and objects with dots or brackets).
3. A custom cloning function `clone()` that handles various types, including dates, regular expressions, and primitive values.

**Options Compared**

The benchmark compares two methods:

1. **ES6 Spread Operator (`{...obj}`)**: This method creates a shallow copy of the object by spreading its properties into a new object.
2. **_.deepClone (Lodash's Deep Clone)**: This method creates a deep copy of the object by recursively cloning its properties.

**Pros and Cons**

*   **ES6 Spread Operator (`{...obj}`)`:
    *   Pros: Simple, concise, and efficient for shallow copies.
    *   Cons: Fails for objects with nested arrays or other complex structures. Does not handle dates, regular expressions, or primitive values correctly.
*   **_.deepClone (Lodash's Deep Clone)**:
    *   Pros: Handles nested arrays, objects, dates, regular expressions, and primitive values correctly. Provides a more robust cloning function.
    *   Cons: May be slower due to the recursive nature of the cloning process.

**Library Used**

The benchmark uses two libraries:

*   **Lodash ( _.cloneDeep )**: A popular JavaScript utility library that provides various functions for manipulating data structures, including deep cloning.
*   **FastClone**: A custom cloning function implemented by the benchmark creator. This function is not a widely recognized library but demonstrates an alternative approach to cloning.

**Special JS Feature/Syntax**

The benchmark utilizes ES6 features:

*   The new spread operator (`{...obj}`) for creating shallow copies of objects.
*   The dot notation (e.g., `objects.a`) and bracket notation (e.g., `objects['a']`) for accessing object properties.

**Benchmark Results**

The latest benchmark results show the following performance characteristics:

*   **JSON parse**: All three methods are relatively fast, with Chrome 87 executing approximately 315,053 times per second.
*   **_.deepClone**: This method is slower than the ES6 spread operator and FastClone, with around 282,218 executions per second. However, it provides a more robust cloning function for handling complex data structures.

In summary, the benchmark highlights the trade-offs between different methods for creating deep clones of objects in JavaScript. The ES6 spread operator offers a simple and efficient solution for shallow copies, while Lodash's _.deepClone provides a more comprehensive cloning function for handling complex data structures.

Related benchmarks:

deep clone2 (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: JSON parse vs _.deepClone vs fast-clone

Created: 4 years ago by: Guest

Jump to the latest result

JSON parse

_.deepClone

fast-clone

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