Why are console.log() and console.dir() logging Object properties that don't exist yet?

Question

Test the following:

var o = {};
console.log(o);
o.prop = 'value';

In Firefox 42.0 if you click on the Object that shows up in the console, you should be shocked. Tested in Firebug 2.0.13, as well as the regular console.

Even more shocking, test this:

var o = {prop:'test'};
console.log(o);
o.prop = 'value';

I could not reproduce this problem in the most recent Microsoft Edge, using the code above, but I was able to produce the same problem with more extensive code.

Using a much larger Object Oriented JavaScript program (using Construtors), I also tested this with console.dir() and had the same hoisting issue in Microsoft Edge and Firefox.

Is this a bug?

score 1 · Accepted Answer · answered Nov 25 '15 at 08:03

1

It’s not a bug, though it could be considered unintuitive. When you inspect a logged object, you’re inspecting it as it currently exists and not as it was when you logged it. To keep the rich inspection and ignore future modifications, you’ll have to log a deep copy of the object, which isn’t easy to do.

In this example, a quick (enumerable-own-properties-only into a new Object) shallow copy works, though:

function copyObject(obj) {
    var result = {};

    Object.keys(obj).forEach(function (key) {
        result[key] = obj[key];
    });

    return result;
}

var o = {};
console.log(o);
console.log(copyObject(o));
o.prop = 'value';

answered Nov 25 '15 at 08:03

Ry-

218,210
55
464
476

Is that also true of `console.dir()`, because I had the same problem when I used more code? – StackSlave Nov 25 '15 at 08:08
@PHPglue: Yes, it is. It also is true and *was* maybe even less intuitive (until recently) in Chrome & co., where `console.log` was asynchronous in addition to exhibiting this behaviour, so your example could result in `{ prop: 'value' }` being logged as the “object overview” even without expanding it. – Ry- Nov 25 '15 at 08:12
I tried `if(!Object.create){ Object.create = function(o){ function F(){}; F.prototype = o; return new F;} }`, then I used `Object.create()` and had the same issue. – StackSlave Nov 25 '15 at 08:15
1

@PHPglue: `Object.create` doesn’t copy an object. It creates an object with a given prototype. `var p = { x: 5 }; var q = Object.create(p); p.x = 6; q.x` will result in `6`, for example. – Ry- Nov 25 '15 at 08:17
I found a solution for my usage, but was wondering if this was a bug. It looks like some kind of synchronicity issue. My function that I already made does that kind of thing recursively. Thanks. I'm unhappy with the Browser vendors, but will accept this as an answer. – StackSlave Nov 25 '15 at 08:25

score 0 · Answer 2 · answered Nov 25 '15 at 07:02

0

Just a comment:

var o = {};
console.log('logged' + o);
o.prop = 'value';

Results:

logged Object {}
"value"

So, where do you see its logging 'value'?

answered Nov 25 '15 at 07:02

Bhojendra Rauniyar

83,432
35
168
231

You must not have tested it in Firefox 42.0. Tested in regular `console` and firebug `console`. – StackSlave Nov 25 '15 at 07:14

score -1 · Answer 3 · answered Nov 25 '15 at 07:03

-1

You must be confused between the console.log() and console.dir() functions.

console.log(o) prints the object reference. So by the time you expand it in the console, you'll see all the updates that have been done on it so far

console.dir(o) is like a snapshot of the reference at that time. This way you won't be able to see the updates that have been done in a later time in the console

answered Nov 25 '15 at 07:03

ffff

2,853
1
25
44

Take a look at my second example. – StackSlave Nov 25 '15 at 07:15
It is not a bug! That's what the intention of console.log is. To give a reference in the console to the object. By the time you expand the object, all the updates will be reflected. It's like deferring the output until you want to see it. Try console.dir and tell me if the "bug" exists – ffff Nov 25 '15 at 07:21
Why does the second example show results of `{prop: "test"}` in the latest version of Microsoft Edge then, if that is what it's supposed to do? – StackSlave Nov 25 '15 at 07:24
I have never used Microsoft edge. Your question was related to the unexpected behaviour in Mozilla Firefox – ffff Nov 25 '15 at 07:26
Reread the question. I don't think we should expect that behavior. Let's face it Mozilla even capitalizes things like `console` and `window` in their docs. https://developer.mozilla.org/en-US/docs/Web/API/Console/log https://developer.mozilla.org/en-US/docs/Web/API/Window . This makes them appear unprofessional. – StackSlave Nov 25 '15 at 07:28
It serves its own purpose. that's why we have the console.dir for overcoming the behaviour – ffff Nov 25 '15 at 07:30
Using another much larger JavaScript programming example `console.dir()` had the same hoisting issue. – StackSlave Nov 25 '15 at 07:40
@PHPglue: You’re aware that `Console` and `Window` are types, yes? Where `console` and `window` are instances of each? Using the capitalized type names to refer to methods on their prototypes is completely correct. – Ry- Nov 25 '15 at 08:09
Not as far as a JavaScript Programmer is concerned. `console.log(Console); console.log(Window)` in Firebug. I tried `new Console` as well. `Window` does console, as does `Window.prototype`, but `new Window` does not work. The bottom line is that Mozilla needs to make their docs more intuitive for the user. – StackSlave Nov 25 '15 at 23:48
`@Ryan O'Hara` check this out. [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) has some methods as properties of `Array.prototype` while others are not. Please explain. – StackSlave Nov 25 '15 at 23:54

Why are console.log() and console.dir() logging Object properties that don't exist yet?

3 Answers3