Javascript Object Property logged in Google Chrome Console before Declaration [duplicate]

Question

I've been testing some JavaScript using the Google Chrome version 28.0.1500.95 m console and am looking for a bit more understanding of how it works: Have a look at the code below:

var obj = {
    a: 99,
    f: function() { }
}

console.log(obj.a)
console.log(obj.z)    
console.log(obj)

o.z = 100;

Demo

This outputs the following results:

99 
undefined 
Object {a: 99, f: function}
a: 99
f: function () { }
z: 100
__proto__: Object

My question is, why is z visible in the results when it wasn't declared until after the log?

I'm assuming this is something with how the console works and not some weird scoping rule in JavaScript, that I'm unaware of?

Can anyone tell me what's happening here please?

Answer 1

The object in the console initially is shown as Object and expanded when you click on the arrow.

There is an i-icon when you expand the Object, when you hover it you'll see the answer:

object state below is captured upon first expansion

What you see after the expansion is the state of the object at the time of the expansion, not the state at the moment when you call log()