Enter The Console Object

When coding in JavaScript, one of the most common ways used to display error and system messages is the alert() function.

For example:

alert("This is an error!");

However, this has numerous drawbacks, which I am about to highlight below.

Pausing execution

The alert() function pauses execution until the OK button is clicked. Take this code...

for (var i=0; i<100; i++)
{
    if (!someFunction(i))
    {
        alert("This is an error!");
    }
}

This basically runs the function someFunction(), passing in i as an argument. But if someFunction() returned an error all 100 times, that would mean you have to click 100 times in order to resume running the script! This is only an advantage if, for some reason, you want to check changes to the DOM every time there is an error. Execution will pause because of the alert() function, and you can check to your heart's content. However, the chances of you ever encountering such a case are exceedingly low.

Public-ness

The popup box from the alert() function is very visible and nigh impossible to ignore. (How the heck does one ignore a popup box that won't allow you to continue until you click the OK button?) Which is all right if the user is supposed to see that message.

Not so good if you're printing out test code that is better hidden.

So if you were printing test code messages to the screen, you'd have to disable those in Production and only enable them in Development. Not that hard to do, but still...

Display format

Also, alert() only displays simple strings, and doesn't handle anything else very well. If, for example, you did this...

var someObj = {"name":"Test", "desc":"This is a test object"};
alert(someObj);

You would get this. How is this helpful?

Enter the console object!

The console object uses methods such as log(), error() and warn() to display messages. Unlike the alert() function, these methods do not halt execution and the messages are hidden from the user. You may view them in the browser console.

Some information on the console object. (https://developer.mozilla.org/en/docs/Web/API/console)

Try this.

console.log("This is an error!");

View your console.

Now try it with an object!

var someObj = {"name":"Test", "desc":"This is a test object"};
console.log(someObj);

As you can see, the console object's log() method actually displays details about someObj!

You can even do this...

var someObj = {"name":"Test", "desc":"This is a test object"};
console.log("This is an error!", someObj);

Another nice thing is that warn() and error() methods display the messages in different tabs or formats.

console.warn("This is an error!");
console.error("This is an error!");

All in all...

The alert() function is useful if you need the message to be visible and halt execution until it's acknowledged. Otherwise, better to go for the console object.

Even in cases where the message is supposed to be public, the popup box is kind of ugly and for aesthetic purposes, you might want to consider a plugin of some sort.

And no, using this object does not make you a console programmer!
T___T