How many ways to Clone Array in JavaScript

Tram Ho

Hi, hello friends, surely in the process of working with JavaScript you will encounter many situations where you have to clone an array to a new array so as not to affect the data of the original array. So in that case what do you usually use? Let’s find out through the article below to see how many ways can clone an array (go)

In JavaScript we often hear about 2 terms Shallow copy and Deep copy, temporarily vietsub then it is “shallow copy” and “deep copy” :v

Thus, there will be a number of ways to use only Shallow copy => ie can only clone arrays with simple structure (pure array, array containing 1 or more objects with simple structure, arrays not nested too many levels…). And vice versa Deep copy used to clone arrays with extremely complex structures, deep, multi-level nesting or containing multi-layered objects, …

1. Use Spread Operator (Shallow copy)

Spread Operator perhaps we are too familiar when it comes to ES6, to clone array we do the following

Now I try push() add an element to the new array

With single-dimensional arrays, it’s not complicated, it works very well, but you can follow the following example

The reason is that array/object is data stored as reference, the value of array/object is copied by reference (pointing to the same memory area) instead of by value.

2. Use a for . loop (Shallow copy)

An old method that is quite manual but still commonly used is to create a new array, iterate over each element of the original array and then push each element into the new array.

And at the same time, it also has the same reference problem as the guy above

3. Use loops while (Shallow copy)

There is a brother for I can’t do without my brother while Okay

or another more common spelling

Remind me a little bit of operator ++ for those who forgot

The expression i++ will increment the value of i by one at the end of the command line, and the expression ++i will increment immediately and always

 

4. Use Array.map (Shallow copy)

As you know map() will iterate through the elements in the array, transform them and return the new array, in case we don’t “transform” the original elements that means we are cloning out a new array

5. Use Array.filter (Shallow copy)

Same as map(), if in the callback of filter() return true then it will return the original array

6. Use Array.reduce (Shallow copy)

Nature of reduce() is from the original array, computes and produces a final output, from which we can combine with push() to push the items of the original array one by one into the accumulator as follows

7. Use Array.slice (Shallow copy)

If no parameters are passed, slice() we will get 1 copy of array

8. Use Array.concat (Shallow copy)

concat() will return the original array if no parameters are passed or an empty array is passed

9. Use Array.from (Shallow copy)

10. Use clone by lodash (Shallow copy)

Lodash provides us with the function _.clone() to shallow copy array/object

11. JSON.parse and JSON.stringify (Deep copy)

This is the safest method to deep copy an array/object

Accordingly, we will combine

  • JSON.stringify – turn an object into a string
  • JSON.parse – turn a string into an object

12. Using lodash’s cloneDeep (Deep copy)

Lodash provides us with the function _.cloneDeep() to deep copy array/object

Conclude

Above I have introduced to you a few ways to clone an array, in fact, depending on the requirements of the problem, we will choose the most optimal way.

If you find the article good, please give me +1 upvote. If you like me, press the follow button to know more interesting things. Good luck and see you in the next post!

Share the news now