How to Copy an Array by Value in JavaScript?

When working with arrays in JavaScript, you may find a need to create a copy of an array without modifying the original array. However, suppose you directly trying to assign an array to a new variable. In that case, it only creates a reference to the original array, which means making changes in one affects the other. So, how do you copy an array by value? In this blog, you will explore various methods to copy an array, including the difference between shallow and deep copies in JavaScript.

Table of Contents

• Shallow Copy Methods
  • Method 1: Using the Spread Operator
  • Method 2: Using an Array.from() Method
  • Method 3: Using slice() Method
  • Method 4: Using the map() Method
• Deep Copy Methods
  • Method 1: Using JSON.stringify() and JSON.parse()
  • Method 2: Using structuredClone() Method
• Performance Considerations
• Conclusion

Shallow Copy Methods

A shallow copy creates a new array but holds a reference to the objects inside it. In other words, if the array contains primitive values like numbers or strings, then they are fully copied. But if the array contains nested objects or other arrays, then only references are shared, not fully copied. Here are some methods to perform a shallow copy in JavaScript:

Method 1: Using the Spread Operator

The spread operator { … } is a simple and modern way to copy an array in JavaScript.

Syntax:

const newArr = […arr];

Example:

Output:

Explanation: In this example, you’re using the spread operator { … } for copying the value of an array into a new variable. After copying all the values from the original to the copied array. You can check both references by using the === operator.

Method 2: Using an Array.from() Method

The Array.from() creates a new array from an existing one, and it is more useful when you are working with array-like objects.

Syntax:

const newArr = Array.from(arr);

Example:

Output:

Explanation: In this example, you’re using the Array.from() method to copy an original array into a copied array.

Method 3: Using slice() Method

The slice() method creates a shallow copy of an array. In other words, when the slice() method is used to copy an array, it creates a completely new array with a different reference.

Syntax:

const newArr = arr.slice();

Example:

Output:

Explanation: Use the .slice() method to create a copy of the original array with a completely different reference.

Method 4: Using the map() Method

The map method helps you to create a copy of the original array. It also allows you to perform some extra modifications in the newly copied array.

Syntax:

const newArr = arr.map(item => item);

Example:

Output:

Explanation: The map() method is another simple method to copy array elements from the original array.

Deep Copy Methods

A deep copy creates a complete copy of an array so that the copied array is independent of the original array. Here are some methods to create a deep copy of an array in JavaScript:

Method 1: Using JSON.stringify() and JSON.parse()

This method converts an array to a JSON string and then back to an array. In this way, it ensures a full deep copy of an array.

Syntax:

const newArr = JSON.parse(JSON.stringify(arr));

Example:

Output:

Explanation: The JSON.stringify() and JSON.parse() combine to create a complete independent copy of the original array.

Method 2: Using structuredClone() Method

structuredClone() provides a built-in deep copy. The only disadvantage of using this is that it is not supported in all environments (older browsers and Node.js versions before 17).

Example:

Output:

Explanation: structuredClone() is used to create a deep copy of an array in JavaScript, but it cannot work in all environments. Thus, it is not recommended for use.

Performance Considerations

If you’re copying values from the original array into another variable, then choose the method wisely based on the specific needs and your browser support.

• The spread operator { … } and slice() are the fastest methods to copy simple arrays.
• Use JSON.stringify() and JSON.parse(), besides using structuredClone() for performing a deep copy.

Conclusion

Creating an independent copy of an array in JavaScript is important because it helps you to work separately on two independent arrays containing the same value. you have spread operator {…}, Array.from(), slice() and map() methods used to create shallow copies and also you have JSON.stringify() and JSON.parse() for creating deep copies. Choosing the right method based on your needs helps you to create copies efficiently.

How to Copy an Array by Value in JavaScript – FAQs