Clone Arrays with JavaScript

Discussion

1. faruzzy

   This is a great tip! so worth it!
2. Michele

   Interesting tip!
3. Robert Schultz

   Just to note, I use .slice() all the time without passing in ‘zero’ and have never seen an issue. So even though the MDN docs do not say it is optional, it appears to work just fine with no arguments :)
• Tom Lo

  If you pass Zero as argument is run faster:
  http://jsperf.com/new-array-vs-splice-vs-slice/19
• ainput

  Good reference but the ‘pass zero’ result is only improved (but massively) for one test out of about 20 (Chrome 48.0.2564). It really looks like an anomaly.
4. Mark

   It is also much faster, especially for large arrays. Here’s a benchmark I put together:

   http://jsperf.com/loop-vs-slice-copy/3
5. mesuutt

   What is the differences between clonearr=originalarr and clonearr=originalarr.slice(0) ?
• Rodrigo Meyer

  Because clonearr=originalarr is an reference for originalarr, so, when you insert a new object or value in array, clonearr is refreshed too.
6. jonathan de montalembert

   I don’t understand, why not use clone = myArray?
• RevMen

  clone = myArray makes clone a reference to myArray, not a copy of it.
• Farzad YZ

  Arrays are a specific type of objects. as objects are being passed by reference; meaning that changing source object will change result object and vice versa; you have to clone the result not copy it.
7. Stefan

   Mesuutt and Jonathan: doing cloneArr = originalArr will only copy the pointer of the array and not clone it:

   var a = [1,2,3]; // a.length == 3
   b = a; // a.length == 3 and b.length == 3
   b.push(4); // a.length == 4 and b.length == 4 
   
   
• mesuutt

  thanks @stefan, I understand exactly now :)
8. John J. Camilleri

   There’s a subtle bug that can result from adding something to the prototype of Array. If you iterate over arrays with using for...in construct:

   var a = [3,7,9];
   for (var i in a) {
     console.log(i);
   }
   

   Note that the for loop will also iterate over the case when i == “clone”!
   To be safe, you must iterate by using the length property:

   for (var i=0; i<a.length; i++) {
     console.log(i);
   }
   
• Farzad YZ

  This is because of

  for..in

  construct not the Array prototype.
9. Eric H.

   Take note: if your array is filled with objects, those objects remain linked:

   var aAll = [{x:0, y:0}, {x:1, y:1}],
   	aAll1 =aAll.slice(0); 
   console.log(aAll[0].x, aAll1[0].x); // 0, 0
   aAll1[0].x += 10
   console.log(aAll[0].x, aAll1[0].x); // 10, 10
   aAll1[0] = {};
   console.log(aAll[0].x, aAll1[0].x); // 10, undefined
   
10. MikeOne

    So what if I need to create a clone of an array filled with objects? I cannot have the objects to be by reference in the clone. Iteration my only option?
11. Scott S. McCoy

    No one noticed this empties the array in question? That’s not exactly a clone.
• Scott S. McCoy

  It’s really lame you cannot delete or edit comments here.

  Use slice() not splice().
• JC

  That’s good that you cannot delete your comment! I did the same error and I realized what was going on only by reading your comment… :)
12. Kadimi

    Maybe it’s worth mentioning in a comment, this is very similar to how Python copies lists (arrays)

    my_list = [1, 2, "some text"];
    
    // To create a refrence
    my_ref = my_list
    
    // To create a copy
    my_copy = my_list[:]
    
13. Etai

    Adding Array.prototype.clone as mentioned in this article is a terrible idea… as it’s only a shallow clone, and if another developer on your team will use your clone method, they can trip up over this.
14. Stepan Suvorov

    Hi, thx for solution, exactly what Iwas looking for
15. Felipe N. Moura

    Hi.
    I know this post is kinda old, but we were on a discussion about it around here, and we prepared these tests.
    http://jsperf.com/array-content-copy/2
    many interesting thing around here!
    for instance, array.slice is the fastest on google chrome, while in firefox, array.concat was the fastest.
    Another interesting thing is the way the browser optimizes the most verbose test, which is not the slowest one!
16. sean

    a handy way to get a deep copy is:

    var clone = JSON.parse( JSON.stringify( myArray ) );
    
• Farzad YZ

  JSON will do the job most of the time but would fail when array contains another json or a function.
• Rajan

  you saved me an hour at the least thanks!!
• Bruno

  Thanks Sean, that works perfectly!
17. Felipe N Moura

    I added this method, using JSON’s parse/stringify methods to that perf.
    It works, but this does not have the best of the performances:

    http://jsperf.com/array-content-copy/7
18. Massimo

    var clone = myArray.slice(0);
    

    don’t make a clone. Is the same of

    clone=myArray;
    

    every change on clone is reflected on myArray. To make a clone you must copy every element singly.
19. sean

    not according to this test

    // bad clone
    var a = [1,2,3,4,5];
    var b = a;
    a.push(99);
    console.log(a); // [1,2,3,4,5,99]
    console.log(b); // [1,2,3,4,5,99]

    // good clone
    var x = [1,2,3,4,5];
    var y = x.slice(0);
    x.push(77);
    console.log(x); // [1,2,3,4,5,77]
    console.log(y); // [1,2,3,4,5]
20. Felipe Moura

    Yep, that’s not true, Massimo.
    try this out

    var a1= [1, 2, 3, 4];
    var a2= a1.slice(0);
    a2[2]= 'X';
    console.log(a1); // [1, 2, 3, 4] 
    console.log(a2); // [1, 2, "X", 4] 
    
21. Andy

    This will only work if your array has simple values in it. If your array contains objects (or other arrays!!!) it will not copy them.

    For example

    var a = [ [ 1 ] ];
    var b = a.slice( 0 );
    a[0] === b[0] // true!
    

    Be careful! here is a function you can use if you know your arrays are nested: http://blog.andrewray.me/how-to-clone-a-nested-array-in-javascript/
• Felipe N. Moura

  Hi Andy.

  That’s not entirely the case!
  What happens here, is that objects and arrays are passed as reference, and even though, what you were comparing there was their value at [0]!
  If you simply run this, you will understand:

  a[0]= 'x';
  console.log(b[0]); // [1]
  

  By changing a[0], you are NOT altering b[0].
  BUT, if you had done this, instead:

  a[0][0] = 'a';
  console.log(b[0][0]); // "a"
  

  This time it changed the array on “b”, but because it was a reference to the same array/object, therefore, any change into one, will be applied to the other.

  So, yes, we must be always aware of objects being passed from some place to another, in any case :)
  In the example you gave, b is a copy of a, but as a copy, it also copied the pointers/references to the original Array stored on each position.
22. Space1000

    Man you’re cool! Can I omit ‘0’ in .slice(0)?
23. Taner

    slice() function is working only numeric indexed arrays, not working this array:

    var a = [];
    a["a"] = 1; a["b"] = 2; a["c"] = 3;
    
    

    This version is working with all arrays :

    Array.prototype.clone = function() {    
        var clone = [];
        for(var i in this)
        {
            clone[i] = this[i]
        }    
        return clone;
    };
    
24. Taner

    Sean’s code more efficiently:

    var clone = JSON.parse( JSON.stringify( myArray ) );
    

    This clones also object elements in the array
• Erik

  The last time I tested stringify for cloning it was a lot slower than creating objects and copying values over.
• Vince

  More efficiently ? This is so bad in term of performance.
25. Erik D

    Do not post nonsense on the web David Walsh.
    slice() is not a clone method at all!

    Slice is a copy method! In other words it copies the values/references from one array to another.

    So when you copy objects from array A to B and modify a single item that is referenced in both arrays. Both array A and B will display the new values for this item.
    Cloning has a different meaning.
    To actually clone objects you must create new objects and copy over values.
26. Vince

    “Don’t iterate over arrays to clone them if all you need is a naive clone!”

    This is what slice does internally -_- and Erik is true, it’s inappropriate to talk about clone there.
27. June Rockwell

    Is there a significant difference between .slice() and .slice(0)? I’ve always used the latter to deep copy. What’s the significance of the first argument being 0? And, it’s not necessary, is it?
28. Manny

    This .clone do the same job of .slice() without parameters.
    Also you should never modify objects you don’t “own” (such as standard objects, such as Array). It’s a really bad practice.
29. Simon

    Well this is a great solution … if you do not have complex arrays…

    I recommend not to use these solutions because :

    let a = [{foo: "bar", dump: [1,2,3], date: new Date()}];
    let b = a.slice(0);
    let c = JSON.parse(JSON.stringify(a));
    
    // Why these methods don't work :
    b[0].dump.push("oups");
    console.log(b); //--> [{foo: "bar", dump: [1,2,3, "oups"], date: Date 2019-05-23T10:14:28.384Z}];
    console.log(a); //--> [{foo: "bar", dump: [1,2,3, "oups"], date: Date 2019-05-23T10:14:28.384Z}];
    
    //As you can see the inner Array dump were modified in the a and b arrays
    //So you should want to use the JSON methods, but...
    console.log(a[0].date instanceof Date) // --> true
    console.log(c[0].date instanceof Date) // --> false
    
    //As you can see, the Json methods converts some instances in String and BTW if you have some Functions they will just disappear...
    

    There is no built-in function to have a perfect clone of your array, I think we should made a recursive function to clone it perfectly
30. Molive

    Now you can do:

    const a = [1,2];
    const b = [...a];
    b.push(3);
    console.log(a) // [1,2]
    console.log(b); // [1,2,3]