How to copy an array in javascript?

We have array [“javascript”, “jest”, “fajny”, 1, 2, 3]. Let’s see what’s happends, if we want to copy it and assign it do variable, and next modify it:

let arr1 = ["javascript", "jest", "fajny", 1, 2, 3];
let arr2 = arr1;
arr2[2] = "super";

console.log(arr1);          // ["javascript", "jest", "super", 1, 2, 3]
console.log(arr2);          // ["javascript", "jest", "super", 1, 2, 3]

It turns out that the data in both tables have changed! Why the = sign doesn’t work when copying arrays?

In javascript we have types of data: primitive and reference.

Primitive Types:

string
number
boolean
null
undefined

Reference Types:

object
array
function

Primitive Types are used to store “simple” data, such as a number, string, or other data mentioned above. So if we assign 5 to the variable called number (let number = 5), the number 5 will be saved in the memory.

However, for reference types, to variables are not assigned values but references. This means that to the variable let arr = [1, 2, 3] is not assigned value [1, 2, 3], but the address to the memory location where this value is saved. This procedure saves memory, because the value for arr is saved only once, and you can refer to it from several places in the code.

So when we assign arr1 variable to the arr2 variable, we copy the reference to the object, not the object itself (in our case the object is an array). Now two variables – arr1 and arr2 refer to the same array, so if we change the value of either, the value of the other will change. How to fix it?

We already know that we cannot use the = sign to copy the array value. But we can use other ways:

1. slice();

let arr1 = ["javascript", "jest", "fajny", 1, 2, 3];
let arr2 = arr1.slice();
arr2[2] = "super";

console.log(arr1);          // ["javascript", "jest", "fajny", 1, 2, 3]
console.log(arr2);          // ["javascript", "jest", "super", 1, 2, 3]

2. spread operator

ES 6 has introduced a new way to copy tables. It is the spread operator, which is three dots placed before entering the values you want to iterate to the destination. This means that by typing … arr1 you “throw” all the values from arr1 to the place where you want to copy them:

let arr1 = ["javascript", "jest", "fajny", 1, 2, 3];
let arr2 = [...arr1];
arr2[2] = "super";

console.log(arr1);          // ["javascript", "jest", "fajny", 1, 2, 3]
console.log(arr2);          // ["javascript", "jest", "super", 1, 2, 3]

3. concat();

You can also use the function of joining arrays and connect an empty array to an existing one, thus creating a new array.

let arr1 = ["javascript", "jest", "fajny", 1, 2, 3];
let arr2 =  [].concat(arr1);
arr2[2] = "super";

console.log(arr1);          // ["javascript", "jest", "fajny", 1, 2, 3]
console.log(arr2);          // ["javascript", "jest", "super", 1, 2, 3]

4. Array.from();

Another option for copying arrays is to create a new array from an existing array. The Array.from() function will do this;

let arr1 = ["javascript", "jest", "fajny", 1, 2, 3];
let arr2 =  Array.from(arr1);
arr2[2] = "super";

console.log(arr1);          // ["javascript", "jest", "fajny", 1, 2, 3]
console.log(arr2);          // ["javascript", "jest", "super", 1, 2, 3]

Multidimensional Arrays

All of the above-mentioned methods, have a disadvantage – they can copy an array only on one level (so-called shallow copy), so they are NOT suitable for copying multidimensional arrays.

let arr1 = [[1, 2, 3]];
let arr2 = arr1.slice();        
// or let arr2 = […arr1];
// or let arr2 = [].concat(arr1);
// or let arr2 = Array.from(arr1);

arr2[0][1] = "super";

console.log(arr1);           //  [[1, "super", 3]] 
console.log(arr2);           //  [[1, "super", 3]]

How to copy multidimensional array in javascript?

If we want to copy a multidimensional array, we must write our own function. A recursive function will help us here – this is a function, that calls itself during its execution. Whenever our function finds a nested array, it will call itself again to copy each of its elements. To return the new array we will use the map() function;

let arr1 = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];

function arrCopy(arr) {
    let arr2 = arr.map( val => {
        if (Array.isArray(val)) {
            return arrCopy(val)
        } else {
            return val
        }
    })
    return arr2;
}

let arr2 = arrCopy(arr1);
arr2[3][3][3][0] = "super";

console.log(arr1);          // [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]]
console.log(arr2);          // [1, 2, 3, [4, 5, 6, [7, 8, 9, ["super", 11, 12]]]]

Now we can freely change the nested values in the copied array without fear that the original array will change 🙂