Benchmark: Lodash cloneDeep vs structuredClone 22222

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var MyObject2 = {
    description: 'Creates a deep copy of source, which should be an object or an array.',
    myNumber: 123456789,
    myBoolean: true,
    jayson: {
        stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
        parse: 'JSON.parse() method parses a JSON string...'
    }
};

var MyObject = {
    "userId": "134374683951759360",
    "guild": "86908735326281728",
    "status": "online",
    "activities": [{
        "name": "Twitch",
        "type": 1,
        "url": "https://www.twitch.tv/craggle25",
        "details": "Weekend dirt naps with @mart0k and Cat. Hunt Showdown",
        "state": "Hunt: Showdown",
        "applicationId": null,
        "timestamps": null,
        "party": null,
        "assets": {
            "largeText": null,
            "smallText": null,
            "largeImage": "twitch:craggle25",
            "smallImage": null
        },
        "flags": 0,
        "emoji": null,
        "buttons": [],
        "createdTimestamp": 1697880668811
    }],
    "clientStatus": {
        "desktop": "online"
    }
};

var myCopy = null;

function deepCopy(data) {
    let node;
    if (Array.isArray(data)) {
        node = data.length > 0 ? data.slice(0) : [];
        node.forEach((e, i) => {
            if (typeof e === 'object' || (Array.isArray(e) && e.length > 0)) {
                node[i] = deepCopy(e);
            }
        });
    } else if (data && typeof data === 'object') {
        node = data instanceof Date ? data : Object.assign({}, data);
        Object.keys(node).forEach(key => {
            if (typeof node[key] === 'object' || (Array.isArray(node[key]) && node[key].length > 0)) {
                node[key] = deepCopy(node[key]);
            }
        });
    } else {
        node = data;
    }
    return node;
    // structuredClone(data)
}

function isArr(x) {
    return Array.isArray(x);
}

function isObject(x) {
    return typeof x === 'object';
}

function shallowClone(obj) {
    let clone = {};
    for (let key in obj) {
        let r = obj[key];
        let isArray = isArr(r);
        if (!isArray && isObject(r)) {
            continue;
        }
        if (isArray) {
            clone[key] = [];
            for (let i = 0; i < r.length; i++) {
                clone[key][i] = shallowClone(r[i]);
            }
        } else {
            clone[key] = r;
        }
    }
    return clone;
}
// pulled this from https://github.com/nodejs/node/issues/34355#issuecomment-658394617
function deepClone(o) {
    if (typeof o !== "object") {
        return o
    }
    if (!o) {
        return o
    }
    // https://jsperf.com/deep-copy-vs-json-stringify-json-parse/25
    if (Array.isArray(o)) {
        const newO = []
        for (let i = 0; i < o.length; i += 1) {
            const val = !o[i] || typeof o[i] !== "object" ? o[i] : deepClone(o[i])
            newO[i] = val === undefined ? null : val
        }
        return newO
    }
    const newO = {}
    for (const i of Object.keys(o)) {
        const val = !o[i] || typeof o[i] !== "object" ? o[i] : deepClone(o[i])
        if (val === undefined) {
            continue
        }
        newO[i] = val
    }
    return newO
}
let iterations = [100, 10000, 1000000, 10000000];

function profile(name, func) {
    for (let iterationCount of iterations) {
        let n = name + " at " + iterationCount + " iterations";
        console.time(n);
        for (let i = 0; i < iterationCount; i++) {
            func();
        }
        console.timeEnd(n);
    }
    console.log("");
}
profile('StructuredClone', () => {
    structuredClone(MyObject);
});
profile('ParseStringify', () => {
    JSON.parse(JSON.stringify(MyObject))
});
profile('ShallowClone', () => {
    shallowClone(MyObject);
});
profile('DeepClone', () => {
    deepClone(MyObject);
});
profile('DeepCopy', () => {
    deepCopy(MyObject);
});
profile('lodash', () => {
    _.cloneDeep(MyObject);
});

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Native structuredClone
myCopy = structuredClone(MyObject);
DeepCopy
myCopy = deepCopy(MyObject);
DeepClone
myCopy = deepClone(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
DeepCopy
DeepClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 hours ago)

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	218040.3 Ops/sec
Native structuredClone	188088.1 Ops/sec
DeepCopy	740523.0 Ops/sec
DeepClone	888424.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 hours ago):

LLMs can make mistakes. Check important info.

The benchmark described in the JSON is a comparison of several methods for creating deep copies of an object in JavaScript. The primary focus is on evaluating the performance of these methods using specific test cases. The methods compared include:

1. **Lodash `cloneDeep`**  
   - Definition: `myCopy = _.cloneDeep(MyObject);`
   - Description: This method utilizes the Lodash library, which provides utility functions for common programming tasks. `cloneDeep` is designed to create deep copies of JavaScript objects, handling nested structures efficiently. 
   - Pros: It is reliable and easy to use, as it takes care of complex data types and references.
   - Cons: It introduces a dependency on an external library, potentially increasing the size of the application. Performance may not be optimal compared to native options.

2. **Native `structuredClone`**  
   - Definition: `myCopy = structuredClone(MyObject);`
   - Description: `structuredClone` is a native JavaScript function that creates a deep copy of a given object using structured cloning algorithms. This method is capable of cloning more complex data types such as `Map`, `Set`, and `Date`.
   - Pros: It is built into the JavaScript language, offering better performance and lower overhead compared to external libraries. It also supports more data types than JSON methods.
   - Cons: It may not be available in older environments that do not support the latest JavaScript features.

3. **Custom `deepCopy` Function**  
   - Definition: `myCopy = deepCopy(MyObject);`
   - Description: This is a user-defined recursive function that creates deep copies of objects or arrays by iterating through their properties and values.
   - Pros: It allows for customization based on specific needs and can be fine-tuned for special cases.
   - Cons: The implementation may overlook edge cases or specific data types (like Dates) unless explicitly handled.

4. **Custom `deepClone` Function**  
   - Definition: `myCopy = deepClone(MyObject);`
   - Description: Similar to `deepCopy`, this function uses recursion to create deep copies and incorporates checks for arrays and nested objects.
   - Pros: It has an approach similar to `deepCopy` but potentially with a more thorough check on data types.
   - Cons: It can become complex and may not handle all edge cases efficiently.

### Benchmark Results
The results of the benchmark testing include the number of executions per second for each method on a typical desktop environment. Here are the results:

- **DeepClone**: 888424.875 executions/sec
- **DeepCopy**: 740523.0 executions/sec
- **Lodash cloneDeep**: 218040.28125 executions/sec
- **Native structuredClone**: 188088.125 executions/sec

### Considerations
1. **Performance**: From the results, the `DeepClone` method is the fastest among the compared approaches. `Lodash cloneDeep` and `structuredClone` were significantly slower in this benchmark, highlighting that native functions or optimized custom solutions can outperform library functions.

2. **Code Complexity**: While using a library like Lodash may abstract complexity, it also increases bundle size which could be a consideration in performance-sensitive applications.

3. **Data Types**: The choice of method could impact how different types of JavaScript objects are handled. Native methods may offer advantages in modern JavaScript environments, especially with the introduction of newer data structures and cloning requirements.

### Alternatives
1. **JSON Stringify and Parse**: 
   - Using `JSON.parse(JSON.stringify(MyObject))` is a common method to deep copy objects but has limitations (e.g., it cannot clone functions or circular references).
   - Performance can be improved for simple objects, but it might not be suitable for complex structures.

2. **Flatted Library**: A more advanced library like Flatted supports serializing and deserializing objects with circular references while maintaining performance.

3. **Manual Clone Implementations**: Engineers can always choose to implement their own cloning logic tailored to specific use cases (as seen with `deepCopy` and `deepClone`), but this requires careful design to prevent common pitfalls.

In summary, while there are various ways to perform deep copying of objects in JavaScript, the choice of method depends on the specific use case, performance needs, and consideration for application size and complexity.

Related benchmarks:

Lodash cloneDeep vs structuredClone 22222 (version: 1)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs DeepCopy vs DeepClone

Created: 9 hours ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

DeepCopy

DeepClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 hours ago):