DEV Community

loading...

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

Brad Beggs
Curious and Persistent.
・2 min read

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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) [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)