Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object cloning with Lodash clone vs cloneDeep vs merge vs structuredClone vs JSON.parse(JSON.stringify(o))
(version: 0)
Comparing performance of:
Lodash clone vs Lodash cloneDeep vs JSON.parse(JSON.stringify(o)) vs structuredClone
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Script Preparation code:
var o = { a: { b: 1, c: 2, d: 3, j: { k: [1,2,3], l: [4,5,6] }, }, e: [1,2,3,4,5,6], f: 1, g: { h: 1, } }
Tests:
Lodash clone
const a = _.clone(o)
Lodash cloneDeep
const a = _.cloneDeep(o)
JSON.parse(JSON.stringify(o))
const a = JSON.parse(JSON.stringify(o))
structuredClone
const a = o
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Lodash clone
Lodash cloneDeep
JSON.parse(JSON.stringify(o))
structuredClone
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):
Measuring JavaScript performance is crucial in today's fast-paced web development landscape. Let's break down the provided benchmarking test and explore the different approaches being compared. **Benchmark Overview** The benchmark compares four methods for object cloning: 1. `structuredClone` 2. `JSON.parse(JSON.stringify(o))` 3. Lodash's `clone` function 4. Lodash's `cloneDeep` function Each method is tested against a sample input object `o`, which consists of nested objects and arrays. **Method Overview** 1. **Structured Clone (`structuredClone`)**: Introduced in ECMAScript 2020, this method allows for deep cloning of objects while preserving metadata. It creates a new object with the same structure as the original but copies all its properties, including references to other objects. 2. **JSON.parse(JSON.stringify(o))**: This method uses JSON serialization and deserialization to create a copy of the object. While it works, it can lead to issues when dealing with objects that have circular references or other complexities. 3. **Lodash's `clone` function**: Lodash provides a simple way to clone an object, which creates a shallow copy by recursively copying properties. This method is suitable for most cases but may not work well with complex nested structures. 4. **Lodash's `cloneDeep` function**: A variation of the `clone` function, `cloneDeep` creates a deep copy of the object, which means it will recursively copy all nested properties. **Comparison and Pros/Cons** | Method | Description | Pros | Cons | | --- | --- | --- | --- | | `structuredClone` | Deep cloning with metadata preservation | Preserves original references | Currently only supported in modern browsers (Chrome 119) | | `JSON.parse(JSON.stringify(o))` | Uses JSON serialization and deserialization | Simple to implement | May fail with circular references or complex objects | | Lodash's `clone` | Shallow copying | Fast and lightweight | May not work well with deeply nested structures | | Lodash's `cloneDeep` | Deep copying | Suitable for most cases | Slower than shallow cloning | **Library and Syntax** The benchmark uses the Lodash library, which provides a set of utility functions for various tasks. The `clone` and `cloneDeep` functions are used to clone objects. **Special JS Feature** There is no special JavaScript feature or syntax being tested in this benchmark. However, it's worth noting that some browsers may have additional features or polyfills that affect the performance of certain methods. **Alternatives** If you need an alternative to Lodash for object cloning, you can consider using: * `Array.prototype.slice.call()` and `Object.assign()` * `Object.create()` and `Object.assign()` * A third-party library like Immutable.js Keep in mind that these alternatives may have different performance characteristics or limitations compared to the methods being tested. In summary, the benchmark provides a useful comparison of four object cloning methods, each with its strengths and weaknesses. By understanding the differences between these approaches, developers can make informed decisions about which method best suits their specific use cases.
Related benchmarks:
Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs JSON.parse(JSON.stringify())
Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign VS JSON.parse
Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs structuredClone
Object cloning with Lodash clone vs cloneDeep vs merge vs structuredClone vs JSON.parse(JSON.stringify(o)) 2
Comments
Confirm delete:
Do you really want to delete benchmark?