log-an-array-to-the-console.mdx

category	created	tags	title
Tip	2021-02-27	JavaScript	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://phuoc.ng/collection/1-loc',
    },
    {
        name: 'CSS Layout',
        description: 'A collection of popular layouts and patterns made with CSS',
        link: 'https://phuoc.ng/collection/css-layout',
    },
    {
        name: 'HTML DOM',
        description: 'How to manage HTML DOM with vanilla JavaScript',
        link: 'https://phuoc.ng/collection/html-dom',
    },
    {
        name: 'Front-end Tips',
        description: 'Super tiny, quick tips, tricks and best practices of front-end development',
        link: 'https://phuoc.ng/collection/tips',
    },
    {
        name: 'this VS that',
        description: 'The differences between ___ and ___ in the front-end development',
        link: 'https://phuoc.ng/collection/this-vs-that',
    },
];

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.

See also

• Conditional logging in the Console
• Count how many times a function has been called
• Log a value to the Console
• Log a variable in an arrow function
• Log a variable to the console using conditional breakpoints