Benchmark: Lodash cloneDeep vs JSON Clone vs freeze and destructure vs vanilla cloneDeep

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...'
  }
};

var myCopy = null;

function cloneDeep(entity, cache = new WeakMap) {
  const referenceTypes = ['Array', 'Object', 'Map', 'Set', 'Date'];
  const entityType = Object.prototype.toString.call(entity);
  if (
    !new RegExp(referenceTypes.join('|')).test(entityType) ||
    entity instanceof WeakMap ||
    entity instanceof WeakSet
  ) return entity;
  if (cache.has(entity)) {
    return cache.get(entity);
  }
  const c = new entity.constructor;
  
  if (entity instanceof Map) {
    entity.forEach((value, key) => c.set(cloneDeep(key), cloneDeep(value)));
  }
  if (entity instanceof Set) {
    entity.forEach((value) => c.add(cloneDeep(value)));
  }
  if (entity instanceof Date) {
    return new Date(entity);
  }
  cache.set(entity, c);
  return Object.assign(c, ...Object.keys(entity).map((prop) => ({ [prop]: cloneDeep(entity[prop], cache) })));
}

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Json clone
myCopy = JSON.parse(JSON.stringify(MyObject));
freeze and destructure
Object.freeze(MyObject); myCopy = { ...MyObject };
Vanilla cloneDeep
myCopy = cloneDeep(MyObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Json clone
freeze and destructure
Vanilla cloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition JSON**

The benchmark definition JSON contains four test cases:

1. `Lodash cloneDeep`: Tests Lodash's `cloneDeep` function to create a deep copy of an object.
2. `Json clone`: Tests the built-in `JSON.parse(JSON.stringify())` method to clone an object.
3. `freeze and destructure`: Tests the `Object.freeze()` method followed by destructuring to create a copy of an object.
4. `Vanilla cloneDeep`: Tests a vanilla implementation of a deep cloning function, similar to Lodash's `cloneDeep`.

**Options Compared**

The benchmark compares four options:

1. **Lodash cloneDeep**: Uses the popular JavaScript utility library, Lodash.
2. **Json clone**: Utilizes the built-in `JSON.parse(JSON.stringify())` method, which is a simple but effective way to clone objects.
3. **freeze and destructure**: employs `Object.freeze()` followed by destructuring to create a copy of an object.
4. **Vanilla cloneDeep**: provides a custom implementation of deep cloning, similar to Lodash's `cloneDeep`.

**Pros and Cons**

Here are some pros and cons for each option:

1. **Lodash cloneDeep**:
	* Pros: Widely adopted, well-tested, and optimized for performance.
	* Cons: Adds an external dependency (Lodash), which might be a concern for smaller projects or those with strict dependencies.
2. **Json clone**:
	* Pros: Lightweight, easy to implement, and works well for most cases.
	* Cons: Can produce unexpected results if the object contains functions or circular references.
3. **freeze and destructure**:
	* Pros: Simple, effective, and doesn't require any external dependencies.
	* Cons: May not work as expected with certain types of objects (e.g., those that use `WeakMap` or `WeakSet`).
4. **Vanilla cloneDeep**:
	* Pros: Custom implementation allows for fine-grained control over cloning logic.
	* Cons: Requires more code and might be less efficient than the other options.

**Other Considerations**

When choosing a deep cloning method, consider the following factors:

* **Object complexity**: If your objects are simple (e.g., plain JavaScript primitives), `JSON.parse(JSON.stringify())` or `freeze and destructure` might be sufficient. For more complex objects, Lodash's `cloneDeep` or a custom implementation like `Vanilla cloneDeep` might be necessary.
* **Performance**: If performance is critical, consider using Lodash's `cloneDeep` or a well-optimized custom implementation like `Vanilla cloneDeep`.
* **Dependency management**: Be mindful of external dependencies when choosing between options.

**Library and Purpose**

The `freeze()` method from the ECMAScript standard freezes an object, making it immutable. The `JSON.parse(JSON.stringify())` method parses a JSON string and creates a new object with the same properties as the original object. Lodash's `cloneDeep()` function creates a deep copy of an object by recursively cloning all its properties.

Special JavaScript features or syntax mentioned in this benchmark are:

* **WeakMap** and **WeakSet**: Used to implement certain edge cases in the `freeze and destructure` approach.
* **ECMAScript standard**: The standard for JavaScript programming, which provides a solid foundation for JavaScript implementation.

Related benchmarks:

Lodash cloneDeep vs JSON Clone vs freeze and destructure vs vanilla cloneDeep (version: 0)

Comparing performance of: Lodash cloneDeep vs Json clone vs freeze and destructure vs Vanilla cloneDeep

Created: 4 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Json clone

freeze and destructure

Vanilla cloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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