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](https://stackoverflow.com/questions/24175017/google-chrome-console-log-inconsistency-with-objects-and-arrays) — Madhawa Priyashantha, Apr 10 '18 at 05:47
Did not understand that @PetIbaño.What part of the code is Async in this.Please,Can you help me understand? — Sunil Hari, Apr 10 '18 at 05:47
Javascript [asynchronous](https://www.pluralsight.com/guides/introduction-to-asynchronous-javascript#module-asynchronouscode) — vpibano, Apr 10 '18 at 05:49
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, Apr 10 '18 at 05:49
chrome console is actually helpful ... when you "open" the object, a little blue `i` appears ... hover over it, and see the message ***"value below was evaluated just now"*** - see how chromes lying console at least tries to tell the truth :p — Jaromanda X, Apr 10 '18 at 05:51
@JaromandaX Guess this is the case with all developer consoles.Firefox also gave the same result — Sunil Hari, Apr 10 '18 at 05:54
yes, but my point was Firefox doesn't tell you it's lying, Chrome does — Jaromanda X, Apr 10 '18 at 05:59
@SunilHari I added answer, hope it help you to understand in the primitive value assignment and object reference assignment. Hope, it will work as per the expectation. Thanks — Debug Diva, Apr 10 '18 at 06:51

score 2 · Answer 1 · answered Apr 10 '18 at 05:49

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 '18 at 05:49

Sreekanth

3,110
10
22

I don't think that is happening, just expand the Array is [Array[2]] and you would be surprised – AurA Apr 10 '18 at 05:53
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. – Sreekanth Apr 10 '18 at 05:56
@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 Apr 10 '18 at 05:58
So when is it printing for the first time ,i prints correctly unlike the first one – Sunil Hari Apr 10 '18 at 06:07
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. – Sreekanth Apr 10 '18 at 06:08

score 0 · Answer 2 · answered Apr 10 '18 at 06:50

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]

Array Behaviour in Javascript

2 Answers2