Array Behaviour in Javascript

Question

I tried executing the code in Chrome Developer Console and i got this odd result which am not able to understand

var arr = [[2,2]];console.log('Array is',arr);arr[0] = [3,3]

The output i got after executing this is

Array is [[3,3]]

The assignment should happen after the console.log had been executed.But it magically happened before that.

To clarify i tried running the same code in JsBin.However in JSBin i got the expected out which is

Array is [[2,2]]

However this code yields expected result in chrome

var arr = [2,2];console.log('Array is',arr);arr[0] = 3;console.log(arr)

Output Array is [2,2] [3,2]

Can someone help me understand this.

Possible duplicate of Google Chrome console.log() inconsistency with objects and arrays — Madhawa Priyashantha
– Madhawa Priyashantha, Commented Apr 10, 2018 at 5:47
Did not understand that @PetIbaño.What part of the code is Async in this.Please,Can you help me understand? — Sunil Hari
– Sunil Hari, Commented Apr 10, 2018 at 5:47
the console lies - objects in the console are not "static" - they represent the current state of the object - so it's not really "Array behaviour" you are seeing, it's "console behaviour" you don't understand — Jaromanda X
– Jaromanda X, Commented Apr 10, 2018 at 5:49

Sreekanth · Accepted Answer · 2018-04-10 05:49:45Z

2

This is because chrome puts the value of the variable assignment in the console, when you initialize / declare a variable. This is an expected behavior.

answered Apr 10, 2018 at 5:49

Sreekanth

3,13014 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AurA Over a year ago

I don't think that is happening, just expand the Array is [Array[2]] and you would be surprised

Sreekanth Over a year ago

Arrays are basically references and clicking on the > symbol, just triggers a evaluation and it fetches the values then, because its a reference you see all the values associated. Its perfectly valid and reasonable.

Sunil Hari Over a year ago

@Sreekanth Can u tell me then why same thing is not happening in this case var arr = [2,2];console.log('Array is',arr);arr[0] = 3;console.log(arr)

Sunil Hari Over a year ago

So when is it printing for the first time ,i prints correctly unlike the first one

Sreekanth Over a year ago

you also have changed the value of arr from array of array to array of objects.[[2,2]] is not same as [2,2] and the same concept of references would apply here. arr = [[2,2]], arr[0] is a reference , where as [2,2] its not a reference, its a value.

Rohìt Jíndal · Accepted Answer · 2018-04-10 06:50:26Z

0

Arrays are objects in JavaScript. Hence, arr[0] assignment after console.log assigning the array on the same reference where first var arr = [[2,2]]; refer. Both arr variables refer to the same single object.

It happens only with objects but not with Primitive values like numbers.

Example with primitive value

var arr = 1;
console.log('Array is',arr); // 1
arr++;
console.log('Array is',arr); // 2

Example with objects :

var arr = [[2,2]];
console.log('Array is',arr);
arr[0] = [3,3]

To avoid that you can use this :

var arr = [[2,2]];
console.log('Array is', JSON.parse(JSON.stringify(arr)));
arr[0] = [3,3]

answered Apr 10, 2018 at 6:50

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

Array Behaviour in Javascript

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related