Search code examples
javascriptarraysreferenceclone

JS : What is the best way to clone an array and get an identical result with new references?

I know 10 different ways to clone an Array in Javascript, but none of them works as I want... Let me explain :

This is my array : const a = [1, new Date(), false, { date: new Date(), name: "John Doe" }]

Old For loop

const b = [];
for(let i = 0, len = a.length; i < len; i++) b[i] = a[i];
console.log(b); --> [ 1, Date Wed Jul 19 2023 10:35:21 GMT+0200 (heure d’été d’Europe centrale), false, { date: Date Wed Jul 19 2023 10:35:21 GMT+0200 (heure d’été d’Europe centrale), name: "John Doe" } ]
b[3].date = null;
console.log(a[3]); --> { date: null, name: "John Doe" }

So as you can see, it cloned well the Array, but when I manipulate the object inside the array, it changes the value in the initial array too

All other methods

All the other methods I know gave me the exact same problem

  1. Map method : const b = a.map(x => x)
  2. From method : const b = Array.from(a)
  3. From + map method : const b = Array.from(a, x => x)
  4. Slice method : const b = a.slice()
  5. Spread operator method : const b = [ ...a ]
  6. Concat method : const b = a.concat([])
  7. Of method : const b = Array.of(...a)
  8. Object Assign method : const b = Object.assign([], a)

JSON method

Fortunately there is one way to clone it loosing the refs which is :

const b = JSON.parse(JSON.stringify(a))
b[3].date = null
console.log(a[3]) --> { date: Date Wed Jul 19 2023 10:35:21 GMT+0200 (heure d’été d’Europe centrale), name: "John Doe" }
console.log(b) --> [ 1, "2023-07-19T08:35:21.419Z", false, { date: null, name: "John Doe" } ]

BUT as you can see, the problem is that my old Date type is now a String and I can't manipulate it as a Date ... So it's not identical ...

So what ?

Do you know any other method doing the job or should I write my own recursive method to clone an array and their object ?

Thanks a lot for your time and your help !

Solution

  • Actually, there is one function that can do the trick for you: structuredClone

    const a = [1, new Date(), false, { date: new Date(), name: "John Doe" }];

const b = structuredClone(a);

console.log(a === b) // false

b[3] = null;

console.log(a) 
// [
//    1,
//    "2023-07-19T08:46:59.195Z",
//    false,
//    {
//      "date": "2023-07-19T08:46:59.195Z",
//      "name": "John Doe"
//    }
// ]

console.log(b)
// [
//    1,
//    "2023-07-19T08:46:59.195Z",
//    false,
//    null
// ]