How to Copy Array by Value in JavaScript ?

There are various methods to copy array by value in JavaScript.

1. Using Spread Operator

The JavaScript spread operator is a concise and easy metho to copy an array by value. The spread operator allows you to expand an array into individual elements, which can then be used to create a new array.

Syntax

const newArr = [ ...arr];

// Given array
const a = [ 10, 20, 30, 40, 50 ];

// Copy the array using spread operator
const a1 = [...a];

// Display new array
console.log("New Array: ", a1);

// Check if the arrays share same reference 
console.log("Is Both Arrays has Same Reference: ", a === a1);

New Array:  [ 10, 20, 30, 40, 50 ]
Is Both Arrays has Same Reference:  false

2. Using array.from() Method

The Array.from() method is another way to copy an array by its value in JavaScript. This method creates a new array from an existing array, using an optional mapping function to transform the values in the new array.

Syntax

Array.from(object, mapFunction, thisValue);

// Given array
const a = [ 10, 20, 30, 40, 50 ];

// Copy the array using Array.from() method
const a1 = Array.from(a);

// Display new array
console.log("New Array: ", a1);

// Check if the arrays share same reference 
console.log("Is Both Arrays has Same Reference: ", a === a1);

New Array:  [ 10, 20, 30, 40, 50 ]
Is Both Arrays has Same Reference:  false

3. Using array.slice() Method

The slice() method creates a copy of an array by its value in JavaScript. This method creates a new array with a subset of the elements from the original array.

Syntax

arr.slice();

// Given array
const a = [ 10, 20, 30, 40, 50 ];

// Copy the array using array.slice() method
const a1 = a.slice();

// Display new array
console.log("New Array: ", a1);

// Check if the arrays share same reference 
console.log("Is Both Arrays has Same Reference: ", a === a1);

New Array:  [ 10, 20, 30, 40, 50 ]
Is Both Arrays has Same Reference:  false

4. Using structuredClone() Method

We can also use the modern structuredClone() method for deep cloning of an array. This can be done using the structured clone algorithm.

// Given array
const a = [ 10, 20, 30, 40, 50 ];

// Copy the array using structured clone
const a1 = structuredClone(a);

// Display new array
console.log("New Array: ", a1);

// Check if the arrays share same reference 
console.log("Is Both Arrays has Same Reference: ", a === a1);

Output:

New Array: [ 10, 20, 30, 40, 50 ]
Is Both Arrays has Same Reference: false

Note: This method only works in supported environments.

5. Using array.map() Method

The JavaScript array.map() method copy an array in JavaScript involves creating a new array by applying a function to each element of the original array. This method is useful for creating a shallow copy or transforming elements during the copying process:

Syntax

map((element, index, array) => { /* … */ })

// Given array
const a = [ 10, 20, 30, 40, 50 ];

// Copy the array using array.map() method
const a1 = a.map(element => element);

// Display new array
console.log("New Array: ", a1);

// Check if the arrays share same reference 
console.log("Is Both Arrays has Same Reference: ", a === a1);

New Array:  [ 10, 20, 30, 40, 50 ]
Is Both Arrays has Same Reference:  false

6. Using JSON parse() and stringify() Methods

The JSON methods to copy an array involves serializing the original array to a JSON string with JSON.stringify(), then deserializing it back to a new array with JSON.parse(). This method creates a deep copy, including nested objects.

Syntax

const newArray = JSON.parse( JSON.stringify( array ));

// Given array
const a = [ 10, 20, 30, 40, 50 ];

// Copy the array using JSON methods
const a1 = JSON.parse(JSON.stringify(a));

// Display new array
console.log("New Array: ", a1);

// Check if the arrays share same reference 
console.log("Is Both Arrays has Same Reference: ", a === a1);

New Array:  [ 10, 20, 30, 40, 50 ]
Is Both Arrays has Same Reference:  false