til/javascript/make-truly-deep-clone-with-structured-clone.md

Make Truly Deep Clone With Structured Clone

There are a lot of ways to make a copy of an object. They are all hacks and they all fail in certain circumstances. Using the spread trick only gives you a shallow copy where references to nested objects and arrays can still be updated. The JSON.stringify trick has to make things like dates into strings, so it is lossy.

There is however now a dedicated method for deep copies with broad support called structuredClone. It is available on window. Let's take a look at it and see how it comparse to the spread operator trick.

> // some data setup

> const data = { one: 1, two: 2, rest: [3,4,5] }

> const obj = { hello: 'world', taco: 'bell', data }

> const shallowObj = { ...obj }

> const deepObj = structuredClone(obj)

> // let's modify the original `data.rest` array

> data.rest.push(6)
4
> data
{ one: 1, two: 2, rest: [ 3, 4, 5, 6 ] }

> // now let's see who was impacted by that mutation

> obj
{
  hello: 'world',
  taco: 'bell',
  data: { one: 1, two: 2, rest: [ 3, 4, 5, 6 ] }
}

> shallowObj
{
  hello: 'world',
  taco: 'bell',
  data: { one: 1, two: 2, rest: [ 3, 4, 5, 6 ] }
}

> deepObj
{
  hello: 'world',
  taco: 'bell',
  data: { one: 1, two: 2, rest: [ 3, 4, 5 ] }
}

The shallowObj from the spread operator copy was mutated even though we didn't intend for that. The deepObj from structuredClone was a true deep copy and was unaffected.

source