<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
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;
}
var MyObject = [
{
"key": "categories.id",
"values": [
"7549d23f-ef1a-4e2a-9649-2b6ca3d7a2d0",
"ef7504a4-97c9-4efa-a6d2-ec25ebc953c2"
]
},
{
"key": "variants.attributes.ageRangeFacets",
"values": [
"6+",
"9+"
]
},
{
"key": "variants.scopedPrice.currentValue.centAmount",
"ranges": [
{
"from": "0",
"to": "2000"
},
{
"from": "10000",
"to": "20000"
}
]
}
];
var myCopy = null;
myCopy = _.cloneDeep(MyObject);
myCopy = recursiveDeepCopy(MyObject);
myCopy = JSON.parse(JSON.stringify(MyObject));
myCopy = structuredClone(MyObject);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash | |
Custom function | |
JSON.parse | |
structuredClone |
Test name | Executions per second |
---|---|
Lodash | 419265.4 Ops/sec |
Custom function | 506533.4 Ops/sec |
JSON.parse | 406973.2 Ops/sec |
structuredClone | 320974.8 Ops/sec |
Let's dive into the benchmark.
Benchmark Overview
The benchmark compares four different methods for creating a deep copy of an array of objects: Lodash's cloneDeep
, a custom function, JSON.parse
with JSON.stringify
, and structuredClone
.
What is being tested?
cloneDeep
: This method creates a deep copy of an object or an array by recursively creating new objects and arrays. The goal is to test its performance.JSON.parse
with JSON.stringify
: This method creates a deep copy by converting the original object to a JSON string and then parsing it back into an object. While this works, it can be slow for large objects due to the overhead of serializing and deserializing the data.structuredClone
: This is a newer method introduced in ECMAScript 2020 that creates a deep copy of an object by recursively creating new objects and arrays. It's designed to be more efficient than JSON.parse
with JSON.stringify
.Options Compared
The benchmark compares two main approaches:
cloneDeep
, custom function, and structuredClone
): These methods create a deep copy by recursively traversing the input object and creating new objects and arrays.JSON.parse
with JSON.stringify
): This method creates a deep copy by serializing the original object to a JSON string and then parsing it back into an object.Pros and Cons
Library and Purpose
cloneDeep
.and
JSON.stringify`: Part of the ECMAScript specification, these methods are used to convert between JSON strings and JavaScript objects.Special JS Feature or Syntax
The benchmark uses a custom function (recursiveDeepCopy
) that implements recursive cloning. This requires an understanding of JavaScript's object creation and traversal mechanisms.
Overall, the benchmark helps compare the performance of different cloning methods in JavaScript, providing insights into their strengths and weaknesses.