CodeBee logo

JS: Console output objects and arrays, the pretty way.

Author: Rando Hinn


Here's something that I personally learned a couple of weeks ago, and even many full-time front end devs do not know- there's a better way to outputting arrays and objects in the browser console, than console.log. And it comes natively in most modern browsers.

What is it?

It's console.table! A commonly not known feature of the browser console. MDN says so:

Displays tabular data as a table.

What's this tabular data? Arrays or Objects, of course!

Due to being not very much used, many front end developers are finding it currently from Wes Bos' ES6 For Everyone course, even though it has no relation to ES6.


Alright, say we have an array of objects and want to output it to the console. We'll do it both ways and compare the results to see what's easier to work with. I'll keep it ES5, for the sake of wider understanding

var awesomeArray = [
        firstName: "John",
        lastName: "Doe"
        firstName: "Jane",
        lastName: "Doe"

// How we've always done it

// The new cool way

Here's what console.log results in - buck standard Object notation.


And here's what console.table gives. Look how much nicer that is


As far as the internet suggests, it should be able to do plain string arrays, and plain objects aswell, I had no luck. If you do, please post in the comments!