Benchmark: JSON.parse(JSON.stringify()) vs. cloneDeep vs. custom clone

HTML Preparation code:

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

Script Preparation code:

const 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...'
  }
};

let myCopy = null;

///////////////////////////////////////////////////////////////////
class ObjectUtils {
  static clone(obj) {
    let clone

    if (typeof obj !== 'object') {
      return obj
    }
    if (!obj) {
      return obj
    }
    if (Array.isArray(obj)) {
      clone = []
      for (let i = 0; i < obj.length; i += 1) {
        clone[i] = ObjectUtils.clone(obj[i])
      }
      return clone
    }

    clone = {}
    Object.keys(obj).forEach((key) => {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        clone[key] = ObjectUtils.clone(obj[key])
      }
    })

    return clone
  }
}

Tests:

myCopy = JSON.parse(JSON.stringify(MyObject));
myCopy = JSON.parse(JSON.stringify(MyObject));
myCopy = _.cloneDeep(MyObject);
myCopy = _.cloneDeep(MyObject);
myCopy = ObjectUtils.clone(MyObject);
myCopy = ObjectUtils.clone(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
myCopy = JSON.parse(JSON.stringify(MyObject));
myCopy = _.cloneDeep(MyObject);
myCopy = ObjectUtils.clone(MyObject);

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
myCopy = JSON.parse(JSON.stringify(MyObject));	1449984.1 Ops/sec
myCopy = _.cloneDeep(MyObject);	1748214.2 Ops/sec
myCopy = ObjectUtils.clone(MyObject);	4035111.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 11 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares three different approaches for creating deep copies of JavaScript objects. The deep copy ensures that the new copy is entirely independent of the original object, meaning changes to the copy do not affect the original and vice versa. Here's a breakdown of each approach being tested:

### Approaches Being Compared

1. **JSON.parse(JSON.stringify())**
   - **Description:** This method converts a JavaScript object into a JSON string using `JSON.stringify()`, and then parses that string back into a new object using `JSON.parse()`.
   - **Pros:**
     - Simple and straightforward to use.
     - No additional libraries are required; it's a built-in feature of JavaScript.
   - **Cons:**
     - It does not work with functions, symbols, or non-serializable properties (like `undefined`, `Date`, `Map`, `Set`, etc.).
     - Can lead to performance issues with large, deeply nested structures due to the string conversion and parsing overhead.
  
2. **_.cloneDeep from lodash**
   - **Description:** This method is provided by the Lodash library, which offers utility functions for common programming tasks. The `cloneDeep` function recursively clones an object, creating a deep copy while preserving the types and properties of the original object.
   - **Pros:**
     - Handles a wider variety of JavaScript data types, including functions, dates, and complex nested structures.
     - Generally more reliable than the JSON method for deep cloning complex objects.
   - **Cons:**
     - Requires the inclusion of the Lodash library, which increases the size of your project if not already included.
     - Can be slower than simple methods when applied to primitive types and less complex objects.
  
3. **Custom clone method (ObjectUtils.clone)**
   - **Description:** This approach uses a custom utility class, `ObjectUtils`, with a static `clone` method that recursively deep clones an object or array.
   - **Pros:**
     - Allows for tailored behavior specific to the implementation; you can modify the cloning logic as needed.
     - Does not rely on external libraries, which makes it lightweight.
   - **Cons:**
     - May not handle all edge cases or special object types unless explicitly coded to do so.
     - Requires maintenance and debugging since it's a custom implementation.

### Benchmark Results

The benchmark results provided show the number of executions per second of each approach:

- **Custom Clone (ObjectUtils.clone):** 4,035,111 executions/second. This was the fastest option among the three.
- **Lodash's cloneDeep:** 1,748,214.25 executions/second. This method was the second fastest, but significantly slower than the custom method.
- **JSON.parse(JSON.stringify()):** 1,449,984.125 executions/second. This was the slowest option, primarily due to the overhead of converting to and from a string.

### Conclusion and Alternatives

When choosing a method for deep cloning in JavaScript, consider the trade-offs between ease of use, reliability with complex objects, performance characteristics, and the need for external libraries.

**Alternatives:** 
- Use **structured cloning** via the `structuredClone()` method in modern JavaScript environments, which handles many complex types and is built into the language.
- Implement or use third-party deep copy libraries like **Rambda** or **Immutable.js** if your application frequently requires deep copying of complex, nested structures.

Overall, these benchmarks provide important insights for software engineers who need to optimize their code for performance while managing data structures efficiently.

Related benchmarks:

JSON.parse(JSON.stringify()) vs. cloneDeep vs. custom clone (version: 1)

Comparing performance of: myCopy = JSON.parse(JSON.stringify(MyObject)); vs myCopy = _.cloneDeep(MyObject); vs myCopy = ObjectUtils.clone(MyObject);

Created: 11 months ago by: Registered User

Jump to the latest result

myCopy = JSON.parse(JSON.stringify(MyObject));

myCopy = _.cloneDeep(MyObject);

myCopy = ObjectUtils.clone(MyObject);

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 11 months ago):