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

31–40 of 62 posts

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

#31

Post by guluarte »

pubby wrote: post #25
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.

I'm coming from a c++ and functional perspective but this seems very counter intuitive to me. Can you explain why they're bad? My assumption was it's easier to reason about objects the less they share.

you'll be surprised a lot of webdevs don't know the difference between a value and a ref type

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

#32

Post by guluarte »

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 extremelly common in js

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

#33

Post by Gare »

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.

Or NaN or Infinity.

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

#35

Post by nishs »

earthboundkid wrote: post #23
bottlepalm wrote: post #12

structuredClone() https://developer.mozilla.org/en-US/docs/Web/API/structuredC...

For real.

The Chrome dev rel blog post [1] describes limitations of structuredClone:

* Prototypes: structuredClone discards the object’s prototype chain.

* Functions: structuredClone quietly discards functions.

* Non-cloneables: structuredClone throws for some common values, e.g. Node, Error.

[1] https://web.dev/structured-clone/

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

#36

Post by Waterluvian »

kevingadd wrote: post #14
WirelessGigabit wrote: post #8

It may look like for simple use cases the JSON one works. But one thing not included in this page is that there are things it just doesn't serialize, even when it's actual data: const native = { number: Number.POSITIVE_INFINITY }; const cloned = JSON.parse(JSON.stringify(native)); // unlike NaN, we can compare Number.POSITIVE_INFINITY to itself console.log(native.number === native.number); // but it doesn't serialize…

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.

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

#37

Post by gloryjulio »

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 if you are doing more functional style, you would be copying the reference, NOT the object. Functional style makes you need LESS of deep copy. See immerjs

Also your object won't be that complicated in the first place, they would be treated as plain data object like struct or record. And you would not use those advanced features in objects(Not needed).

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

#38

Post by claytongulick »

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 super useful and not a code smell at all in several scenarios.

My most common use is for delta detection and json-patch based APIs.

I keep the original entity and allow the user to modify a clone.

When it's time to sync, I compare it to the original to generate a patch set to send to the server with json-patch [1] semantics.

I highly recommend the excellent fast-json-patch library [2] that makes this process a breeze.

Actually, I use its deepClone method outside of json-patch scenarios, it's so well implemented.

[1] https://jsonpatch.com/

[2] https://www.npmjs.com/package/fast-json-patch

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

#39

Post by gloryjulio »

TechBro8615 wrote: post #28
pubby wrote: post #25

Earlier quoted context omitted.

I'm coming from a c++ and functional perspective but this seems very counter intuitive to me. Can you explain why they're bad? My assumption was it's easier to reason about objects the less they share.

If you're reaching for deep cloning, your objects are too big. You're passing too much data between functions. The one exception is "actual" data which is (de-)serializable to/from JSON without any special cases (getters, functions, etc). But if it's an object that was programmatically constructed, then it can probably be made smaller. If your object is "deep" because of real nested dependencies, then you should ask…

But in React you never need to deep clone the object? The same principles apply to all the same breed of framework btw, vue/angular etc only updates what you r updating. You are supposed to make a new reference of the object but the fields of would be of the old references except the field you want to update. If you are deep cloning the whole thingy then the performance is actually worse because you r doing unnecessary updates. You could use spread operator to easily make a new object reference. Nowadays you have immerjs to do the grunt work for you
Post reply on HN