6 Ways to Copy Array
Published: 2022-10-16 13:56:08

Copying contents of one or more array(s) to another array is some of the most common tasks in Web Development. And in this post, I'm going to teach you 6 ways to copy array values. If you other creative ways then let me know please. If you enjoy this post, or have feedbacks, inform me about them. 

# concat
Array concat method is used to concatenate or join the copy of one or more arrays into single array.

In below example, we are copying array items of arr1 into arr2
```js
const arr1 = [1,2,3];
const arr2 = [].concat(arr1);
console.log(arr2);
// [1,2,3]
```

In this example, we are copying three array values into single array
```js
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];
const arr4 = [].concat(arr1, arr2, arr3);
console.log(arr4);
// [1,2,3,4,5,6,7,8,9]
```

# slice
Array slice method is the another method that can copy the whole array or the part of the array and return the copied array.

When you provide no argument to slice, it copies the whole array 
```js
const names = ["Elisabeth", "Mccueen", "Sarah", "Jaxongir"];
const copies = names.slice();
console.log(copies);
// ["Elisabeth", "Mccueen", "Sarah", "Jaxongir"]
```

Copying the part of the array
```js
const names = ["Elisabeth", "Mccueen", "Sarah", "Jaxongir"];
const copies = names.slice(0, 2);
console.log(copies);
// ["Elisabeth", "Mccueen"]
```

# spread
Spread operator shallows copy the first level items of the array into the another array. It means that the second array keep reference to the second and further nested array items but copies only values of the first level items.

In this example, we are using spread operator to copy first level array items
```js
const arr1 = [1,2,[3,4];
const arr2 = [...arr1];
console.log(arr2);
// [1,2,[3,4]

arr2[0] = "Coding"
console.log(arr2);
// ["Coding", 2, [3, 4]
console.log(arr1);
// [1,2,[3,4]]
```

In this example we are making changed to the second level array value in the other array as reference is kept, changes reflect in both arrays
```js
const arr1 = [1,2,[3,4];
const arr2 = [...arr1];
console.log(arr2);
// [1,2,[3,4]

arr2[0] = "Coding"
arr2[2][0] = "JavaScript"
// ["Coding", 2, ["JavaScript, 4]
console.log(arr1);
// [1,2,["JavaScript", 4]]
```

# map
Array map method used to return the new array with the same length as the original array, with values returned in the callback
```js
const numbers = [1,2,3,4,5]
const newNumbers = numbers.map(number => number * 5);
console.log(newNumbers);
// [5,10,15,20,25]
```

# filter
Array filter method used to return new array with values that satisfied boolean conditional in the callback. It's mostly used when we need to keep only certain values and filter out unecessary ones
```js
const ages = [10,20,14,5,22,50];
const newAges = ages.filter(age => age >= 20);
console.log(newAges);
// [20,22,50]
```

# loops
The last way to copy array values is using our loop friend. As that's how all the methods above use to create a copy of the old array. Here any kind of loop works, for, for of, while, do while and so on
```js
const names = ["Sarah", "Nostau", "Koop", "Fhen"];
const newNames = [];
for(let i = 0; i < names.length; i++){
  newNames.push(names[i]);
}
console.log(newNames);
// ["Sarah", "Nostau", "Koop", "Fhen"]
```