{"id":20502,"date":"2020-07-30T10:45:51","date_gmt":"2020-07-30T17:45:51","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=20502"},"modified":"2023-12-01T03:57:08","modified_gmt":"2023-12-01T11:57:08","slug":"javascript-copy-array","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-copy-array\/","title":{"rendered":"JavaScript Copy Array: A Guide"},"content":{"rendered":"\n

In JavaScript<\/a>, copying an array is not as simple as using the assignment operator (=) to create a duplicate. If you’ve ever tried this, you will be surprised to find out that it only creates a link to the original list. What’s the deal?
<\/p>\n\n\n\n

In this guide, we’re going to talk about how to copy a JavaScript array. We’ll walk through the code for three JavaScript copy array strategies so you can get started copying arrays.<\/p>\n\n\n\n

The Problem with Copying JavaScript Arrays<\/h2>\n\n\n\n

On some level, the “=” operator creates a copy of an array<\/a> into a new variable<\/a>. It’s more of a pointer than a copy though. This is because the “=” operator creates a reference to an original array. It does not create a duplicate of the existing array. 
<\/p>\n\n\n\n

Let’s try to create a copy of an array using the assignment operator<\/a> with no other code:<\/p>\n\n\n\n

var berries = ["Strawberry", "Gooseberry", "Raspberry"];\nvar fruits = berries;\n\nconsole.log(fruits);<\/pre><\/div>\n\n\n\n
Our code returns: <\/p>\n\n\n\n
[ "Strawberry", "Gooseberry", "Raspberry" ]<\/pre><\/div>\n\n\n\n
It looks like our array has been copied. “fruits” contains all the values from our “berries” array.
<\/p>\n\n\n\n
Now, let’s try to add an item to the “fruits” array:<\/p>\n\n\n\n
fruits.push("Melon");\nconsole.log(fruits);\nconsole.log(berries);<\/pre><\/div>\n\n\n\n
We have added “Melon” to the fruits array. We then print out the values of “fruits” and “berries” to the console:<\/p>\n\n\n\n
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]\n[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]<\/pre><\/div>\n\n\n\n
Both “fruits” and “berries” contain the same values. That’s because we have not technically cloned our array. We’ve just created a reference to it.
<\/p>\n\n\n\n
Any time we manipulate the “berries” array, the changes will be made in the “fruits” array.<\/p>\n\n\n\n
How to Copy a JavaScript Array<\/h2>\n\n\n\n
The assignment operator does not copy an array. We’ve got to use another approach. Luckily for us, there are plenty of ways to create a copy of an array. The top three approaches are:
<\/p>\n\n\n\n