Quick Tech Tip – How to output an array using Console.table instead of Console.log

Most developers are aware of the JavaScript console.log method to output and print to the console, but what they may not be familiar with is the console.table method. The console.table method will output the same result but in a much more readable and human friendly format.

Let’s take a look at using this in combination with the JavaScript filter method in today’s quick tech tip.

Here’s an array of scientist data with date of birth and date of passing on:

const scientists = [
{ first: ‘Isaac’, last: ‘Newton’, year: 1643, passed: 1727 },
{ first: ‘Galileo’, last: ‘Galilei’, year: 1564, passed: 1642 },
{ first: ‘Marie’, last: ‘Curie’, year: 1867, passed: 1934 },
{ first: ‘Johannes’, last: ‘Kepler’, year: 1571, passed: 1630 },
{ first: ‘Nicolaus’, last: ‘Copernicus’, year: 1473, passed: 1543 },
{ first: ‘Max’, last: ‘Planck’, year: 1858, passed: 1947 },
{ first: ‘Sarah E.’, last: ‘Goode’, year: 1855, passed: 1905 },
{ first: ‘Lise’, last: ‘Meitner’, year: 1878, passed: 1968 },
{ first: ‘Albert’, last: ‘Einstein’, year: 1879, passed: 1955 },
];
Next we can apply the array filter method to the scientists array to show those that were born in the 1600’s as an example:
const scientists_born1600s = scientists.filter(function(scientist){
if (scientist.year>=1600&&scientist.year<1699) {
return true;
}
});
So far so good. Now let’s use the console.log method to output the result to the Google Chrome dev. console with:
console.log(scientists_born1600s);

Here is the filtered output printed to the console using console.log:

JavaScript Array Filter Method - London Website Development

now lets make the output more readable with the human friendly console.table method:

console.table(scientists_born1600s);
Console.table JavaScript method - London Website Design

That concludes today’s quick tech time.