What does window.console do?

Question

I am trying to understand some code in a tutorial, and there is a line:

window.console && window.console.timeEnd && console.timeEnd('Generated In');

What would this do in JavaScript/jQuery?

Answer 1

The window.console object provides logging & debugging features. If you open up the console window (Ctrl-Shift-J or Command-Option-J), you'll see console output.

The timeEnd method provides for timing functions. See the MDN documentation for more information.

This particular construct checks for the existence of the console object and the timeEnd method before calling it. JavaScript has short-circuit evaluation, so if window.console is falsey, window.console.timeEnd will never be evaluated (if it was, it would fail), and if window.console.timeEnd is falsey, console.timeEnd('Generated In') will never be called (if it was, it would fail). In other words, this is a super-safe way of starting a timer for debugging purposes.

One reason one might take this approach is that older versions of IE do not define the console object unless you're debugging. That will create invisible runtime errors in your script, and that's bad.

Another approach to this problem (the one I prefer) is to stub the objects and functions you intend to use. The problem with the approach you asked about in your question is that EVERY time you call console.log() or any of the console timer functions, you'll have to do the same thing. Wordy and inefficient! Not DRY! With stubbing, you only have to do it once, and then you can use the objects and methods without worrying about them not existing. For example:

// stub the console object & desired functions if necessary
window.console || window.console = {};
window.console.log || window.console.log = function(){};
window.console.time || window.console.time = function(){};
window.console.timeEnd || window.console.timeEnd = function(){};

// now we can use our functions without worrying about them not
// being implemented
console.log( 'hello!' );
console.time( 'myTimer' );
console.log( 'hello again!' );
console.timeEnd( 'myTimer' );

Answer 2

The first two expressions are checking to make sure that A. the console object exists and that B. it has a method that can be called. The 3rd expression simply just calls the method and passes in a string such that the user can view this output in the console and see a simple timing result.

The code does look odd, but when you realize that it's simply a technique employed to prevent a JavaScript exception from happening. Not all browsers may have a console object available to work with so in those cases the code will simply do nothing.

This is a defensive style of coding where it's okay if it does not run because the console object is not available to use.

Answer 3

console is a debugging object, used for logging, etc. console.timeEnd() is a timer-end function exposed in some browsers (see console.timeEnd at MDN)

The code above is testing to see if there's a console member at all; if so, does it have a timeEnd() method? If so, call that.

It's roughly equivalent to:

if (window.console)
  if (window.console.timeEnd)
    window.console.timeEnd('Generated In');

Answer 4

It ends the timer named 'Generated In'. window.console checks if the console exists, window.console.timeEnd checks if timeEnd function exists and the final statement is the execution of that function.

The && operator just makes sure that the previous statements have evaluated to true. JavaScript will stop evaluating as soon as one of them is not true, because in that case the whole thing cannot become true any more.

Answer 5

The interesting thing here is the && operator. It says "if the left hand is false, return that value; if it's true, execute the right hand side and return that value". The crucial thing is that, if the left hand side is false, the right hand side is not executed. This is called short-circuiting and can be used for a short-hand conditional.

In this case, your code:

window.console && window.console.timeEnd && console.timeEnd('Generated In');

is equivalent to this:

if (window.console) {
    if (window.console.timeEnd) {
        console.timeEnd('Generated In');
    }
}

So it's a test to see if the window.console and window.console.timeEnd properties exist before you try to call the function and potentially get a ReferenceError.

Answer 6

Here's what's happening.. basically. If window.console exists, and window.console.timeEnd exists, run console.timeEnd('GeneratedIn');

What you're seeing with the && is a way that I've only seen in javascript of calling a function only if its perquisites exist. So, if window.console.timeEnd doesn't exist, the statement ends there, rather than going on to the function which would then error out.

Here's a very similar question: How && works in JavaScript if isn't in a control statement?

Answer 7

It stops the timer if such timer was previously started. window.console && window.console.timeEnd are checks to make sure that window.console and window.console.timeEnd objects exist as not all browsers support it.

You can read more around timers here https://developer.mozilla.org/en-US/docs/Web/API/console.time?redirectlocale=en-US&redirectslug=DOM%2Fconsole.time and as you can see window.console.timeEnd is not supported in IE so that's why those checks are in place.

Answer 8

window.console is implemented by various browsers. I don't think you can count on it existing which is why this expression checks for its existence before calling its methods.

Have a look at chrome's documentation for all the specifics of one implementation: https://developers.google.com/chrome-developer-tools/docs/console