Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs structuredClone
(version: 0)
Comparing performance of:
Lodash clone vs Lodash cloneDeep vs Lodash merge vs ES6 spread vs ES6 Object.assign vs ES6 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 o = { a: { b: 1, c: 2, d: 3, j: { k: [1,2,3], l: [4,5,6] }, }, e: [1,2,3,4,5,6], f: 1, g: { h: 1, } }
Tests:
Lodash clone
const a = _.clone(o)
Lodash cloneDeep
const a = _.cloneDeep(o)
Lodash merge
const a = _.merge({}, o)
ES6 spread
const a = { ...o }
ES6 Object.assign
const a = Object.assign({}, o)
ES6 structuredClone
const a = structuredClone(o)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (6)
Previous results
Fork
Test case name
Result
Lodash clone
Lodash cloneDeep
Lodash merge
ES6 spread
ES6 Object.assign
ES6 structuredClone
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the provided benchmark. **What is being tested?** The benchmark tests six different methods for creating a shallow copy of an object: 1. Lodash `clone()` method 2. Lodash `cloneDeep()` method (which creates a deep copy) 3. Merging an empty object with the original using `merge()` 4. Using the spread operator (`{ ...o }`) 5. Using `Object.assign()` to create a shallow copy 6. Using `structuredClone()` (a relatively new feature introduced in ECMAScript 2022) **Options being compared:** Each method has its own strengths and weaknesses. 1. **Lodash `clone()`**: This method creates a shallow copy of the object, which means it only copies the top-level properties. It's faster than `cloneDeep()`, but may not be suitable for deeply nested objects. 2. **Lodash `cloneDeep()`**: This method creates a deep copy of the object, which means it recursively copies all properties and their values. It's slower than `clone()`, but ensures that the copied object is fully independent from the original. 3. **Merging an empty object with the original using `merge()`**: This approach can be useful when you want to create a new object by copying the properties from an existing object, while preserving any additional properties on the target object. However, it may not be suitable for all use cases. 4. **Using the spread operator (`{ ...o }`)**: This method creates a shallow copy of the object by spreading its top-level properties into a new object. It's concise and easy to read, but only copies the top-level properties. 5. **Using `Object.assign()`**: This method creates a shallow copy of the object by assigning its values to a new object. It's similar to `clone()`, but may be slower due to the overhead of function calls. 6. **Using `structuredClone()`**: This is a relatively new feature that creates a deep copy of an object, while also preserving any metadata associated with the original object. It's still experimental and might not be supported by all browsers. **Pros and Cons:** Here are some pros and cons for each method: 1. Lodash `clone()`: Fast, but only copies top-level properties. * Pros: Quick and easy to use. * Cons: May not work well with deeply nested objects. 2. Lodash `cloneDeep()`: Slower, creates a deep copy of the object. * Pros: Ensures that the copied object is fully independent from the original. * Cons: Can be slower than other methods. 3. Merging an empty object with the original using `merge()`: * Pros: Preserves additional properties on the target object. * Cons: May not work well for all use cases. 4. Using the spread operator (`{ ...o }`): * Pros: Concise and easy to read. * Cons: Only copies top-level properties, which can lead to loss of data. 5. Using `Object.assign()`: * Pros: Similar to `clone()`, but may be faster due to reduced overhead. * Cons: May still be slower than other methods. 6. Using `structuredClone()`: * Pros: Creates a deep copy of the object, while preserving metadata. * Cons: Experimental feature, not supported by all browsers. **Libraries and special features:** 1. **Lodash**: A popular JavaScript utility library that provides various functions for data manipulation and creation. 2. **Structured Clone**: A relatively new feature introduced in ECMAScript 2022, which creates a deep copy of an object while preserving metadata. I hope this explanation helps you understand the benchmark results!
Related benchmarks:
Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign
Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs JSON.parse(JSON.stringify())
Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs Clone
Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign VS JSON.parse
Comments
Confirm delete:
Do you really want to delete benchmark?