Benchmark: structuredClone vs alternatives

HTML Preparation code:

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

Script Preparation code:

var testArray = [{
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
        testString: 'test string',
        testNumber: 12345
    },
    testArray: [{
        myName: 'test name',
        myNumber: 123245
    }]
}, {
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
        testString: 'test string',
        testNumber: 12345
    },
    testArray: [{
        myName: 'test name',
        myNumber: 123245
    }]
},[{
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
        testString: 'test string',
        testNumber: 12345
    },
    testArray: [{
        myName: 'test name',
        myNumber: 123245
    }]
}, {
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
        testString: 'test string',
        testNumber: 12345
    },
    testArray: [{
        myName: 'test name',
        myNumber: 123245
    }]
}]];

var testCopy = null;

function cloneJSON(value) {
    if (typeof value !== 'object' || value === null) {
        return value;
    } else if (Array.isArray(value)) {
        const copy = new Array(value.length);

        for (let i = 0, e; i < value.length; i++) {
            e = value[i];
            copy[i] = (typeof e !== 'object' || e === null ? e : cloneJSON(e));
        }

        return copy;
    } else {
        const ret = {};
        for (const k in value) {
            const v = value[k];
            ret[k] = typeof v !== 'object' || v === null ? v : cloneJSON(v);
        }
        return ret;
    }
}

Tests:

Lodash cloneDeep
testCopy = _.cloneDeep(testArray);
structuredClone
testCopy = structuredClone(testArray);
custom
testCopy = cloneJSON(testArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
structuredClone
custom

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 14 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36 Edg/147.0.0.0

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	386774.5 Ops/sec
structuredClone	351400.2 Ops/sec
custom	2564733.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Overview**

The benchmark compares three approaches to create a deep copy of an object in JavaScript: Lodash `cloneDeep`, `structuredClone`, and a custom implementation (`cloneJSON`).

**Options Compared**

1. **Lodash `cloneDeep`**: Lodash is a popular utility library for functional programming tasks. `cloneDeep` is a function that creates a deep copy of an object, recursively copying all properties and nested objects.
2. **`structuredClone`**: This is a new JavaScript feature introduced in ECMAScript 2020 (ES2020). It provides a way to create a deep clone of an object without the need for a custom implementation or a library like Lodash.
3. **Custom Implementation (`cloneJSON`)**: The custom implementation is a simple function that recursively copies all properties and nested objects using a basic approach.

**Pros and Cons**

1. **Lodash `cloneDeep`**:
	* Pros: Widely supported, well-tested, and efficient.
	* Cons: Requires an additional library dependency.
2. **`structuredClone`**:
	* Pros: Native support in modern browsers (Chrome 122 and above), no external dependencies required.
	* Cons: Introduced in ES2020, might not be supported in older browsers or environments.
3. **Custom Implementation (`cloneJSON`)**:
	* Pros: Simple, lightweight, and doesn't require any additional libraries.
	* Cons: May not be as efficient or robust as the other two options.

**Library Usage**

Lodash is used in the benchmark to provide a widely accepted implementation for creating deep copies of objects. The `structuredClone` function is used directly in the benchmark, relying on its native support in modern browsers.

**Special JS Features/Syntax**

No special JavaScript features or syntax are being tested in this benchmark. All options use standard JavaScript object properties and iteration methods.

**Other Alternatives**

If you're interested in exploring alternative approaches to creating deep copies of objects, consider:

* Using `JSON.parse(JSON.stringify(obj))` with caution (not recommended for complex objects)
* Implementing a custom deep copy function using bitwise operations or recursion
* Utilizing other libraries like Immutable.js or Ramda

Keep in mind that the choice of approach depends on your specific requirements, such as performance, compatibility, and maintainability.

Related benchmarks:

structuredClone vs alternatives (version: 0)

Comparing performance of: Lodash cloneDeep vs structuredClone vs custom

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

structuredClone

custom

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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