There's More to the JavaScript Console
Tags: javascript
Published: 2020-03-09 15:05:28

---
title: There's More to the JavaScript Console
published: true
date: 2020-03-09 06:00:00 UTC
tags: javascript
canonical_url: https://www.prestonlamb.com/blog/theres-more-to-the-javascript-console
---

## [tldr;](#tldr)

We’ve probably all used console.log in our JavaScript projects. It’s a nice, quick, convenient way to view the value of a variable or to see what’s going on at a given time in the application. But there are many more options with the JavaScript console object that can help while working on your project. We’ll go over some of my favorites in this article, and hopefully you’ll remember to use them while working!

Note that the examples here are for JavaScript running in the browser. Much of this is similar for JavaScript running in Node.js, but the behavior might be slightly different in Node.js.

## [`console.log`](#console-log)

Let’s review what console.log does before jumping into the other options. `console.log` prints a message to the console. You can enter in an object, an array, an array of objects, a string, a boolean. Basically whatever you’d like to print to the console. Here’s an example of using `console.log` and its output:

```js
console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };
```

This has got to be the most used debugging method in JavaScript, and the most used console method. So let’s now go talk about some other options!

## [`console.info`](#console-info)

`console.info` is almost identical to `console.log`. It prints an informational message to the console. As far as I can tell, there’s no real difference between `log` and `info`, except perhaps how you classify the messages. But if you choose to hide the “info” level messages from the browser console, both `log` and `info` messages are hidden. To use `console.info`:

```js
console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };
```

Again, it’s almost exactly the same output.

## [`console.warn`](#console-warn)

`console.warn` prints a warning message to the console. Essentially it’s the same thing as the preceding functions, but the message has a yellow background in the console and a warning icon (at least in the Chrome dev tools). Use `console.warn` when something is being done that could potentially cause a bug in your application, but that doesn’t currently cause any issues. It allows you, your users, or other developers know that there is a potential for an issue to occur there.

```js
console.warn({ restaurantName: 'Pizza Planet' }); // ⚠️ { restaurantName: 'Pizza Planet' };
```

Like the preceding options, the same values can be passed to warn to be printed to the console.

## [`console.error`](#console-error)

`console.error` prints an error message to the console. Essentially it’s the same thing as the preceding functions, but the message has a red background in the console and a red circle with a white x error icon (at least in the Chrome dev tools). Use `console.error` when something goes wrong in your application. It provides an easy way for other developers to track down the cause of the issue and to fix it. It will provide a stacktrace of the error for you to go look for the error as well.

```js
console.error({ restaurantName: 'Pizza Planet' }); // ❌ { restaurantName: 'Pizza Planet' };
```

Like the preceding options, the same values can be passed to error to be printed to the console.

## [`console.table`](#console-table)

Now this is one of my favorite console options, although I forget about it frequently. `console.table` takes some data that could be placed in tabular form and outputs it. Let’s look at a couple examples. We’ll first start with `console.table` on an object:

```js
console.table({ restaurantName: 'Pizza Planet', streetAddress: '123 Maple' });
```

The output will look similar to this, but in the dev tools:

| (index) | Value |
| --- | --- |
| restaurantName | Pizza Planet |
| streetAddress | 123 Maple |

It takes each attribute name for the object and puts it in the `index` column, and the value of the attribute in the `Value` column. This happens on each attribute in the array. So what happens if we output an array of objects? The result will look like this:

| (index) | restaurantName | streetAddress |
| --- | --- | --- |
| 0 | Pizza Planet | 123 Maple |
| 1 | Pizza Palace | 123 Elm |

I find myself normally reaching for `console.log` because I’m used to it but I think many times `console.table` would work better and output the object(s) for me in a nice, clean, readable way.

## [`console.assert`](#console-assert)

`console.assert` is a way to print a message to the console if a condition that you determine is not met. The function takes two arguments: the expression to be evaluated and the error message that should be displayed. Here’s an example:

```js
const obj = { restaurantName: 'Pizza Planet' };
console.assert(obj.restaurantName === 'Pizza Palace', 'The name of the restaurant is not "Pizza Palace"');
// ❌ Assertion Failed; 'The name of the restaurant is not "Pizza Palace"'
```

This could be another really good way to debug applications. The message will only show if your assertion fails, so you could assume that the expression is evaluating correctly if no message shows.

## [`console.group` and `console.groupEnd`](#console-group)

`console.group` and `console.groupEnd` are ways that you can group logically many console.logs together. You can then collapse the group to hide it when needed. It’s pretty easy to use:

```js
console.group();
console.log({ restaurantName: 'Pizza Palace' });
console.groupEnd();
```

The group could then be collapsed as a whole. If you’ll be logging a lot of things to the console, this might be really useful.

## [Conclusion](#conclusion)

There are a whole lot of methods to use on the `console` object in JavaScript. They can help us in our development so that we can filter messages based on type, view the item or items in a table, or group things together and/or collapsing them so that they’re hidden when needed. It’ll take some getting used to using these methods if you’re anything like me, but it will improve your workflow when working on JavaScript articles.