Consecutive calls to console.log produce inconsistent results

Question

Ok, I'm completely dumbfounded by this. (and I might be overlooking something obvious but...)

I have 2 consecutive calls to console.log. There isn't anything else between them

console.log($state);
console.log($state.current);

and here's an image of the produced results

Console.log screenshot

Why do the 2 produce different "current" objects? How can this happen?

Context:

Those calls are made inside an ajax call while resolving a route dependencies. If you need more code or context let me know.

Confirmed the same issue in Chrome and Firefox

Ajax call and wrapper function (no modifications whatsoever)

normaCtrl.publicNorma = ['$http', '$state', '$stateParams', 'baseUrl', function ($http, $state, $stateParams, baseUrl)
{
    var id = $stateParams.id;
    return $http.get(baseUrl + "api/public/norma/" + id).then(
        function (response) {
            console.log($state);
            console.log($state.current);
            console.log($state.current.title);
            return response.data;
        }
    );
}];

Possible related questions

Is it possible multiple ajax requests are firing? Could you show where $state is actually set? — ioseph, Feb 27 '14 at 05:39
$state is set by ui-router, a third party library for AngularJs — Tivie, Feb 27 '14 at 05:40
@FUserThrowError yes, other objects can affect this variable. AngularJS is doing a lot of stuff under the hood — Tivie, Feb 27 '14 at 05:42
@Tivie you can try using $watch to see that other objects affects on them and how )) And i think problem in that !! — Farkhat Mikhalko, Feb 27 '14 at 05:44

score 12 · Accepted Answer · answered May 21 '15 at 02:25

Well, here's the answer for those that stumble upon this.

Short Answer

Console.log shows deep mutable objects at the last state of execution, not at the state when console.log was called.

More details

Basically, when working with mutable deep objects, Console.log stores the reference to said object instead of storing an object clone.

Since there is a time gap between storing and visualization, when you click the arrow for further inspection what you're seeing is actually the current state of the object and not the the state of the object when console.log was called.

One way to always make sure you're using an "object snapshot" is to call Json.stringify or use console.dir when available.

Note that `console.dir` on Chrome may not work (I remember it did, but now it doesn't). `Json.stringify` Works. — Izhaki, Jan 05 '17 at 23:57

Andrew Templeton · Answer 2 · 2014-02-27T05:52:29.630

1

Weird. Is it an ECMA 5 object that has a weird getter? Still wouldn't make sense for the plain $state call. I assume there's not just something broken with your GC...

Are you sure these are the calls being logged?

edited Feb 27 '14 at 05:52

answered Feb 27 '14 at 05:43

Andrew Templeton

1,656
10
13

1

Javascript is not multithreaded. The variable cannot be changing value between the console.log calls – Tivie Feb 27 '14 at 05:46
Oops, didn't notice it was in the same portion of the promise... I should go to bed – Andrew Templeton Feb 27 '14 at 05:47
I do. Made a project wide search for console.log, these are the only 3 matches – Tivie Feb 27 '14 at 05:57

Consecutive calls to console.log produce inconsistent results

Context:

Possible related questions

2 Answers2

Short Answer

More details

Linked

Related