Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Which is the best method for deep cloning in JavaScript?

medium.com

Post reply on HN
Print view View original

41–50 of 62 posts

Re: Which is the best method for deep cloning in JavaScript?

#41

Post by ravenstine »

nishs wrote: post #15
RedShift1 wrote: post #3

I only clone data using JSON.parse(JSON.stringify(someThing)), and thus avoid all the mess that comes with trying to clone anything else than primitives types.

This fails, among other scenarios, if `someThing` includes a Date object. >>> const z = { d: new Date() } undefined >>> typeof z.d "object" >>> const a = JSON.parse(JSON.stringify(z)) undefined >>> typeof a.d "string" >>> After the roundtrip, the property `d` is now a string, not a Date object.

Consider the Date object harmful, use ISO strings instead, and problem solved.

Re: Which is the best method for deep cloning in JavaScript?

#42

Post by ravenstine »

jakear wrote: post #4
RedShift1 wrote: post #3

I only clone data using JSON.parse(JSON.stringify(someThing)), and thus avoid all the mess that comes with trying to clone anything else than primitives types.

I sure hope `someThing` is never `undefined`, for your sake.

There's this really nifty concept called "guarding" that helps with recovering from that sort of thing.

Re: Which is the best method for deep cloning in JavaScript?

#43

Post by ravenstine »

TechBro8615 wrote: post #18

I've been programming JavaScript for ~10 years now (wtf) and I've yet to encounter a case where I needed to "deep clone" an object. It has always been a code smell indicative of a need for some other structural refactoring.

It may be rare that you need to deep clone, but doing so can be a good idea nonetheless. Sometimes I want a function to not be able to mutate the original object that informs it, in which case it will receive a deep clone or return a brand new object. I find this can make complex code easier to comprehend because I can have greater confidence that return values are new and functions aren't causing side effects. Of course you can never guarantee this in JavaScript, but it's worth making a best attempt IMO.

Re: Which is the best method for deep cloning in JavaScript?

#44

Post by bottlepalm »

ubertaco wrote: post #27

Right out of the gate they mention that the first approach listed doesn't clone Symbol...and then they treat this as a flaw. I haven't used Symbol in JS much, but I was under the impression that it's _supposed_ to be a sorta "interned" value (in the sense that there exists exactly one instance in existence of each Symbol value)...which would mean that cloning them isn't a concept that makes sense. My loose awareness…

I don't think it's a flaw given a symbol is unique so cloning it wouldn't be possible, and creating a new one would compound the problem by not only removing the symbol, but now adding a new one as well.

This article has a pretty good overview of what symbols are, usually a corner case, but good to know -

https://medium.com/intrinsic-blog/javascript-symbols-but-why...

Re: Which is the best method for deep cloning in JavaScript?

#45

Post by voyager1 »

TechBro8615 wrote: post #18

I've been programming JavaScript for ~10 years now (wtf) and I've yet to encounter a case where I needed to "deep clone" an object. It has always been a code smell indicative of a need for some other structural refactoring.

Have you used React? You must copy every complex object or list everytime before you update the state.

Re: Which is the best method for deep cloning in JavaScript?

#47

Post by jmull »

This is some really useful info.

But I just want to point out that cloning isn’t an end in itself.

The article includes a lot of judgements but it’s all context-free. Whether a clone method is good or not depends on its suitability for a purpose. E.g., whether you want non-enumerable properties cloned (if you care at all) really depends on your specific uses. Not to mention performance is very often a concern and that isn’t covered here.

Re: Which is the best method for deep cloning in JavaScript?

#48

Post by zarzavat »

Waterluvian wrote: post #36
kevingadd wrote: post #14

Earlier quoted context omitted.

This is because inf and nan were left out of the json spec, right? Great format

Right because the spec is not IEEE 754. JSON numbers are not floats. They’re numbers with as many decimal points as you want. It’s up to the serializer/deserializer to decide how to handle them.

The clear intention of the JSON spec is that JSON numbers should deserialise to doubles, and this is how every decoder that I've ever seen handles it.

The first decoder was the JS eval() function, so JSON was clearly intended to be a subset of JS. Ambiguity in the spec is not a licence to deviate from JS semantics, it just means that the spec is poorly written.

Re: Which is the best method for deep cloning in JavaScript?

#49

Post by brundolf »

Cloning functions seems like a bad idea even if it's "handled" by the cloning logic. An easy footgun: you've got a function on an object that references the object itself. You clone the whole object. The cloned object has its own copy of the function, but its closure still references the old object

Personally I just don't try to clone anything that isn't JSON-valid data, and I usually use the stringify/parse strategy. It's slow in a hot loop, but it's fast enough for the rare situations where I need to fully clone something. Most of the time, I can just use readonly types and avoid defensively cloning the whole tree. When I want to replace part of an immutable object, destructuring works fine

Re: Which is the best method for deep cloning in JavaScript?

#50

Post by fnordsensei »

DrJokepu wrote: post #26
TechBro8615 wrote: post #18

I've been programming JavaScript for ~10 years now (wtf) and I've yet to encounter a case where I needed to "deep clone" an object. It has always been a code smell indicative of a need for some other structural refactoring.

Cloning is fairly common when you're writing functional style code with immutable objects. Not "code smell".

But when you’re using immutable data, deep cloning is not something you need for to worry about. So it kind of is an anti-pattern in this case.
Post reply on HN