Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object cloning comparision
(version: 0)
Comparing performance of:
Spread vs structuredClone vs JSON vs simple assignment
Created:
3 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var obj = { type: 'price', amount: '123', vatPercentage: 22, vatIncluded: true, vatId: 124153, nestedObj: { item1: 'abc', item2: undefined } }; var copy = undefined;
Tests:
Spread
copy = {...obj};
structuredClone
copy = structuredClone(obj);
JSON
copy = JSON.parse(JSON.stringify(obj));
simple assignment
copy = obj;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Spread
structuredClone
JSON
simple assignment
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 break down the provided benchmark and explain what's being tested, compared, and its implications. **Benchmark Overview** The provided benchmark compares four different methods for cloning (i.e., creating a copy of) an object in JavaScript: 1. **Spread Operator (`...`)**: Creating a shallow copy of an object by spreading its properties using the syntax `copy = {...obj};`. 2. **structuredClone()**: A new function introduced in ECMAScript 2020, which can be used to create a deep clone of an object. 3. **JSON.parse(JSON.stringify(obj))**: Using the JSON.stringify() method to serialize the object and then parsing the resulting string as JSON to recreate the original object. 4. **Simple Assignment (`obj`)**: Simply assigning the value of `obj` to a new variable, effectively creating a shallow copy. **Options Comparison** Here's a brief overview of each option: 1. **Spread Operator (`...`):** * Pros: * Simple and concise syntax. * Shallow copies are sufficient for many cases. * Cons: * Only creates a shallow copy, which may not work as expected if the original object has nested objects with complex structures. * May not handle certain data types or properties correctly (e.g., functions, undefined values). 2. **structuredClone()** * Pros: * Creates a deep clone of an object, preserving all its properties and nested structures. * Handles various data types and properties, including functions and undefined values. * Cons: * Introduced in ECMAScript 2020, so it may not be supported by older browsers or environments. * May be slower due to the complexity of creating a deep clone. 3. **JSON.parse(JSON.stringify(obj))** * Pros: * Widely supported across different JavaScript implementations and versions. * Can handle complex data structures, including functions and undefined values. * Cons: * May not work as expected if the original object contains cyclic references or other complexities. * May be slower due to the overhead of serializing and parsing the JSON string. **Library Usage** The benchmark uses the following libraries: 1. **structuredClone()**: Built-in in ECMAScript 2020, no external library needed. 2. **JSON.parse(JSON.stringify(obj))**: Built-in, no external library needed. **Special JS Feature/Syntax** This benchmark does not use any special JavaScript features or syntax beyond the methods being tested. **Other Alternatives** If you need to clone objects in a different context or with specific requirements, consider the following alternatives: * **Lodash's _.cloneDeep()**: A popular utility library that provides a deep-clone function for various data types. * **JSON.stringify() with a custom replacer function**: You can use JSON.stringify() with a custom replacer function to control how certain properties are handled during cloning.
Related benchmarks:
oobject clone
JS object copy spread vs assign
JavaScript spread operator vs Object.assign performance for cloning
Object copy JSON vs Object.assign
Deep cloning of arrays with objects
Comments
Confirm delete:
Do you really want to delete benchmark?