Aiyush Gupta
Ooshimus.com

Ooshimus.com

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

Subscribe to my newsletter and never miss my upcoming articles

Listen to 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