<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>var MySimpleObject = { 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 MyDeepObject = { 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...', object: { 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...', object: { 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...', object: { 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...', object: { 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...', object: { 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...', something: [0, 1, 2, 3, 3, 4, 4, 5, 5, 5, 3, 24, 234, 2, 34, 23, 4, 23, 4, 234], } } } } } } } } } } }};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(MySimpleObject);myCopy = _.cloneDeep(MyDeepObject);myCopy = structuredClone(MySimpleObject);myCopy = structuredClone(MyDeepObject);myCopy = recursiveDeepCopy(MySimpleObject);myCopy = recursiveDeepCopy(MyDeepObject);myCopy = JSON.parse(JSON.stringify(MySimpleObject));myCopy = JSON.parse(JSON.stringify(MyDeepObject));--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Lodash | |
| structuredClone | |
| recursiveDeepCopy | |
| Json clone |
| Test name | Executions per second |
|---|---|
| Lodash | 202565.2 Ops/sec |
| structuredClone | 99855.7 Ops/sec |
| recursiveDeepCopy | 240751.9 Ops/sec |
| Json clone | 152408.3 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks.
Benchmark Definition
The benchmark tests four different approaches to creating a deep copy of an object:
recursiveDeepCopy: A custom function that recursively clones the object by iterating over its properties and cloning each one.Lodash.cloneDeep: A function from the Lodash library that creates a deep clone of an object.structuredClone: A new API introduced in JavaScript 2020, which allows creating a deep copy of an object without relying on libraries like Lodash.JSON.parse(JSON.stringify()): A method that converts an object to a JSON string and then parses it back into an object.Options Compared
The benchmark compares the performance of these four approaches on two test cases: MySimpleObject and MyDeepObject. Each approach is tested multiple times, with varying degrees of complexity in the input objects.
Pros and Cons
Here's a brief summary of each approach:
recursiveDeepCopy: Pros: flexible and customizable, but can be slow for large objects due to the recursive nature. Cons: error-prone and may not work as expected for complex data structures.Lodash.cloneDeep: Pros: efficient and reliable, widely used library with a simple API. Cons: depends on external dependencies and may have performance overhead for very large objects.structuredClone: Pros: fast and efficient, built-in API that eliminates dependency on libraries like Lodash. Cons: relatively new feature, may require additional setup or browser support.JSON.parse(JSON.stringify()): Pros: simple and widely supported, but can lead to issues with cyclic references and complex data structures. Cons: performance overhead for large objects.Performance Results
According to the latest benchmark results, the order of performance is:
structuredCloneLodash.cloneDeepJSON.parse(JSON.stringify())recursiveDeepCopyThe performance difference between these approaches can be significant, especially for large input objects. This highlights the importance of choosing an efficient and reliable approach when working with complex data structures in JavaScript.
Keep in mind that browser support and execution frequency may affect the actual performance results. The latest benchmark results are just one snapshot; it's essential to consider multiple factors when evaluating performance in your specific use case.
