Log an array to the Console

Instead of using the `console.log` function, `console.table` produces a better output. It works pretty well with an array or object.

const resources = [
    {
        name: '1 LOC',
        description: 'Favorite JavaScript utilities in single line of code',
        link: 'https://1loc.dev',
    },
    {
        name: 'CSS Layout',
        description: 'A collection of popular layouts and patterns made with CSS',
        link: 'https://csslayout.io',
    },
    {
        name: 'HTML DOM',
        description: 'How to manage HTML DOM with vanilla JavaScript',
        link: 'https://htmldom.dev',
    },
    {
        name: 'Responsive Design Patterns',
        description: 'A collection of patterns to create a responsive web page',
        link: 'https://responsive.page',
    },
    {
        name: 'Front-end Tips',
        description: 'Super tiny, quick tips, tricks and best practices of front-end development',
        link: 'https://getfrontend.tips',
    },
    {
        name: 'this VS that',
        description: 'The differences between ___ and ___ in the front-end development',
        link: 'https://thisthat.dev',
    },
];

console.table(resources);

Here is the screenshot compares the output of two methods above:

If you don't want to see all the columns, then you can indicate the columns explicitly:

// Show `name` and `link` properties
console.table(resources, ['name', 'link']);

This tip also has effect when you want to pick some particular properties from a JSON representation.

Log an array to the Console

See also