Javascript array.forEach Scope?

Question

The console.log on line 9 shows

{ 'count' : 1111111 , 'average' : 2222222 , 'total' : 3333333 }

for all 3 array elements even though the loop that makes those changes has not run yet. How is this possible?

function test11(){

    var test = [
        { 'count' : 1 , 'average' : 2 , 'total' : 3 } ,
        { 'count' : 10 , 'average' : 20 , 'total' : 30 } , 
        { 'count' : 100 , 'average' : 200 , 'total' : 300 }
    ] ; 

    console.log( test ) ; 

    test.forEach( function( element , service_index , array ){

        array[ service_index ].count = 1111111 ;
        array[ service_index ].average = 2222222 ;
        array[ service_index ].total = 3333333 ;

    });

    console.log( test ) ;

    return ; 

}

Here is a jsfiddle of the code http://jsfiddle.net/d46wh2cv/7/ .

I read the specs at :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

but I don't see any explanation for this counter intuitive behavior.

I am running Debian Linux with Google chrome 39.0.2171.95 and have also had the same result in Iceweasel 24.5.0.

Thanks for the help.

Probably a duplicate of [**This**](http://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays) and a few others. — adeneo, Jan 12 '15 at 07:45
http://stackoverflow.com/questions/8249136/why-does-javascript-object-show-different-values-in-console-in-chrome-firefox — adeneo, Jan 12 '15 at 07:46

score 2 · Accepted Answer · answered Jan 12 '15 at 07:44

2

You're logging a reference to an object (since Arrays are an instance of the global Array object).

You're right that the loop hasn't run at the time of the log line, but that doesn't matter. By the time you inspect it, the values have already changed (since the loop probably takes all of 2 or 3 milliseconds to run).

Try logging just test[0].count instead of the whole object.

answered Jan 12 '15 at 07:44

rockerest

10,412
3
37
67

1

http://jsbin.com/bopidetubi/1/edit?html,css,js,console,output shows me the correct output with the bin console whenever the chrome logger shows me the wrong one for the reason mentioned by rockerest – MrVinz Jan 12 '15 at 07:47
http://jsfiddle.net/d46wh2cv/8/ That did it. I figured it HAD to be something browser based but that sucks quite royally. Am I supposed to add a timeout or something there? SMH. The issue was showing up in functional code and now I am worried that high user system speed will impact changes I make inside of nested loops causing unexpected results. This is pretty scary. – Jordan Reddick Jan 12 '15 at 07:48
@JordanReddick I'm not sure what you mean. However, if I'm understanding that you want to view the data before it changes, you can do something like `console.log( JSON.stringify( test ) );`. Additionally, you don't need to `return ;` from functions if nothing is being returned. – rockerest Jan 12 '15 at 07:55
@JordanReddick, this is pretty typical behavior of references. Objects are passed by reference in Javascript. So when you log the object, it logs whatever the pointer is pointing to. If that reference changes, so will the result you see. I hope that this isn't scary for you as it's actually a powerful feature of the language (and many other languages that pass-by-ref). – rockerest Jan 12 '15 at 07:59
Oh - so you are saying it is just the console that is lagging? The variable holds the correct value at that line. In my code I am resetting values to 0 after each cycle in a loop. If I log the precise value inside the loop it shows 0 but if I log the entire object immediately after finishing the loop it shows values that should not be set until later in the code. This would lead to bad results that may look valid if the actual numbers are not being reset. If it is simply the logging that is slow - I can live with that. – Jordan Reddick Jan 12 '15 at 08:03
@JordanReddick There is absolutely no lagging. See [this jsfiddle](http://jsfiddle.net/rockerest/qyzsLwd3/). Everything is exactly the values you would expect at each moment. [Here's](http://stackoverflow.com/questions/6605640/javascript-by-reference-vs-by-value) an SO answer explaining by-reference if you want to brush up on by-ref versus by-val. – rockerest Jan 12 '15 at 08:17

Javascript array.forEach Scope?

1 Answers1