What is the difference between window.console.log and console.log

Question

Just went through an interview. The first question asked me was what is console.log(). I answered with so confidence. Again,

The second question was, what is the difference between window.console.log() and console.log(). I was speechless. Tried searching in Google and Stack Overflow. I didn't find such helpful post to understand the difference between them.

Any thoughts is greatly appreciated.

Answer 1

In a normal browser context, there is no difference. console is a global variable, and all globals are properties of the window object.

console.log(console.log==window.console.log) // true

There are some caveats, such as when not running in the browser, or if the console variable has been reassigned. T.J. Crowder explains it nicely.

Answer 2

If you mean in the default browser JavaScript environment, there is effectively none provided window and console haven't been shadowed or reassigned.

In the default browser JavaScript environment, window is a global that refers to the global object, which is also the window object. The global object holds most globals as properties (it used to be all, but in ES2015 that changed; globals created by let, const, or class are not properties of the global object). But that's not true in most non-browser environments (NodeJS, for instance, uses global instead of window), or even in some non-default browser environments (such as a web worker's environment, which doesn't have window as they can't access the window). So in environments where window isn't defined, window.console.log will fail where console.log wouldn't (provided the environment provides a global console).

To understand the difference, let's work each of them through:

console.log(...) means:

1. The JavaScript engine has to search for the a binding for the identifier console starting with the current execution context, then the next one, then the next, until it finds it at global scope.
2. Then it looks up the log property on the resulting object.
3. Then it calls it

window.console.log(...) means:

1. The JavaScript engine has to search for the a binding for the identifier window starting with the current execution context, then the next one, then the next, until it finds it at global scope.
2. Then it looks up the console property on the resulting object.
3. Then it looks up the log property on the resulting object.
4. Then it calls it

So for instance, here's an example where console has been shadowed, and so console.log fails whereas window.console.log works:

function foo() {    var console = 42;        try {      console.log("You WON'T see this.");    } catch (e) {    }      try {      window.console.log("You WILL see this.");    } catch (e) {    }  }  foo();