Console a lot more than just console.log()

I think that everybody knows the standard usage of console.log() But actually, console itself have a lot more useful abilities than just the regular log() function.

So let's dive deeper into console API, I sure you will find it fun and useful

console.log()

So console.log() comes with some additional behavior that may surprise some of you.

Let's start with the well-known ones, you can use console.log() to log an object like this:

const person = {firstName:"john",lastName:"doe",age:24}
console.log(person)

console.log(person)

you can also use it to attach a message (string) to the object in the following way:

console.log("Person Object Details:",person)

Now let’s assume that you want to mark a specific log in order to find him easily, you can do so by attaching to your log the %c operator that tells the browser to get the CSS from the second argument and implement it on the text that comes after that %c

console.log("%c Hi I'm Green ",'color:green')

console.dir()

console.dir() behave nearly the same as console.log(object) the main difference between the two is shown when you try to print a DOM Element

when you run console.log(document) the output will be:

console.log(document)

but when you run console.dir(document) the output will be present in a more objective view

console.assert(condition?,msg)

console.assert() will print a log in cases that the first argument (aka condition?) is equal to false.

you can think of it in the following way :

if(true){
   //do some staff
} else { 
   console.log("Hi")
}

Its become useful in cases that you want to trigger a log when your function get invalid input.

Let's say that your function gets an array of number that represents student grades, and you want to print something to the console when one of the grade is negative.

you can do the following:

console.assert(grades[i]>=0,"the grade in index number:" + i + " is negtive")

in case that grades[i] is positive or zero nothing will be print to the console, the log will be print only if the grade is negative aka ‘grades[i]>=0’ is equal to false.

console.time(label)

console.time() is a function that let us measure the executions time of javascript action

const iterNumber = 10000
console.time("With New")
for(let i=0;i<iterNumber;i++){
 a = new String('aaaaa')
}
console.timeEnd("With New")
console.time("Without new")
for(let i=0;i<iterNumber;i++){
 b = 'aaaaa'
}
console.timeEnd("Without new")

the output will be:

With New: 1.903076171875ms
Without new: 0.233154296875ms

Now, let’s say that we want to get the time till some point in our code execute but do it without stopping the timmer, we can do it by using console.timeLog(label)

let see how its work:

const iterNumber = 10000
console.time("With New")
for(let i=0;i<iterNumber;i++){
  if(i ==  iterNumber/2){
     console.timeLog("With New",'middle of the loop')
  }
 a = new String('aaaaa')
}
console.timeEnd("With New")

the output will be:

With New: 0.455810546875ms middle of the loop
With New: 1.046875ms

console.count()

console.count() is basically a counter that logs the number of times that this particular call to console.count() has been called.

this function comes with an optional argument label

let's see a usage example :

function useAlot() {
 console.count("useAlot Numbe Of calls")
}
for(let i =0;i<5;i++){
 useAlot();
}

the output will be:

useAlot Numbe Of calls: 1
useAlot Numbe Of calls: 2
useAlot Numbe Of calls: 3
useAlot Numbe Of calls: 4
useAlot Numbe Of calls: 5

I found it useful when I want to make sure that my React.render() method hasn't been called more times then it should

console.trace()

console.trace() will log the stack trace to a specific point, it's become handy when you want to track the flow that leads to a specific function trigger.

let's see an example:

function boo() {
 console.trace()
}
function moo(){
  boo();
}
moo()

the logs will be:

boo
moo
(anonymous)

console.table(data)

I think 🤔 that console.table() function is the most useful one, the purpose of this function is do display the data in Tabular form unlike the famous conosle.log() that just dump the data.

let's see the difference between the two first, let’s define an array of objects

const  persons = [
  {name:"alex",gender:"female",age:23,country:"usa"},
  {name:"jon",gender:"male",age:34,country:"france"},
  {name:"amir",gender:"male",age:30,country:"israel"},
  {name:"noha",gender:"female",age:23,country:"usa"}
]

If we will use the old and famous console.log(persons) we will get:

console.log(persons) output

FYI we can click on the arrow sign in order to see a more extended view of the array.

let's see what the output will be when we use console.table(persons):

Now you can see more clearly the structure of the object that you log.

In addition, you can sort the table by any column just by clicking on the column header, for example, clicking on the age header will sort the table by age (see the example output below).

sort by age

you can also send an array of columns as a second argument to the console.table() function in order to log only the desirable columns

console.table(persons,["name","age"])

filter table

summary

we saw that console API have some less-known ability that can be helpful in particular cases, we can use console.count() to counts the number of calls to a specific function, we can use console.assert() to print logs under condition, console.table() to see the data in a tabular way any many more…

FYI

in this article, I walked throw the ones that I think are more useful, but console API has more ability (warn(), info(), group () and more...)