Learn how to use console.table to render arrays and objects in a tabular format for easy scanning over the values. We'll create some mock data and then render it to the log in various ways to explore console.table's API.
[00:00] My favorite one of the console utility logging methods is the one that I actually didn't know about, until I started doing research to prepare for this course, and that is cosole.table. It works like this. Let's create a bunch of mock data first.
[00:15] We're going to say function character, and it gets a name and a power. Then let's create a couple characters. Let's save VarBuffy equals new character. Her name is Buffy. Her power is that she's the slayer. VarWillow is a new character. Her name is Willow. Her power is that she's a witch. VarSpike is a new character, his name is Spike, and he's a vampire.
[00:50] If we wanted to create a list of these characters, we could say VarChars equals Buffy, Willow, Spike. What if we wanted to log this out? We know that console.log takes any type of argument we want to throw at it, so we can do that, and we can see that we've got an array of three characters. We can open that up, we can open that up, and we can see there's that character, there's that character, there's that character.
[01:19] That's great, but it's kind of a pain in the butt to have to step through and drill that down that deeply into what really is a pretty simple data set. Instead of using console.log, we can use console.table, and that's going to give us this beautifully rendered view that shows us every item in our array, with its index. Because it's an array, we get 01, and 2, and then, with all the properties of the objects in the array.
[01:46] We can take this a bit further though. Well, not with arrays, we can't. But, if we wanted to change characters, so that instead of being just an array, we wanted to make it an object. Let's do VarChars by Name. We can say Buffy is Buffy, Willow is Willow, and Spike is Spike. We can log out chars by Name, using console.table.
[02:25] You can see, when you've got an object well-defined fields here, that the index, instead of being 01, 2, like it is in an array, instead becomes the name for that item in that array. And, when you're logging out using console.table and object, you can specify a second argument here, which is the list of columns you'd want to show.
[02:48] If I say only Power, then I get the index -- because you always get the index -- and I get the Power, and it removed the name. If I wanted to add Name here, then we go back to our original view. And, if I wanted to pass in an empty array, that's going to take out all of the fields, except for the index.
Very nice course; It looks like console.table is probably built using console.log("%csomething", magic css here); It would be wonderful to get a breakdown of how that's written, or if magic can be made to happen via the console.log css stuff, a demonstration would be cool.
Another quick tip: i use a wrapper function log() which JSON.stringifies the output so it gives a prettyfied version that shows the structure at first glance
This was a really nice mini course
Love it. I can't believe I didn't know this was a thing.
Great course. I was really hoping, though, for a video on 'console.dir', which is sometimes handy for dissecting thrown Errors. I wonder what else it can be used for.
Very useful way to show data. I think it's important to remember that this method is not yet standard and not available in all major browsers. Use Chrome to enjoy it.
Thank you for useful lessons at all. Any plans to talk about strategies to manage console in production environment?
Thanks for the course! :)
Really nice course. I enjoyed all the simple to understand examples.
This whole course was dope!
I love quick courses like this one!
Wow. love the console.table!!!