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

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

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

const names = ["Elisabeth", "Mccueen", "Sarah", "Jaxongir"];
const copies = names.slice();
console.log(copies);
// ["Elisabeth", "Mccueen", "Sarah", "Jaxongir"]

Copying the part of the array

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

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

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

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

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

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