3 ways to Clone Array in Javascript
Tags: javascript, es6, programming
Published: 2020-11-20 14:25:11

---
title: 3 ways to Clone Array in Javascript
published: true
description: 3 ways to Clone Array in Javascript
tags: javascript,ES6,programming
cover_image: https://mightytechno.com/wp-content/uploads/2020/11/clone.png
canonical_url: https://mightytechno.com/how-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.



```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
    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](https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Twitter](https://www.youtube.com/channel/UCwxiHP2Ryd-aR0SWKjYguxw)