Easy Way to console.log() w/o console.log()

Whether you’re hunting for a bug or writing code, you likely use Javascript’s ‘console.log()’. It works but console has 19 other methods to assist your development and debugging.

Most notably is console.table() when working with objects and arrays, which provides a prettier format for these data types.

console.table() - for arrays, objects, and mixed data types

Output an Array and Array of Arrays

‘console.table’ provides the index on the left and indexed values or just ‘value’ across the top for array or array of arrays.

A 1d array with .table() vs .log():

const namesStartingWithA = ["Alec", "Alexis", "Anastasia", "Andre", "Andrea", "Andrew", "Andrew"]

> console.table(namesStartingWithA)
> 
Index    Value 
0   "Alec"
1   "Alexis"
2   "Anastasia"
3   "Andre"
4   "Andrea"
5   "Andrew"
6   "Andrew"

> console.log(namesStartingWithA)  // same data as above looks like this
> (7) ["Alec", "Alexis", "Anastasia", "Andre", "Andrea", "Andrew", "Andrew"]

A 2d array with .table() vs .log():

const namesStartingWithA = [ ["Alec", "Alexis",], ["Anastasia", "Andre", "Andrea"], "Andrew", "Andrew"]

> console.table(namesStartingWithA)
> 
Index    0           1          2        Value
0   "Alec"       "Alexis"       
1   "Anastasia"  "Andre"    "Andrea"    
2                                       "Andrew"
3                                       "Andrew"

> console.log(namesStartingWithA)
>(4) [Array(2), Array(3), "Andrew", "Andrew"]

Output of Objects and Arrays of Objects

When outputting an array of objects, the keys become headers. If the data has many values or many keys, avoid using ‘console.table()’.

> console.table(namesStartingWithAWithId)
> 
Index   Name            ID
0   "Alec"      8
1   "Alexis"    69
2   "Anastasia" 815
3   "Andre" 68
4   "Andrea"    062
5   "Andrew"    97
6   "Andrew"    772

> console.log(namesStartingWithAWithId)
> (86) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Show Selected Columns Only

It is possible to select just the column(s) you want to see.

For example: ‘console.table(data, [‘columnName’])’ You do need the brackets and single quote. [‘ ‘].

> console.table(namesStartingWithAWithId, [“id”]) 

> 
Index      ID
0     8
1     69
2     815
3     68
4     062
5     97
6     772

Not Recommended On Complex or Long Data

Because ‘console.table()’ is highly visual, long arrays or complex objects are likely harder to understand in this table format unless you specify the column(s).

Other Useful console.table Tidbits

• In Firefox, console.table() displays only 1000 rows.
• Click a header column name and the browser sorts the table based on the column data (ASC and DSC).

Reference

MDN console.table