How to Clone an Array in Javascript?

  • Time:2020-09-17 14:26:24
  • Class:Weblog
  • Read:33

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) —

Recommend:
How to Convert Binary Number in a Linked List to Integer?
The Permutation Iterator in Python
Compute the Indices of the Target Element in Array/List using Py
5 Cognitive Biases You Can Use to Boost E-Commerce Conversions
Important SEO Tips for E-commerce That You Cannot Disregard
5 Effective Ways to Improve Blog Conversion Rate
7 Reasons Blogging is Essential for Law Firms
Should Your Blog Extend Into Multimedia Forms of Content?
How Small Companies Can Use Big Data
Hands Up and Step Slowly Away from the Keyboard: Why Good Execut
Share:Facebook Twitter
Comment list
Comment add