<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;
myCopy = _.cloneDeep(MyObject);
myCopy = structuredClone(MyObject);
myCopy = JSON.parse(JSON.stringify(MyObject));
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash cloneDeep | |
structuredClone | |
Json.stringify |
Test name | Executions per second |
---|---|
Lodash cloneDeep | 1816989.8 Ops/sec |
structuredClone | 808267.3 Ops/sec |
Json.stringify | 1333350.6 Ops/sec |
Let's dive into the provided benchmark and explain what's being tested, compared, and some pros/cons of different approaches.
What is being tested?
The benchmark measures the performance of three different methods to create a deep copy of an object:
structuredClone
(a built-in JavaScript method introduced in ES6)JSON.stringify
with JSON.parse
lodash.cloneDeep
These methods are compared for their execution speed.
What options are compared?
The benchmark compares the performance of each method on a specific input object, which includes nested properties and arrays. The test case uses an object MyObject
with multiple properties, including a nested object jayson
.
Here's a brief overview of each method:
structuredClone
: This method creates a deep copy of an object by recursively traversing its properties and creating new objects for each property. It's a more modern approach compared to the other two methods.JSON.stringify
with JSON.parse
: This method uses the JSON.stringify
function to convert the input object to a JSON string, which is then parsed back into an object using JSON.parse
. While this method creates a deep copy, it can be slower and more memory-intensive than the other two methods.lodash.cloneDeep
: This method is a utility function from the Lodash library that creates a deep copy of an object. It's designed to be fast and efficient.Pros/Cons of each approach:
structuredClone
:JSON.stringify
with JSON.parse
:lodash.cloneDeep
:Library usage
The benchmark uses the Lodash library for its cloneDeep
method. Lodash is a popular utility library that provides various functions for tasks such as array manipulation, object creation, and more.
Special JavaScript features or syntax
None are mentioned in this specific benchmark.
Other alternatives
If you're interested in exploring alternative methods, here are a few:
Object.assign
: Creates a new object with properties from an existing object.Array.prototype.map
+ Array.prototype.slice
: Can be used to create a deep copy of arrays by mapping over the original array and slicing the resulting array.JSON.parse(JSON.stringify(obj))
: This method is similar to using structuredClone
, but it may introduce additional overhead due to stringification and parsing.Keep in mind that these alternatives might not provide the same level of performance as the benchmark's chosen methods, especially for large objects or arrays.