DEV Community

Cover image for 3 ways to Clone Array in Javascript
Mighty
Mighty

Posted on • Updated on • Originally published at mightytechno.com

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' ]
Enter fullscreen mode Exit fullscreen mode

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' ]

Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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' ]

Enter fullscreen mode Exit fullscreen mode

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' }]
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)