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>

​x
 
​
<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) })));
}

 
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);
myCopy = _.cloneDeep(MyObject);
Json clone
myCopy = JSON.parse(JSON.stringify(MyObject));
myCopy = JSON.parse(JSON.stringify(MyObject));
freeze and destructure
Object.freeze(MyObject); myCopy = { ...MyObject };
Object.freeze(MyObject); myCopy = { ...MyObject };
Vanilla cloneDeep
myCopy = cloneDeep(MyObject)
myCopy = cloneDeep(MyObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; CrOS aarch64 14695.85.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.75 Safari/537.36

Browser/OS: Chrome 102 on Chrome OS 14695.85.0

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	193583.1 Ops/sec
Json clone	110152.7 Ops/sec
freeze and destructure	566525.1 Ops/sec
Vanilla cloneDeep	28503.2 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks!

Benchmark Definition JSON

The benchmark definition JSON contains four test cases:

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

Options Compared

The benchmark compares four options:

Lodash cloneDeep: Uses the popular JavaScript utility library, Lodash.
Json clone: Utilizes the built-in JSON.parse(JSON.stringify()) method, which is a simple but effective way to clone objects.
freeze and destructure: employs Object.freeze() followed by destructuring to create a copy of an object.
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:

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

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: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Json clone

freeze and destructure

Vanilla cloneDeep

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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