<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...' }};var myCopy = null;function recursiveDeepCopy(o) { var newO, i; if (typeof o !== 'object') { return o; } if (!o) { return o; } if ('[object Array]' === Object.prototype.toString.apply(o)) { newO = []; for (i = 0; i < o.length; i += 1) { newO[i] = recursiveDeepCopy(o[i]); } return newO; } newO = {}; for (i in o) { if (o.hasOwnProperty(i)) { newO[i] = recursiveDeepCopy(o[i]); } } return newO; }myCopy = _.cloneDeep(MyObject);myCopy = JSON.parse(JSON.stringify(MyObject));myCopy = structuredClone(MyObject);myCopy = recursiveDeepCopy(MyObject);--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| cloneDeep | |
| JSON.parse | |
| structuredClone | |
| recursiveDeepCopy |
| Test name | Executions per second |
|---|---|
| cloneDeep | 1526614.4 Ops/sec |
| JSON.parse | 706304.2 Ops/sec |
| structuredClone | 580618.6 Ops/sec |
| recursiveDeepCopy | 1867695.4 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks.
Benchmark Definition JSON
The provided JSON represents a benchmark test case named "lodash clonedeep vs json.parse(stringify()) vs structuredClone". This test compares the performance of three different methods for creating a deep copy of an object:
cloneDeep from the Lodash libraryJSON.parse(JSON.stringify(MyObject))structuredClone(MyObject)Options Compared
The options being compared are:
cloneDeep: Creates a deep copy of an object using the Lodash library.JSON.parse(JSON.stringify(MyObject)): Creates a deep copy of an object by parsing the JSON representation of the original object using JSON.stringify.structuredClone(MyObject): Creates a deep copy of an object using the WebAssembly-based structured clone algorithm.Library Descriptions
lodash.clonedeep: A utility function provided by the Lodash library that creates a deep copy of an object. It recursively traverses the original object, creating new copies of all nested objects and arrays.JSON.parse(JSON.stringify(MyObject)): A JavaScript method for converting an object to a JSON string and then parsing it back into an object. This approach relies on the fact that JSON has stricter type definitions than JavaScript, which can help prevent issues with circular references.structuredClone(MyObject): A WebAssembly-based function designed specifically for creating deep copies of objects. It uses a proprietary algorithm to recursively traverse the original object and create new copies of all nested objects and arrays.Special JS Features or Syntax
The benchmark test case does not explicitly use any special JavaScript features or syntax, but it relies on the fact that JSON has stricter type definitions than JavaScript, which can help prevent issues with circular references. The structuredClone function uses a proprietary algorithm, but its implementation is not shown in the provided code.
Other Alternatives
For creating deep copies of objects in JavaScript, other alternatives include:
Array.prototype.slice.call(object): Creates a shallow copy of an object by creating a new array and copying all properties from the original object.Object.assign({}, object): Creates a shallow copy of an object by creating a new object and assigning all properties from the original object to it.Object.create(null): Creates a new object with no prototype, allowing for more control over property creation.However, these alternatives may not provide the same level of performance or feature completeness as the options being compared in this benchmark test case.
