<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, myDate: new Date(), myDate2: new Date(), myDate3: new Date(), myDate4: new Date(), myDate5: new Date(), myDate6: new Date(), myDate7: new Date(), myDate8: new Date(), myDate9: new Date(), myDate10: new Date(), jayson: { stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....', parse: 'JSON.parse() method parses a JSON string...' }, jayson2: { stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....', parse: 'JSON.parse() method parses a JSON string...' }, jayson3: { stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....', parse: 'JSON.parse() method parses a JSON string...' }, jayson4: { stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....', parse: 'JSON.parse() method parses a JSON string...' }, jayson5: { stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....', parse: 'JSON.parse() method parses a JSON string...' }, jayson6: { stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....', parse: 'JSON.parse() method parses a JSON string...' }, jayson7: { stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....', parse: 'JSON.parse() method parses a JSON string...' }, jayson8: { stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....', parse: 'JSON.parse() method parses a JSON string...' }};var myCopy = null;myCopy = _.cloneDeep(MyObject);myCopy = _.clone(MyObject);myCopy = {MyObject}myCopy = {MyObject}myCopy.jayson = {myCopy.jayson}myCopy.jayson2 = {myCopy.jayson2}myCopy.jayson3 = {myCopy.jayson3}myCopy.jayson4 = {myCopy.jayson4}myCopy.jayson5 = {myCopy.jayson5}myCopy.jayson6 = {myCopy.jayson6}myCopy.jayson7 = {myCopy.jayson7}myCopy.jayson7 = {myCopy.jayson8}myCopy = Object.assign({}, MyObject)myCopy = Object.assign({}, MyObject)myCopy.jayson = Object.assign({}, myCopy.jayson)myCopy.jayson2 = Object.assign({}, myCopy.jayson2)myCopy.jayson3 = Object.assign({}, myCopy.jayson3)myCopy.jayson4 = Object.assign({}, myCopy.jayson4)myCopy.jayson5 = Object.assign({}, myCopy.jayson5)myCopy.jayson6 = Object.assign({}, myCopy.jayson6)myCopy.jayson7 = Object.assign({}, myCopy.jayson7)myCopy.jayson7 = Object.assign({}, myCopy.jayson8)--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Lodash cloneDeep | |
| Lodash clone | |
| new Object | |
| Custom deep spread | |
| Object assign | |
| Custom deep assign |
| Test name | Executions per second |
|---|---|
| Lodash cloneDeep | 59972.8 Ops/sec |
| Lodash clone | 284307.0 Ops/sec |
| new Object | 4289890.0 Ops/sec |
| Custom deep spread | 606092.2 Ops/sec |
| Object assign | 574065.3 Ops/sec |
| Custom deep assign | 202914.5 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net!
Benchmark Definition JSON
The provided JSON defines a benchmark test suite that compares the performance of different methods for creating deep copies of objects in JavaScript.
Methods being compared
_.cloneDeep(MyObject): A function from the Lodash library that creates a deep copy of an object._.clone(MyObject): Another function from the same Lodash library, but it only creates a shallow copy (i.e., a copy of the top-level properties).new Object syntax: Creating a new object using the new keyword and passing an object literal as its constructor argument.myCopy = mySource; myCopy.$set(specificProperty, value)): This method uses the $set() function from Lodash to update specific properties of the copy object.Object.assign({}, MyObject)): Using Object.assign() to create a new object and then updating its properties with the ones from MyObject.Performance differences
The benchmark results show that:
new Object is the fastest method, executing approximately 28% of the executions per second._.cloneDeep() and _clone()) are relatively close in performance to each other, with _.cloneDeep() being slightly faster.Implications
When working with complex data structures or objects that contain nested arrays, objects, or other data types, choosing the right deep copy method can significantly impact performance. In general:
_clone() might be sufficient._.cloneDeep(), which is faster and more comprehensive than custom methods.Keep in mind that these results are based on Chrome 74 and Windows 10. Other browsers, operating systems, or JavaScript versions may exhibit different performance characteristics.
I hope this analysis helps you better understand the nuances of creating deep copies in JavaScript!
