Beyond the Console Object in JavaScript
There is more to “console.log()” than you thought!
If you are a JavaScript developer, I can guarantee that you have used the console.log() method before. For the non-JavaScript developers out there, console.log() is equivalent to print() or System.out.println(). However, what most JavaScript developers don’t realize is that the log() method is just one of the many properties in the large console object. Before you proceed with this article, open up the Chrome developer tools, run “console.log(console);” (yes, I use semicolons because who doesn’t?), and take a look at the output.
If you ran “console.log(console);” you would have seen the console object along with all of its numerous properties and methods. Let’s take a look at a few of the important ones that can be useful in some scenarios.
Console.assert()
The assert() method in the console object outputs a value if the first argument in the method is false. The assert() method is typically used when throwing errors based on a condition.
As you can see, the first code block outputs an “Assertion failed” error because the first argument in the method was false. It additionally provides the text which was passed in as an argument in the method. The second assert() method call, however, does not output anything due to the fact that the first argument in the method is true.
Console.table()
If you wanted to print out an object in JavaScript, it would be easy to do, and the output would be clean since the keys and values are both shown. However, the output of printing out lists is not displayed as nicely. Hence, you can use console.table() to print out a list in an organized manner, as seen in the example below.
As you can see in the image, the list is displayed in a nice table on the console. You can also visualize the index and the value as they are both in one row.
Console.group()
The console object consists of a group() method, which is used to group multiple console.log() methods to provide a readable output. The groupCollapsed() method provides the same use case as the group() method, however, the only difference is that it collapses the output in the console. Take a look at the example in the image below.
The console.group() and groupCollapsed() both take one string argument, which is the ID of the group. After that point in the code, all console.logs will be grouped until the console.groupEnd() method is called. As demonstrated in the image, the groupCollapsed() method collapses the output until you expand it, while the group() method is already expanded.
Console.count()
The console.count() method allows you to create a simple counter. It takes in one argument, the ID of the counter itself, and every time the console.count() method is called, along with that corresponding ID passed into it, it will increment the counter as shown in the image.
Console.time()
There are many instances in JavaScript where us developers want to see the speed of a particular function or task is taking. Console.time() allows you to measure the time of a certain action, function, etc. The console.time() method takes in one argument, which is once again a unique ID. From there, the time can be logged in the output by calling the console.timeLog() method with the unique ID passed into the method as an argument. Finally, if you want to stop measuring the time of an action, call the console.timeEnd() method with the unique ID passed into it.
Console.log()
As mentioned at the beginning of the article, the console.log() method is the most common method in JavaScript for debugging small tasks and performing other actions. The console.log() method outputs something onto the console. However, to make the output look nicer, there is a feature in the JavaScript programming language where the output text can be styled.
To style your output, first start off with a simple console.log() statement and write out the text that you would like to output. Once that is complete, add a “%c” to precede the output text. Finally, pass in another argument which takes in a string with CSS styling.
To learn more about CSS and CSS basic styling, read more here.
Conclusion
The console is just an object that is built into JavaScript. It provides many functionalities that can be of great use in different scenarios. However, only a few out of the many methods in the console object were discussed in this article. There are many more methods in the huge console object, and to see all of these methods as well as some examples, check out this link. Hopefully at least one of the methods listed in the article comes in handy at some point.
Good luck exploring the console!
