37

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.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Santosh
  • 3,477
  • 5
  • 37
  • 75
  • https://developer.mozilla.org/en-US/docs/Web/API/Console – Ted Hopp Jan 03 '17 at 18:31
  • in a browser page, they'd typically be identical since `window` is the global namespace. not necessarily in other contexts. – pvg Jan 03 '17 at 18:32
  • That sounds good. So by function and output there is no difference at all ? Did the interviewer tried to trick me ? – Santosh Jan 03 '17 at 18:34
  • 6
    Not being a mind reader, it's hard to know what the interviewer was trying to do, but my guess would be that the question was to test your awareness of `window` being the global object (at least in some environments). – Ted Hopp Jan 03 '17 at 18:37
  • 1
    possible duplicate of [Should one write window.X when referring to a built-in global property X in the browser?](http://stackoverflow.com/q/5460593/1048572) – Bergi Jan 04 '17 at 10:23
  • see also [Why is accessing a variable using window.variable slower?](http://stackoverflow.com/q/31068060/1048572) – Bergi Jan 04 '17 at 10:24
  • Possible duplicate of [Should one write window.X when referring to a built-in global property X in the (desktop) browser?](https://stackoverflow.com/questions/5460593/should-one-write-window-x-when-referring-to-a-built-in-global-property-x-in-the) – Boghyon Hoffmann Nov 17 '18 at 22:35

3 Answers3

41

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.

Community
  • 1
  • 1
Scimonster
  • 32,893
  • 9
  • 77
  • 89
36

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();
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    also provided you're running in a browser page which is not a given. – pvg Jan 03 '17 at 18:34
  • @pvg: Quite, I just re-read the question, and it doesn't actually say that. :-) – T.J. Crowder Jan 03 '17 at 18:35
  • @Santosh: I don't know what you mean by "priority." – T.J. Crowder Jan 03 '17 at 18:37
  • 2
    @Santosh - `window.console.log()` restricts your code to work in environments where `window` is the global object (or a property of the global object). I'd use `console.log()` (without the `window.` prefix) because that will work anywhere that `console` is defined in the global object, whatever it is named. – Ted Hopp Jan 03 '17 at 18:40
  • @pvg: Thanks to you and Ted, I've addressed the non-browser and web worker aspects now, which I'd just completely glossed over... :-) – T.J. Crowder Jan 03 '17 at 18:41
  • 1
    @T.J.Crowder yeah. I think it's deliberate (not by the author) so as to fall nicely into the category of 'crappy interview questions'. – pvg Jan 03 '17 at 18:41
  • 1
    @pvg: Whether purposefully or not, it does fall into that category. ;-) – T.J. Crowder Jan 03 '17 at 18:43
  • 2
    @pvg, I disagree that it is inherently a crappy interview question. It really depends on what the interview was for. Such a question could quickly identify people with a deeper understanding of JavaScript internals, and/or those who are familiar with writing JavaScript for environments where `window` is just another variable. There are a reasonable number of such environments. If all the person is going to be doing is writing vanilla JavaScript code for web pages, then, yeah, it is not that good of a question. On the other hand, the job may be to write code where this understanding *matters*. – Makyen Jan 03 '17 at 21:24
  • @Makyen it's reasonable interview discussion topic. As a single-shot, 'gotcha' question, it's garbage. – pvg Jan 03 '17 at 21:42
  • @pvg, "single-shot, 'gotcha' question"s are almost always inherently garbage, just by their intent to be such questions. We can have no knowledge if this was, in this case, because the OP has not provided enough context about the job and the interview for us to make a determination. – Makyen Jan 03 '17 at 21:55
  • 2
    @pvg, With respect to this specific topic, I've answered many questions on SO where the primary, or at least secondary, problem was that the OP did not understand that `window` was just another variable in the scope/context for which they were writing code. *If the job was specifically for writing code for such an environment*, I can certainly see myself asking something similar in an interview. As you mentioned, it would be as part of a discussion, not intended as a "gotcha", but could be part of gauging where the interviewee is with respect to their understanding of that environment. – Makyen Jan 03 '17 at 22:03
3

There is no difference between console.log and window.console.log. Have a check on MDN. They clearly quote -

The Console object can be accessed from any global object, Window on browsing scopes, WorkerGlobalScope, and its specific variants in workers via property console. It's exposed as Window.console, and can be referenced as simply console.


Adding to this, the question may have also been-

What's the difference between console.log and window.console.

The answer for this would be-

console.log is used for logging(as you know).

window.console checks if the console is available(truthy value) so that we can log next.(in case of mobile browsers, they don't support debugger/console)

Common pattern in code for this is-

window.console && console.log(open_date);

Which is basically short code for -

if( window.console ) {
    console.log( open_date );
}
bozzmob
  • 12,364
  • 16
  • 50
  • 73