5 Ways To Clone an Array in Javascript

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.

5 Ways To Clone an Array in Javascript

Comments

More from this blog

Convert Existing React App to Server Side Rendered

For my Ukrainian student, learning to code

Introduction to computer science, with problem-solving

Get started with coding, for free

Don't skip use case analysis, learn how to build them

What is shallow copy?

Looping

Using forEach

Using for loop

Slice function

Concat function

Array.from

Spread operator

Command Palette

Comments

More from this blog

What is shallow copy?

Looping

Using forEach

Using for loop

Slice function

Concat function

Array.from

Spread operator