How to empty array after it was initialized with the values from other array

Question

I have this code:

var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1;
arr1 = [];
console.log(arr1);
console.log(arr2);

when i make arr1 empty, then arr2 is still not empty but has the values from arr1 . I want to make the length of arr2 to be zero.

I know that i can do

arr2 = [];

but is there any other way with which when we make changes to the original array - that to be reflected on the other arrays - which inherited their values?

Answer 1

After you do var arr2 = arr1 , the variables arr2 and arr1 both refer to the same array, but other than that, there is no link between them. When you do arr1 = [] , you're changing the contents of arr1 so it refers to a different array. The array that arr2 refers to (and that arr1 used to refer to) isn't in any way affected.

If you want to clear the array that both arr1 and arr2 refer to, you can do that by setting its length to 0 (since arrays are mutable):

 var arr1 = ['a','b','c','d','e','f']; var arr2 = arr1; arr1.length = 0; // <=== console.log(arr1); console.log(arr2);

But let's be clear here: There's just one array in this scenario.

Let's look at this in more detail:

After the var arr1 = ['a','b','c','d','e','f']; statement, you have something like this in memory:

                    +−−−−−−−−−−−+
arr1:Ref54132−−−−−−>|  (array)  |
                    +−−−−−−−−−−−+
                    | length: 6 |
                    | 0: "a"    |
                    | 1: "b"    |
                    | ...       |
                    +−−−−−−−−−−−+

Then when you do var arr2 = arr1; , you have:

                 
arr1:Ref54132−−−+
                |
                |
                |   +−−−−−−−−−−−+
                +−−>|  (array)  |
                |   +−−−−−−−−−−−+
                |   | length: 6 |
                |   | 0: "a"    |
arr2:Ref54132−−−+   | 1: "b"    |
                    | ...       |
                    +−−−−−−−−−−−+

Note that the value of arr1 and arr2 are the same (a reference to the array, elsewhere in memory).

If you then do arr1 = [] , you're changing arr1 so it refers to a different array, one you just created with [] :

                    +−−−−−−−−−−−+
arr1:Ref64758−−−−−−>|  (array)  |
                    +−−−−−−−−−−−+
                    | length: 0 |
                    +−−−−−−−−−−−+

                    +−−−−−−−−−−−+
arr2:Ref54132−−−−−−>|  (array)  |
                    +−−−−−−−−−−−+
                    | length: 6 |
                    | 0: "a"    |
                    | 1: "b"    |
                    | ...       |
                    +−−−−−−−−−−−+

At that point, there's no connection at all between arr1 and arr2 .

But if you do arr1.length instead , you modify the state of the array arr1 refers to (and arr2 also refers to), removing all of its entries:

                 
arr1:Ref54132−−−+
                |
                |
                |   +−−−−−−−−−−−+
                +−−>|  (array)  |
                |   +−−−−−−−−−−−+
                |   | length: 0 |
                |   +−−−−−−−−−−−+
arr2:Ref54132−−−+

Answer 2

Instead of

arr1 = [];

set the length to 0

arr1.length = 0;

or

arr1.splice(0, arr1.length)