Aiyush Gupta
Ooshimus.com

Follow

Ooshimus.com

Follow
Console.log() - The Right Way โœ…

Console.log() - The Right Way โœ…

An 'Array' of Features You Probably Didn't Know Existed

Aiyush Gupta's photo
Aiyush Gupta
ยทAug 9, 2021ยท

3 min read

Play this article

๐Ÿ‘‹ Hi

In this post we are going to learn the hidden secrets behind the console in JavaScript. Logging messages to the console is an awesome way to diagnose / troubleshoot errors in your code. To enter the javascript console Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) or right-click inspect element then navigate to the console tab. Let's get started...

ConsoleLog.png

Console.log() โœ๏ธ

This is the most simple example of using the console, you can put any type inside of the log() ie. String, Boolean, Array, Object etcโ€ฆ screely-1628498771088.png

Console.log( {x, y, z} )๐Ÿงฎ

I bet that youโ€™ve atleast used console.log(โ€œThe value of x is โ€ + x) at least one time before. Now imagine you had to do this for 3,4 or even 5 values. Your code becomes hard to maintain and read but did you know by using curly braces you can make an association between a logged value and a variable name. You can also do this with single variables with console.log({b})

screely-1628498653038.png

Template Literals ๐Ÿ“„

Although this isnโ€™t a feature strictly reserved for logging template literals allow you to embed expressions, we enclose them with (`) backticks instead of (โ€œdoubleโ€) or (โ€˜singleโ€™) quotes. The expressions are indicated by the dollar sign followed by curly braces${expression}`. ATOW these are still not supported on Internet Explorer.

screely-1628499820171.png

You can also do multiline strings with them without having to use \n, this can improve the readability of your code.

screely-1628499926450.png

Fancy Formatting ๐Ÿ•ด๏ธ

An alternative to using template literals is sprintf() for JS. This is an older method of using variables in JavaScript (pre ES6) so I still recommend using template strings. The table below shows how each object is casted.

SpecifierPurpose
%sConverts to String
%d or %iConverts to Integer
%fConverts to Float
%oOptimally Useful Formatting
%OGeneric JS Object Formatting
%cApplied CSS

screely-1628500248085.png

Even Fancier Formatting ๐Ÿ’ฏ

We can apply styles to logged messages, we can do this by using %c with the CSS style you want to apply.

screely-1628501264207.png

We can even go crazy with some awesome CSS styling, in this example, I stored the CSS in a variable and then console.log("%cOoshimus.com %s", css, 'rocks!');

screely-1628501828573.png

Interactive Logs ๐Ÿ‘ˆ

Depending on the browser the logs are rendered differently whilst Firefox and Chrome allow for more interactive logs, Node outputs the console using texts. Chrome allows you to expand and collapse different logs ie. arrays. In the example, you can see the object properties and prototypes.

screely-1628502109020.png

Here is more on prototypes if you donโ€™t know what they are.

Arrays ๐Ÿš“ ๐ŸŽ๏ธ ๐Ÿš—

We can also use arrays to show an expandable / collapsible list.

screely-1628502245525.png

Closing Up ๐Ÿ‘€

I hope that you learnt something new here, if you have any other cool tricks that you can do in the console please comment down below. Also, please reach out on LinkedIn .

JS

Did you find this article valuable?

Support Aiyush Gupta by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
ย 
Share this