No doubt console.log() is a super useful, quick, and simple debug method. Many of us probably use console.log() to debug our javascript code and there is nothing wrong with this. Many developers use this to debug their code. But today I am going to share a tip that helps you debug your javascript code more efficiently.
So, what is console.table()🤯❓
console.table() allows you to print out arrays and objects to the console in tabular form. The tabular representation of data works like a charm which means you will get greater insight into your data and you can just debug your code faster. You can also sort columns quickly.
Syntax🤓
console.table(data,columns);
//or
console.table(data);
• data:- The data to fill the table with. It must be either an array or an object.
• columns:- array containing the names of the columns to be included in the table.
How to implement console.table()🤔❓
console.table can be implemented in the following ways:
a.) Array
If the value of data argument is an array then the index column will be incremented by one, with the starting value being 0.
var fruits=["apple","mango","grapes"];
console.table(fruits);
Output🤩:-
If you want to sort the column click on the header of that column.
b.) Array of arrays
When we print an array of arrays then the column names will be incremented in the same way as the index column values.
var teams=[["John","Jari"],["Claus","Andrew"],["Marti","Martha"]];
console.table(teams);
Output🤩:-
c.) Object
If the value of the data argument is an object then the index column represents the keys and the value column represents the value corresponding to that particular key.
var user={
name:"neha",
age:20,
gender:"female",
}
console.table(user);
Output🤩:-
d.) Array of Objects
If the value of the data argument is an array of objects then their properties are enumerated in the row, one per column.
var users = [
{
name: "john",
age: 40
},
{
name: "amit",
age: 35
},
{
name: "neha",
age: 20
}
];
console.table(users);
Output🤩:-
e.) Nested Objects
If the value of the data argument is nested objects i.e an object whose properties are themselves objects. In this case, the console.table() method labels the index appropriately with the nested object properties.
var employees = {
leader: {
firstname: "Andrew",
lastname: "Story",
email: "andrew@gmail.com"
},
manager: {
firstname: "Amit",
lastname: "Bhatt",
email: "amit@gmail.com"
},
developer: {
firstname: "Param",
lastname: "Dutta",
email: "param@gmail.com"
}
}
console.table(employees);
Output🤩:-
What if you have an Object that has 10+ properties😳🤯?
Obviously, if you have a very large object with lots of properties, this table can become very large and the data can be difficult to read.
But luckily, console.table allows us to pass an optional second argument that will specify the columns we want and only print those out.
Let's look at an example to get the exact idea:-
var employees = {
leader: {
id:"10001",
firstname: "Andrew",
lastname: "Story",
email: "andrew@gmail.com"
},
manager: {
id:"10002",
firstname: "Amit",
lastname: "Bhatt",
email: "amit@gmail.com"
},
developer: {
id:"10003",
firstname: "Param",
lastname: "Dutta",
email: "param@gmail.com"
}
}
console.table(employees,["id","firstname"]);
Output🤩
If you require only one column, this could be done like this:
console.table(employees,"id");
Output🤩
That's all for this blog post. If you enjoyed learning and find it useful please do like and share so that, it reaches others as well 🤝
Thanks for reading 😃
I would ❤ to connect with you at Twitter | LinkedIn | GitHub
You should definitely check out my other Blogs:
- The Curated List of Ultimate Java Resources 🧵
- Top 10 Useful GitHub Repos for Self-Development
- How to SetUp Billing Alarm in AWS
- Amazon Web Services- An Overview
- Cloud Computing- An Overview
- Random Quote Generator Using HTML, CSS, and JavaScript
- Digital Clock using JavaScript
- Introduction to JavaScript: Basics
- Playing with JavaScript Objects
- 7 JavaScript Data Structures you must know
- Digital Clock using JavaScript
See you in my next Blog article, Take care!!
Happy Learning😃😃
!important;width: 217px !important;" >
Top comments (1)
can you help me ??