Blog

Array

JS

How to copy an array

Interesting ways to clone/copy an array

Vignesh Kalithas

Vignesh Kalithas

Oct 10, 2022 — Updated Dec 8, 2022 · 4 min read

A shallow copy means that certain (sub-)values are still connected to the original variable.

Spread Operator ...

  • The spread operator is a new addition to the features available in the JavaScript ES6 version
  • The spread operator ... is used to expand or spread an iterable or an array
numbers = [1, 2, 3];
numbersCopy = [...numbers];
numbersCopy.push(4);

console.log(numbers); // [1, 2, 3]
console.log(numbersCopy); // [1, 2, 3, 4]
// numbers array is unaffected
Copy
nestedNumbers = [[1], [2]];
numbersCopy = [...nestedNumbers];

numbersCopy[0].push(300);
console.log(nestedNumbers); // [[1, 300], [2]]
console.log(numbersCopy); // [[1, 300], [2]]
// Both have been changed because they share the same reference
Copy
numbers = [1, 2, 3];
numbersCopy = [];

for (i = 0; i < numbers.length; i++) {
numbersCopy[i] = numbers[i];
}

numbersCopy.push(4);
console.log(numbers); // [1, 2, 3]
console.log(numbersCopy); // [1, 2, 3, 4]
// numbers array is unaffected
Copy
  • The map() method in JS creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method.
  • Generally, map() method is used to iterate over an array and call a function on every element of the array.

numbers = [1, 2, 3];
double = (x) => x * 2;

numbers.map(double);

numbers = [1, 2, 3];
numbersCopy = numbers.map((x) => x);

identity = (x) => x;
numbers.map(identity);
// [1, 2, 3]
Copy
// What if you’re filtering for even numbers?
[1, 2, 3].filter((x) => x % 2 === 0); // [2]
Copy

  • This function returns an array, just like map, but it’s not guaranteed to be the same length.

  • The input array length was 3, but the resulting length is 1.

  • If your filter's predicate always returns true, however, you get a duplicate!

  • Every element passes the test, so it gets returned.

numbers = [1, 2, 3];
numbersCopy = numbers.filter(() => true);
Copy
  • I almost feel bad using reduce to clone an array, because it’s so much more powerful than that. But here we go…
numbers = [1, 2, 3];

numbersCopy = numbers.reduce((newArray, element) => {
newArray.push(element);
return newArray;
}, []);
Copy
  • slice returns a shallow copy of an array based on the provided start/end index you provide.
//If we want the first 3 elements:

[1, 2, 3, 4, 5].slice(0, 3);
// [1, 2, 3]
// Starts at index 0, stops at index 3
If we want all the elements, don’t give any parameters

numbers = [1, 2, 3, 4, 5];
numbersCopy = numbers.slice();
// [1, 2, 3, 4, 5]
Copy
[1, 2, 3].concat(4); // [1, 2, 3, 4]
[1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]
Copy

  • concat combines arrays with values or other arrays
  • If you give nothing or an empty array, a shallow copy’s returned
[1, 2, 3].concat(); // [1, 2, 3]
[1, 2, 3].concat([]); // [1, 2, 3]
Copy

This can turn any iterable object into an array. Giving an array returns a shallow copy.

numbers = [1, 2, 3];
numbersCopy = Array.from(numbers);
// [1, 2, 3]
Copy

A deep copy means that all of the values of the new variable are copied and disconnected from the original variable

  • JSON.stringify() turns an object into a string.

  • JSON.parse() turns a string into an object.

  • Combining them can turn an object into a string, and then reverse the process to create a brand new data structure.

nestedNumbers = [[1], [2]];
numbersCopy = JSON.parse(JSON.stringify(nestedNumbers));

numbersCopy[0].push(300);
// nestedNumbers -> [[1], [2]]
// numbersCopy -> [[1, 300], [2]]
// These two arrays are completely separate!
Copy

@ragavkumarv
swipe to next ➡️