3 ways to Clone Array in Javascript

As a programmer, we often need a way to copy the existing array elements to a new array. But there is some issue which can arise if you did not do it properly.

Can we assign one array to another array to copy?

In javascript, arrays consider as a reference type. That means if we assign one array to another array it does not assign the values to a new array. It only assigns the reference to the original array. Therefore if we change the element in the second array, the element in the first array also get affected.

In below example you can see even though we have added ‘Mango’ to newFruits array, both fruits and newFruits array get changed.

var fruits = ['Apple','Orange'];

var newFruites = fruits;

newFruites.push('Mango')

console.log(fruits);
//[ 'Apple', 'Orange', 'Mango' ]

console.log(newFruites);
//[ 'Apple', 'Orange', 'Mango' ]

Shallow copy vs deep copy

Before starting to learn the method of copying, we have to clarify the two-term shallow copy and the deep copy. Shallow copy only copies the first level element. That’s mean it doesn’t work for the multi-dimension array. Those are pass as a reference. But deep copy will copy the first level as well as a nested element to the new array.

Spread operator

ES6 way of copying array is using the spread operator. This is a shallow copy and does not work with the multi-dimension array.

var fruits = ['Apple','Orange'];

var newFruites = [...fruits];

console.log(newFruites);
//[ 'Apple', 'Orange' ]
newFruites.push('Mango')

console.log(fruits);
//[ 'Apple', 'Orange' ]

console.log(newFruites);
//[ 'Apple', 'Orange', 'Mango' ]

Slice method

Array Slice method also allows copying the array element. This one also a method of shallow copying. This is the old way of copying the array before the spread operator introduced.

var fruits = ['Apple','Orange'];

var newFruites = fruits.slice();

console.log(newFruites);
//[ 'Apple', 'Orange' ]
newFruites.push('Mango')

console.log(fruits);
//[ 'Apple', 'Orange' ]

console.log(newFruites);
//[ 'Apple', 'Orange', 'Mango' ]

Array from method

Array.from() static method also can use to create a copy of an array. This one also a method of shallow coping.

var fruits = ['Apple','Orange'];

var newFruites = Array.from(fruits);

newFruites.push('Mango')

console.log(fruits);
//[ 'Apple', 'Orange', 'Mango' ]

console.log(newFruites);
//[ 'Apple', 'Orange', 'Mango' ]

In because we are changing the state of the App we need use stateful widget in here.

Can we do Deep Copy for an Array of objects/Multi dimension array?

If you have an array of object or multi-dimension array these methods will not be work. In that case, you have to do a deep copy.

You can use JSON.stringify() and JSON.parse() method to copy Object array/multi-dimension array to a new one. On here, the stringify method converts the object to string and you can convert that string to JSON/Array again by using JSON.parse() method.

    var fruits = [
    {
        name:'Apple',
        color:'Red',
    },
    {
        name:'Mango',
        color:'Green',
    }
    ];

//var newFruites = fruits.slice();
var newFruites = JSON.parse(JSON.stringify(fruits));

newFruites[0]['color'] = 'Green';

console.log(fruits);
//[{ name: 'Apple', color: 'Red' }, 
   { name: 'Mango', color: 'Green' } ]

console.log(newFruites);
//[{ name: 'Apple', color: 'Green' },
    { name: 'Mango', color: 'Green' }]

Hope you got a better idea about a different way of coping array in Javascript and now you can decide which method is suitable for you. When using spread operator you have to be careful about the browser compatibility. Because it does not support IE.

Connect with me - Instagram |Blog |Twitter