Benchmark: CloneDeep vs Custom Clone Deep Conditional Props

HTML Preparation code:

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

Script Preparation code:

var MyObject = {
    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...',
        test: [789, 456, 123],
        htest: [123, 456, 789],
    }
};

const manual = (obj) => ({
  ...obj.description && {
    description: obj.description,
  },
  ...obj.myBoolean && {
    myBoolean: obj.myBoolean,
  },
  ...obj.myNumber && {
    myNumber: obj.myNumber,
  },
  ...obj.jayson && {
    jayson: {...obj.jayson}
  }
});

Tests:

Lodash
const myCopy = _.cloneDeep(MyObject);
Custom
const myCopy = manual(MyObject);
Stringify parse
const myCopy = JSON.parse(JSON.stringify(MyObject));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash
Custom
Stringify parse

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 87 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Lodash	368648.7 Ops/sec
Custom	0.0 Ops/sec
Stringify parse	259867.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different cloning methods for objects in JavaScript.

The provided benchmark compares three approaches:

**1. Lodash's `cloneDeep` function**

*   **Purpose:** Deeply clones an object, creating new nested objects and arrays.
*   **Pros:**
    *   Fast and efficient for large objects with deep nesting.
    *   Handles cyclic references by default.
*   **Cons:**
    *   External dependency (Lodash library).
    *   May introduce additional overhead due to the need to import the library.

**2. Custom cloning using the `manual` function**

*   **Purpose:** Manually clones an object by recursively iterating over its properties and creating new objects for each nested value.
*   **Pros:**
    *   No external dependencies.
    *   Can be more efficient than `cloneDeep` for very large objects or when memory is a concern.
*   **Cons:**
    *   Requires manual implementation, which can lead to errors if not done correctly.
    *   May not handle cyclic references as efficiently as `cloneDeep`.

**3. Using `JSON.parse(JSON.stringify(object))`**

*   **Purpose:** Clones an object by serializing it to a JSON string and then parsing it back into an object.
*   **Pros:**
    *   Lightweight and fast.
    *   Handles cyclic references (since the serialization process ignores them).
*   **Cons:**
    *   Not suitable for complex objects with nested arrays or objects.
    *   Can be slower than `cloneDeep` for large objects.

**Other considerations:**

*   When dealing with very large objects, the overhead of serializing and parsing can be significant. In such cases, `cloneDeep` might be a better choice.
*   If memory is a concern, the custom cloning approach (`manual`) might offer better performance by avoiding the need to create new objects for each nested value.
*   When working with cyclic references, `JSON.parse(JSON.stringify(object))` can lead to infinite recursion if not handled carefully. In such cases, using a library like Lodash or implementing a more robust cycle detection mechanism is recommended.

As for special JavaScript features or syntax, this benchmark does not explicitly test any specific features. However, it's worth noting that modern browsers support various iteration methods (e.g., `for...of`, `forEach`) and array methods (e.g., `map()`, `filter()`), which can be used to implement cloning functions.

**Alternatives:**

*   Other cloning libraries available in the JavaScript ecosystem include `lodash-es` (a smaller, ES6-based version of Lodash), `deep-clone`, or `json-stringify-safe`.
*   For custom cloning implementations, one can use techniques like recursion, iteration using `for...in`/`for...of`, or library-specific methods like those provided by the `js-yaml` or `yaml-js` libraries.

Keep in mind that the choice of cloning method ultimately depends on the specific requirements and constraints of your project.

Related benchmarks:

CloneDeep vs Custom Clone Deep Conditional Props (version: 0)

Comparing performance of: Lodash vs Custom vs Stringify parse

Created: 3 years ago by: Guest

Jump to the latest result

Lodash

Custom

Stringify parse

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