<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,
array: [{
jayson: {
stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
parse: 'JSON.parse() method parses a JSON string...'
}
},
{
jayson: {
stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
parse: 'JSON.parse() method parses a JSON string...'
}
}, {
jayson: {
stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
parse: 'JSON.parse() method parses a JSON string...'
}
}
],
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 = recursiveDeepCopy(MyObject);
myCopy = structuredClone(MyObject)
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash CloneDeep | |
Json Clone | |
recursiveDeepCopy | |
structured clone |
Test name | Executions per second |
---|---|
Lodash CloneDeep | 327484.0 Ops/sec |
Json Clone | 515958.8 Ops/sec |
recursiveDeepCopy | 2759553.2 Ops/sec |
structured clone | 376813.0 Ops/sec |
Let's break down the benchmark and explain what is being tested, compared, and considered.
Benchmark Overview
The benchmark tests four different methods to create a deep copy of an object: lodash.cloneDeep
, JSON.parse(JSON.stringify())
, recursiveDeepCopy
, and structuredClone
. The test object (MyObject
) contains nested objects and arrays with sensitive data.
Tested Options
Lodash CloneDeep
: This method uses the cloneDeep()
function from Lodash, a popular utility library for JavaScript.JSON.parse(JSON.stringify())
: This method uses the built-in JSON.parse()
function to parse a JSON string created by JSON.stringify()
. Note that this method can lead to security vulnerabilities if not used carefully, as it can create objects with sensitive data.recursiveDeepCopy
: This is a custom implementation of a deep copy function using recursion.structuredClone
: This method uses the structuredClone()
function introduced in ECMAScript 2020 (ES10), which creates a new clone of an object by recursively cloning its properties.Comparison and Considerations
When comparing these methods, we need to consider factors such as:
Lodash CloneDeep
Pros:
Cons:
JSON.parse(JSON.stringify())
Pros:
Cons:
recursiveDeepCopy
Pros:
Cons:
structuredClone
Pros:
Cons:
In summary, the benchmark tests four different methods to create deep copies of objects, each with its pros and cons. The choice of method depends on factors such as performance requirements, security concerns, and compatibility with specific browsers or environments.
Other Alternatives
If none of these methods are suitable for your use case, other alternatives might include:
createDeepCopy
function)Keep in mind that the best approach will depend on your specific requirements and constraints.