How to Clone an Array in Javascript?

In Javascript, the arrays are passed by reference, and sometimes we want to clone an array. We cannot use the simple = operator as the reference is assigned.

1
2
3
4

var arr = [1, 2, 3];
var newArray = arr;
// true, as they both point to the same memory location
console.log(arr === newArray);

var arr = [1, 2, 3];
var newArray = arr;
// true, as they both point to the same memory location
console.log(arr === newArray);

We can also use Array.from, the ES6 syntax sugar – triple dot spreader …, or the old fashion way .slice() to return a new copy of the array. Let’s see the following examples.

1
2
3
4
5
6
7
8
9
10
11
12
13

var arr = [1, 2, 3, 4];
var newArr0 = arr;
var newArr1 = arr.slice();
var newArr2 = [...arr];
var newArr3 = Array.from(arr);
 
// true
console.log(arr === newArr0);
 
// all below are showing false as new arrays are cloned
console.log(arr === newArr1);
console.log(arr === newArr2);
console.log(arr === newArr3);

var arr = [1, 2, 3, 4];
var newArr0 = arr;
var newArr1 = arr.slice();
var newArr2 = [...arr];
var newArr3 = Array.from(arr);

// true
console.log(arr === newArr0);

// all below are showing false as new arrays are cloned
console.log(arr === newArr1);
console.log(arr === newArr2);
console.log(arr === newArr3);

Is that it? How about multidimensional arrays? Are the above methods supposed to do their jobs?

1
2
3
4
5
6
7
8
9
10
11
12
13

var arr = [[1, 2], [3, 4]];
var newArr1 = arr.slice();
var newArr2 = [...arr];
var newArr3 = Array.from(arr);
 
newArr1[0][0] = 'a';
console.log(arr[0][0]); // prints a
 
newArr2[0][0] = 'b';
console.log(arr[0][0]); // prints b
 
newArr3[0][0] = 'c';
console.log(arr[0][0]); // prints c

var arr = [[1, 2], [3, 4]];
var newArr1 = arr.slice();
var newArr2 = [...arr];
var newArr3 = Array.from(arr);

newArr1[0][0] = 'a';
console.log(arr[0][0]); // prints a

newArr2[0][0] = 'b';
console.log(arr[0][0]); // prints b

newArr3[0][0] = 'c';
console.log(arr[0][0]); // prints c

It turns out that all the above methods are providing the shallow copies – where only the first dimensions are copied by values and the subsequent dimensions are still copying the references. Therefore, if you change the values in the above 2 dimensional ‘cloned’ arrays, the original arrays are impacted even those three ‘cloned’ arrays are of different memory locations!

The deep clone (or deep copy) in Javascript, can be done via a custom deep copy function, as detailed in: How to Clone Variables (The Clone Function) in Javascript?

–EOF (The Ultimate Computing & Technology Blog) —