To copy objects in JavaScript, you typically have three options: using the assignment operator (=) for reference copying, performing a shallow copy...
For further actions, you may consider blocking this person and/or reporting abuse
You missed
structuredClone.⚠️ Moreover(Incorrect. See discussion below)JSON.parseandstringifyare very bad for performance.Totally agree with the first comments that
structuredCloneshould be the only way in modern codebases to deep clone objects. If you need alternatives, you can use libraries for that (e.g._.cloneDeep())Performance of
JSON.parse(JSON.stringify(obj))vs.structuredClone(obj)depends on the kind of data you want to clone.While for more (almost) shallow data the JSON approach is faster, for deeply nested data
structuredClone(obj)becomes more performant:measurethat.net/Benchmarks/Show/30...
The test is very deeply nested, but plausible.
As annoying as this is - there is no silver bullet (performance-wise).
You need to know what kind of data your application will handle, you need to test your solution based on your knowledge about the target audience and their hardware.
I guess you are right @htho ,
structuredClone(obj)seems faster in almost all cases unless the data was utterly nested (an edge case).However, for edge cases I wouldn't use
JSON.parse(JSON.stringify(obj))either. I'd rather stay withstructuredClone(obj)for a safer copy option.jsbm 100 copies
jsbm 1 copy
Are you sure? Last time I checked structuredClone was dramatically slower than parse and stringify.
measurethat.net/Benchmarks/Show/18...
Yup,
structuredClonedoes seem much slower.Hi Fatemeh Paghar,
Your tips are very useful
Thanks for sharing
The overall pros of
JSON.parseperformance wise is that the runtime ready to deal with that better since the JSON like structure is a well-suitable and "recognizable" for the runtime and underlying mechanisms of working with it are nicely optimized.With nested object, we can use
recursionand Object.assign() or Spread Operator to make deep copy too :)Thank you for all the posts and discussions! While I was already familiar with shallow copying an object, I hadn't known about creating deep copies until now. I've learned several approaches, along with their pros and cons.
Your post is a lot helpful! 👍🏻
This is a great article on the different ways to copy objects in JavaScript! I particularly liked the explanation of reference copies, shallow copies, and deep copies. I also found the comparison of JSON.parse() and JSON.stringify() with structuredClone() to be very informative.
Here's a link to my blog post on object copying in JavaScript, which goes into more detail here.
I hope this is helpful!
Refreshing