What is the proper way to detect the presence of window.console?

Question

I have this bit of code:

            var has_logger = (window.console && window.console.log);
            if (has_logger) {
                window.console.log(data);
            }

has_logger, instead of being a boolean value, is actually initialised to a function object ( function log() { [native code] } )

My questions:

• There is no need to test for the console.log in modern browsers, correct?

• What is the proper way to initialize has_logger to a boolean value instead of a function object?

Answer 1

If Firebug is not enabled, Firefox will throw an error if you don't check.

var has_logger = !!(window.console && window.console.log);

will always be Boolean.

Answer 2

Yes, that's a perfectly fine way to test, and yes you do have to test. Note that your has_logger variable actually ends up with a reference to the function, so you could turn it into a boolean using the double-bang as Amadan said.

Beware of IE9's odd behavior around console.log, though.

If you want your code to work in other JavaScript environments than browsers, though, you might use this:

has_logger = typeof console === "object" && console.log;

You can safely test the type of a free reference even if it's not defined. That will work in browsers (where you have window) and other environments (where you don't).

Answer 3

Often times when the console.log functionality doesn't exist in other browsers I still want to output the results somewhere. Instead of having an if statement each time I want to write to the log I've created the following bit of javascript that adds a console.log method to the window object when it doesn't already exist. This means wherever in my code I want to use console.log I can do so without worrying about it breaking in other browsers.

(function () {
        if (typeof window.console !== "object")
            window.console = {
                log: function (message) {
                    // Write the message somewhere in browsers that don't support console.log
                }
            };
    } ());

Since I use jQuery I use the following to write each message to a div.

$(function () {

    (function () {
        if (typeof window.console !== "object")
            window.console = {
                log: function (message) {
                    $('<div>' + message + '</div>').appendTo('#consoleArea');
                }
            };
        } ());
});

Answer 4

Firefox 3.6 and earlier does not have a window.console. I don't know that you'd count that as modern.

For your second question, the && operator in JavaScript doesn't return a boolean value; it returns either its left-hand-side expression (if it's falsy) or its right-hand-side expression (if the left-hand-side is not falsy). If you really do want a boolean for some reason, use !!(whatever-value).

Answer 5

All will give you a bool:

var has_logger = (window.console && window.console.log) ? true : false;
var has_logger = new Boolean(window.console && window.console.log);
var has_logger = !!(window.console && window.console.log);

Answer 6

Here's what I've come up with lately in an attempt to be really fully bulletproof... I hope you folks will let me know if I've missed something. It seems to guard against reference errors and be false unless log is a function. If someone's attached some other function to window.console.log that throws an error there's just nothing one can do about that.

var hasLog = !!("console" in window && 
                window.console && 
                "log" in window.console && 
                window.console.log && 
                typeof window.console.log == 'function')

I came up with this after reading https://stackoverflow.com/a/3390426/1172174