In JavaScript, arrays are passed by reference. Sometimes, we may want to create a copy of an array instead of passing the reference to the array — particularly if we're looping through an array, changing it in some way, and want a new one.
What is shallow copy?
All the methods shown below do a shallow copy of an array. A shallow copy of an Array copies only the elements, whether they are reference types or value types. If the values of the array are references (objects), then those references in the new Array point to the same objects as those in the original Array.
Below we are going to review 5 different ways an array can be cloned.
Looping
A simple for loop can be used. We can use both, forEach function on the array and the for loop. I will demonstrate both.
Create an empty array and copy the elements one by one.
Using forEach
let numbers = [1, 2, 3, 4];
let numbersClone = [];
numbers.forEach(number => {
numbersClone.push(number);
});
console.log(numbersClone); // => [1, 2, 3, 4]
Using for loop
let numbers = [1, 2, 3, 4];
let numbersClone = [];
for (let i = 0; i < numbers.length; i++) {
numbersClone[i] = numbers[i];
// we could still use the push function on the array
// numbersClone.push(number);
}
console.log(numbersClone); // => [1, 2, 3, 4]
Slice function
The slice function allows us to get a subset of the array. If we don't pass any parameters, it will create a shallow copy of the array.
let numbers = [1, 2, 3, 4];
// Review of getting only the subset
let subsetOfNumbers = numbers.slice(1, 3);
console.log(subsetOfNumbers); // => [2, 3]
// cloning the whole array
let numbersClone = numbers.slice();
console.log(numbersClone); // => [1, 2, 3, 4]
Concat function
The concat function allows us to join an array with another array, the result is a new array without changing the original one. If we don't pass any parameters, it will create a copy of the array.
let numbers = [1, 2, 3, 4];
// example of joining another array
let numbersWithExtra = numbers.concat([5]);
console.log(numbersWithExtra); // => [1, 2, 3, 4, 5];
// concat without parameters simply clones
let numbersClone = numbers.concat();
console.log(numbersClone); // => [1, 2, 3, 4]
// concat doesn't change the original array
console.log(numbers); // => [1, 2, 3, 4]
Array.from
Copy an array using Array.from, a utility function from javascript that performs a shallow copy of an array or array-like object.
let numbers = [1, 2, 3, 4];
let numbersClone = Array.from(numbers);
console.log(numbersClone); // => [1, 2, 3, 4]
Spread operator
The spread operator is three dots in the form of .... One of the ways to use the spread operator is to copy an item of an array and spread it into a new one.
let numbers = [1, 2, 3, 4];
// the ... spreads the elements of numbers array into a new array
let numbersClone = [...numbers];
console.log(numbersClone); // => [1, 2, 3, 4]
The spread operator is really powerful, it can also be used to:
- add more items at the same time too
- spread multiple arrays, where the order of spreading is maintained
In the example below, multiple arrays are cloned, and values are added in between.
let numbers1 = [1, 2, 3, 4];
let numbers2 = [100, 200];
// cloning values of numbers1
// adding 45 in the middle
// and cloning values of numbers2
let largeNumbers = [...numbers1, 45, ...numbers2];
// other arrays are copied and the order was maintained
console.log(largeNumbers); // => [1, 2, 3, 4, 45, 100, 200];
// original array is not effected
console.log(numbers1); // => [1, 2, 3, 4];
There are always many ways to do the same thing. Use the one that suits your needs, keeps things simple, and meets your team's standards!
thanks for reading
Subscribe and follow me Twitter to get more tips on all things software.