CODEWITHSUNDEEP
javascript
Asking
Asking

Reputation: 4172

array gives unexpected behaviour

I have this code:

let arr = [1,2,3,6];
let arr2 = arr
arr = []
console.log(arr)
console.log(arr2)

and this:

let arr = [1,2,3,6];
let arr2 = arr
arr.push('new item')
console.log(arr)
console.log(arr2)

Why in the first example, both array are different? (expect both equal with empty array), but in last example, when i push, both arrays chenged like expected?

Upvotes: 0

Views: 55

Answers (2)

David van Driessche
David van Driessche

Reputation: 7048

Think of variables referring to arrays as arrows that point to something (that's what's really meant when people talk about reference types).

A statement such as:

let arr = [1,2,3,6];

can be read as: create an array with four elements ([1,2,3,6]) and let the variable called "arr" point to it.

let arr2 = arr

Then means, create a variable called "arr2" and let it point to the same array of four elements we already have.

The difference between your two examples now becomes easier to understand:

arr = []

Reads as: create an empty array, and make "arr" point to it. This doesn't say anything about "arr2" so that one continues to point to what it was pointing.

arr.push('new item')

This doesn't change any of the arrows, rather it modifies the array both "arr" and "arr2" are pointing at.

Upvotes: 1

Harish
Harish

Reputation: 724

In javascript Array data type is a reference-data-type.

When you create an Array - let arr = [1,2,3,4];, an object [1,2,3,4] is created and its reference is saved as the value of the arr variable.

So, when you assign arr2 = arr, the reference value stored in arr is assigned to arr2. That's why when you try to update arr2, the arr variable is also getting updated because both variables reference the same object.

In the first example, since you have written arr = [], you are basically assigning a new array to the arr variable and it is referencing the new [] object. That's why you are seeing the difference.

Edit: A detailed explanation.

Example 1:

let arr = [1,2,3,4]; // arr is actually storing the [1,2,3,4]'s memory reference.
let arr2 = arr; // Now arr2 is also storing the [1,2,3,4]'s memory reference.
arr = []; // arr now stores a new [] object's memory reference.
console.log(arr); // logs - [] because arr is storing []'s memory reference.
console.log(arr2); // logs - [1,2,3,4] because arr2 is storing [1,2,3,4]'s memory reference.

Example 2:

let arr = [1,2,3,6]; // arr is actually storing the [1,2,3,6]'s memory reference.
let arr2 = arr; // Now arr2 is also storing the [1,2,3,6]'s memory reference.
arr.push('new item'); // [1,2,3,6] object is changed to [1,2,3,6, 'new item']. arr still references the same memory.
console.log(arr); // logs - [1,2,3,6, 'new item'] because arr is storing [1,2,3,6, 'new item']'s memory reference.
console.log(arr2); // logs - [1,2,3,6, 'new item'] because arr2 is also storing [1,2,3,6, 'new item']'s memory reference.

A good article to help you understand the concept better.

Upvotes: 1

Related Questions