<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>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...' }, arrayOfValues: [ 'asdf', 123, { bob: 's your uncle', nestedArray: [123, 333, { prop: 123 }, ] }, ]};var myCopy = null;myCopy = _.cloneDeep(MyObject);myCopy = structuredClone(MyObject);myCopy = JSON.parse(JSON.stringify(MyObject));--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Lodash cloneDeep | |
| Native structuredClone | |
| JSON.stringify |
| Test name | Executions per second |
|---|---|
| Lodash cloneDeep | 176849.0 Ops/sec |
| Native structuredClone | 106550.2 Ops/sec |
| JSON.stringify | 168137.0 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.
Benchmark Definition
The benchmark tests three different approaches to create a deep copy of an object: Lodash cloneDeep, structuredClone (a native Web API), and JSON.stringify with array values. The test object, MyObject, is a complex nested structure containing various types of values, including numbers, booleans, objects, and arrays.
Options Compared
cloneDeep: Lodash's cloneDeep function creates a deep copy of the input object, recursively copying all its properties and handling circular references.structuredClone: The structuredClone API is a new Web API introduced in Chrome 90 and Firefox 85. It provides a way to create a shallow or deep clone of an object, depending on the context, while maintaining the original object's property names.JSON.stringify with array values: This approach uses the JSON.stringify() method to convert the input object into a JSON string and then parses it back into an object using JSON.parse(). However, this method only works for shallow copies of objects, not deep ones.Pros and Cons
cloneDeep:structuredClone:JSON.stringify with array values:Library and Purpose
Lodash's cloneDeep function is a utility function that helps create deep copies of complex objects. It recursively traverses the object graph, cloning all properties and handling any potential issues with circular references.
Special JS Feature or Syntax (None)
There are no special JavaScript features or syntax used in this benchmark.
Other Considerations
When dealing with deep object copying, it's essential to consider performance, memory usage, and edge cases like circular references. In this benchmark, structuredClone offers a good balance between speed and reliability, but its limited support is a drawback.
If you're working with objects that need deep copying, consider using Lodash's cloneDeep or the native structuredClone API if supported by your browser. For shallow copies or when lightweight solutions are necessary, JSON.stringify with array values might be suitable.
