The Console

The console is a vital tool that every JavaScript developer should keep in their tool-belt for their day to day work. It allows us to peer into the state of our code and helps us debug. Here are few handy console commands you should use in your code.

console.log()

The first console command I should introduce you to is the console log command. This versatile command allows us to 'log' messages to the console, as well as examine the value that is stored in a variable. Here's a few examples of how to use console.log

var message = 'Hello from the console!'
console.log(message); // logs ==> Hello from the console!

var value = 9;
console.log(value); // logs ==> 9

We can also log multiple values at the same time by passing their variable names into the parenthesis separated with commas.

var string1 = 'Hello';
var string2 = 'World';
console.log(string1, string2); // logs ==> Hello World

console.table()

Another very useful console command is "console.table()". This command is great when working with an array of objects. It logs a table to the console that describes what key and value each object has and where it is in the array. This tool is not only helpful when navigating an array of objects, but also when building them, as it allows the user to easily discern if you have reached your desired outputs. Below is an example of how we can invoke the console.table() command and an explanation of how to interpret the tables contents.

let arrayOfObjects = [{a: 10}, {b: 20}, {c: 30}]
console.table(arrayOfObjects);
// logs ==>
┌─────────┬────┬────┬────┐
│ (index) │ a  │ b  │ c  │
├─────────┼────┼────┼────┤
│    0    │ 10 │    │    │
│    1    │    │ 20 │    │
│    2    │    │    │ 30 │
└─────────┴────┴────┴────┘


var arrayOfObjects2 = [{a: 10, b: 20}, {c: 30, d: 40}, {e: 50, f:60}]
console.table(arrayOfObjects2);
// logs ==> 
┌─────────┬────┬────┬────┬────┬────┬────┐
│ (index) │ a  │ b  │ c  │ d  │ e  │ f  │
├─────────┼────┼────┼────┼────┼────┼────┤
│    0    │ 10 │ 20 │    │    │    │    │
│    1    │    │    │ 30 │ 40 │    │    │
│    2    │    │    │    │    │ 50 │ 60 │
└─────────┴────┴────┴────┴────┴────┴────┘


var arrayOfObjects3 = [{a: 10}, {a: 20}, {a: 30}]
console.table(arrayOfObjects3);
//logs ==>
┌─────────┬────┐
│ (index) │ a  │
├─────────┼────┤
│    0    │ 10 │
│    1    │ 20 │
│    2    │ 30 │
└─────────┴────┘

The row across the top of the table represents the keys that are present in each object. Bellow each key, in the keys corresponding column, is the value at that key. To find the index at which the object exists in the array, find the key that exists in the desired object, follow the keys column down to its value, and then follow the values row to the left to find the index.

console.clear()

The final command I will discuss in this post is the console clear command. As we create more and more messages and tables, the console can become cluttered and tedious to sift through. To invoke this command, we simply write console.clear(). This command takes no inputs so nothing needs to be written into the parenthesis. When this command is invoked, all contents of the console are removed.

Now You Know!

Now you know a thing or two about the console and how it can make both coding and debugging a bit easier. Go try implementing some of these commands in your code and see what they can do for you. Happy coding!