<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...' }, mySet: new Set([1,2,3,1]), myList: [1,3,4,5,67,'ab'], myDate: new Date(),};var myCopy = null;myCopy = JSON.parse(JSON.stringify(MyObject));myCopy = structuredClone(MyObject);const cloneLineageData = (toClone) => { if (typeof toClone !== 'object' || toClone === null) return toClone; if (toClone instanceof Set) { return new Set(toClone); } if (Array.isArray(toClone)) { return toClone.map(cloneLineageData); } if (toClone instanceof Date) { return new Date(toClone); } const cloned = { toClone }; const clonedObjKeys = Object.keys(cloned); for (let i = 0; i < clonedObjKeys.length; i += 1) { const key = clonedObjKeys[i]; cloned[key] = cloneLineageData(cloned[key]); } return cloned;};myCopy = cloneLineageData(MyObject);myCopy = _.cloneDeep(MyObject);--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| JSON.stringify | |
| structuredClone | |
| cloneLineageData | |
| lodash.cloneDeep |
| Test name | Executions per second |
|---|---|
| JSON.stringify | 478523.2 Ops/sec |
| structuredClone | 501116.2 Ops/sec |
| cloneLineageData | 651536.2 Ops/sec |
| lodash.cloneDeep | 495595.4 Ops/sec |
I'm ready to dive into explaining the benchmark.
What is being tested?
The provided JSON represents a set of JavaScript microbenchmarks, specifically testing different methods for creating deep copies of objects and arrays. The benchmarks focus on the following approaches:
JSON.stringify vs structuredClonecloneLineageData (a custom implementation)lodash.cloneDeepOptions compared
Here's a brief overview of each approach and their pros and cons:
JSON.stringify: This method converts a JavaScript object to a JSON string, which can then be parsed back into an object using JSON.parse. The resulting object is a shallow copy, meaning it only copies the top-level properties.structuredClone: This is a relatively new method introduced in JavaScript, available since ECMAScript 2020 (ES12). It creates a deep copy of an object or array, preserving the original's structure and content.cloneLineageData: This custom implementation recursively clones objects and arrays, handling nested properties and avoiding circular references.Other considerations
When working with JavaScript object cloning, it's essential to consider:
JSON.stringify) can lose type information when creating a shallow copy, leading to issues with type checks and validation.Library used
lodash.cloneDeep is a popular utility function from the Lodash library. It provides a simple way to create deep copies of objects and arrays, handling complex data structures and circular references.
Special JS feature or syntax
The benchmark uses structuredClone, which is a relatively new JavaScript feature introduced in ES12. This method requires modern browsers that support ES12 to function correctly.
Benchmark preparation code
The script preparation code defines a test object (MyObject) with various properties, including an array and a set. The custom implementation (cloneLineageData) recursively clones the entire object structure, while JSON.stringify creates a shallow copy of only the top-level properties.
I hope this explanation helps software engineers understand the benchmark!
