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"]
Top comments (0)