How to Copy Array by Value in JavaScript ? (original) (raw)

Last Updated : 11 Nov, 2024

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];

JavaScript `

// 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);

`

Output

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);

JavaScript `

// 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);

`

Output

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();

JavaScript `

// 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);

`

Output

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.

JavaScript `

// 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) => { /* … */ })

JavaScript `

// 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);

`

Output

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 ));

JavaScript `

// 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);

`

Output

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