Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Lodash cloneDeep VS spread operator vs structured clone on complex object
(version: 0)
Comparing performance of:
Lodash cloneDeep vs Spread operator vs structuredClone
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Script Preparation code:
var MyObject = { "name": "John Doe", "age": 30, "isStudent": false, "address": { "street": "123 Main St", "city": "Anytown", "zipcode": "12345" }, "contacts": [ { "type": "email", "value": "john.doe@example.com" }, { "type": "phone", "value": "+1 123-456-7890" } ], "skills": { "programming": ["JavaScript", "Python", "Java"], "design": ["Photoshop", "Illustrator"], "languages": { "spoken": ["English", "Spanish"], "written": ["English", "French"] } }, "isActive": true, "projects": [ { "name": "Project A", "status": "completed", "team": ["Alice", "Bob"] }, { "name": "Project B", "status": "in progress", "team": ["Charlie", "David"] } ] }; var myCopy = null;
Tests:
Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Spread operator
myCopy = {...MyObject};
structuredClone
myCopy = structuredClone(MyObject);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Lodash cloneDeep
Spread operator
structuredClone
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
3 months ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/143 Mobile/15E148 Version/17.7
Browser/OS:
Mobile Safari 17 on iOS 18.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Lodash cloneDeep
154242.9 Ops/sec
Spread operator
17105452.0 Ops/sec
structuredClone
69633.2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this benchmark. **Benchmark Overview** The benchmark, named "Lodash cloneDeep VS spread operator vs structured clone on complex object", is designed to compare the performance of three different methods for cloning a complex JavaScript object: 1. Lodash `cloneDeep` method 2. Spread operator (`...`) 3. `structuredClone` function (introduced in ECMAScript 2020) **Benchmark Preparation Code** The benchmark preparation code provides an example object `MyObject`, which contains nested objects, arrays, and primitive values. The script also defines a variable `myCopy` that will be used to store the cloned copy of the original object. **Individual Test Cases** There are three test cases: 1. **Lodash cloneDeep** The benchmark definition is set to use the Lodash `cloneDeep` method to create a deep copy of the `MyObject`. This method is designed to recursively clone all properties and values within the object. 2. **Spread operator** The benchmark definition is set to use the spread operator (`...`) to create a shallow copy of the `MyObject`. The spread operator only copies the top-level properties and does not recursively clone nested objects or arrays. 3. **structuredClone** The benchmark definition is set to use the `structuredClone` function, which is designed to create an exact binary representation of the original object, including all its properties and values. **Pros and Cons** * **Lodash cloneDeep**: + Pros: Recursively clones all properties and values within the object. + Cons: May be slower due to the recursive cloning process. * **Spread operator**: + Pros: Fast and simple way to create a shallow copy of an object. + Cons: Does not recursively clone nested objects or arrays, which may lead to unexpected behavior in some cases. * **structuredClone**: + Pros: Creates an exact binary representation of the original object, including all its properties and values. + Cons: May be slower due to the need to serialize and deserialize the object. **Library - Lodash** Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks such as array manipulation, string manipulation, and more. The `cloneDeep` method is part of this library and is specifically designed for creating deep copies of objects. **Special JS Feature/Syntax** None mentioned in this benchmark. **Alternatives** Other alternatives to the spread operator include: * Using the `Object.assign()` method to create a shallow copy of an object. * Using the `JSON.parse(JSON.stringify(obj))` method to create a deep copy of an object, although this method can be slower and less efficient than using Lodash `cloneDeep`. Overall, this benchmark provides a useful comparison of three different methods for cloning JavaScript objects, highlighting the trade-offs between speed, complexity, and accuracy.
Related benchmarks:
Lodash cloneDeep VS spread operator list
Lodash cloneDeep VS spread operator VS Lodash clone
Lodash deeper clone vs Spread Clone
Lodash clone VS Lodash cloneDeep VS Spread operator with array of objects
Spread Operator vs CloneDeep
Comments
Confirm delete:
Do you really want to delete benchmark?