javascript - 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

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

• javascript console.log displays different values on same object

• AngularJS: weird console.log behavior with async chrome.storage.local.get()

Answer 1

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.