console.table()

As I spend more time with the JavaScript language, or with a framework like React, I log out data to the console. I rarely use debugger to solve errors, as I find it more useful to see what I data is being processed. A useful tool I just learned is console.table().

This works very similar to console.log(), but console.table(data) returns the data as a table. The argument for the table must be an array or an object. The function will log each element of the array, or property of the object, as a different row of the table. The first column of the table will automatically be the index. If data is an array, then its values will be the array indices. If data is an object, then its values will be the property names.

This is especially useful when returning an array of many objects, with different properties. If given the following array of beers, using console.log(), represents the data like so.

const beers = [
{
id: 1,
brewery: 'Peak Organic',
name: 'IPA',
style: 'IPA',
month: 'January'
},
{
id: 2,
brewery: 'Troegs Independent Brewing',
name: 'The Mad Elf',
style: 'Ale',
month: 'January'
},
{
id: 3,
brewery: 'Full Sail Brewing',
name: 'IPA',
style: 'IPA',
month: 'January'
},
{
id: 4,
brewery: 'Left Hand Brewing Co.',
name: 'Wake Up Dead',
style: 'Stout',
month: 'January'
},
{
id: 5,
brewery: 'Gun Hill Brewing Co.',
name: 'Void of Light',
style: 'Stout',
month: 'January',
}
]
console.log(beers)
(5) [Object, Object, Object, Object, Object]
0: Object
1: Object
2: Object
3: Object
4: Object
length: 5
__proto__: Array(0)

One can see the different properties of each object, but the tree view can be difficult to visualize. Using console.table() with the same data creates the following table.

Output of console.table()

This works best with objects that have similar keys, because more properties keys would create more columns within the table.