How to Clone an Array in JavaScript?

Introduction

JavaScript is one of the languages for web development. It can perform many activities. Also, there are many methods for sorting, scrolling, selecting, slicing, and finding to work on the entire array. Here in this article, we will check each method by performing and also we will learn how to duplicate an array.

We need to create a new array that needs to be the same as the main array or the original array containing the same numbers to change an array in JavaScript.

There are many methods to clone an array in JavaScript. We will check every method to clone an array using the below-provided methods:

Array.slice()

Array.slice is a method that will remove particular entries or numbers in the original array. We can use this method whenever we do not need some numbers. We need to first split the array and copy a set by choosing start and endpoints.

The following code shows how to slice and Array.

Code

Output

If the slice() method is invoked without an argument, it copies the original array from a particular index to the end. Sliced array is nothing but a duplicate of mainArray. Above is the situation where the slice() function returns "[2]" based on the numbers (1,2). Numbers range from 0 to 2.

It is important to note that when we are using the slice() method with multiple arrays, references are assigned instead of values.

Array.concat()

This method will provide us a new array by adding or merging or concatenating many arrays.

Let us discuss this concatenation method below:

Code

Output

Array.map

The Array.map() method will give us an output which is also an array that is same in size as the input array. Map() generates a fresh array for every item in an array. Map() function will not work if there is an empty inside. The map function does not alter the original array.

Code

Output

This program creates a copy of an array using the Array.map method. The map() function executes a specified function on each element of an array, returning the results in a new array.

Array.filter

The Array.filter() function, similar to map(), outputs an array, but the resulting array may not always be the same size. Filter() examines a function & a condition and gives back the element when the condition is satisfied.

Code

Output

The program mentioned creates a copy of the array by utilizing the Array.filter method. The filter() function evaluates criteria within the nums list. If the requirement is fulfilled, the number will be placed in a new array called numsClone.

Array.reduce

Array.reduce() iterates through each element of an array and produces a single value or object representing the final outcome of the function.

Syntax:

Code

Output

The reduce function is employed to decrease the quantity of numbers in the program mentioned. In this instance, we begin with a normalArray that is empty, then we progressively include each element from the "num" array. The array must be returned for the method to be usable in the next iteration. The reference to the array numClone is given back. The number array is going to be duplicated in the numClone array.

JSON.stringify and JSON.parse

JSON.stringify turns an object into a string and JSON.parse turns a string into an object. When you combine these things, you can turn something into a string and then back into a new type of information.

JSON.parse() and JSON.stringify() are used for multilevel deep copying. They copy values instead of references at any level and work with multi-dimensional arrays.

Code

Output

The above program uses JSON.stringify to turn Array1 into a string. Using JSON.parse turns the string into a multi-dimensional array called Array2. This method returns a copy of the array's elements instead. The output shows that changing Array2 doesn't affect Array1.

Note: You can safely copy deep-nested arrays with this method.

Conclusion

1. There are many methods for copying or cloning an array, such as loops, the spread operator (...), and array methods like slice, filter, reduce, and map.
2. During deep copying, the array's reference is copied.
3. parse and JSON.stringify are used for copying information at different levels. They work with multi-dimensional arrays and copy the values instead of references.