Day 01: Learning JavaScript APIs: Console API

JavaScript has a ton of built-in APIs that make programming fun and interesting. But let’s be real how many of them do you actually use to their full potential? Over the next 30 days, we’re diving into these APIs, covering what they are and the cool things you might’ve missed. From the basics to more advanced stuff, you’ll pick up new tricks along the way.

Feeling overwhelmed by JavaScript APIs? Or maybe you’re just here to learn something new? Either way, this series is for you.

Today, we’re starting with an API that’s been quietly helping you debug all along: the Console API. Sure, you’ve used console.log() before, but there’s so much more it can do. Let’s uncover some of its hidden tricks!

What is the Console API?

The Console API is a collection of super useful methods that make debugging, logging, and visualizing your data easier.

But let’s face it—you’ve probably been stuck on using console.log() for everything. It’s time to break out of that habit because there’s so much more this API can do.

Here are some cool things you’ve been missing out on:

Cool Things You Can Do with the Console API

1. Display Data in Tables

Ever felt like your logs are just a mess of text you can’t make sense of? console.table() has got your back.

Here’s what your logs probably look like right now:

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

Result:

Now let’s clean that up:

console.table(fruits);

Result:

Much better, right? It’s easier to read, and now your data actually makes sense at a glance.

2. Stop Writing Redundant If Statements with console.assert()

Raise your hand if you’ve written a dozen if statements just to log errors. Well, stop doing that! console.assert() is here to save the day.

Instead of this:

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

Try this:

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

If the condition is false, the message will be logged. So simple, right?

3. Measure Code Performance

Curious about how long a block of code takes to execute? Say hello to console.time() and console.timeEnd().

Here’s how you can measure performance:

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

Result:

Now you can figure out what’s slowing down your app!

4. Count How Many Times a Block Runs

Ever wondered how often a piece of code gets executed? Keeping track manually can be tricky, especially as your code grows more complex. That’s where console.count() comes in handy.

Imagine this scenario:

function greetUser(name) {
  if (name.startsWith("A")) {
    alert(`Hello, ${name}!`);
  }
}

greetUser("Alice");
greetUser("Bob");
greetUser("Alex");
greetUser("Anna");

At first glance, it might be easy to figure out how many times the greeting runs for names starting with "A." But as your logic expands, you might lose track.

Now let’s simplify things with console.count():

function greetUser(name) {
  if (name.startsWith("A")) {
    console.count("Greeting users starting with A");
    alert(`Hello, ${name}!`);
  }
}

greetUser("Alice");
greetUser("Bob");
greetUser("Alex");
greetUser("Anna");

console.countReset("Greeting users starting with A"); // Reset the count

greetUser("Alice");

Here’s What’s Happening:

• Every time a name starting with "A" is greeted, console.count() increments the count and labels it "Greeting users starting with A."
• After the reset with console.countReset(), the count starts fresh.

No more guessing or adding print statements all over your code. Just one line, and you’ve got it covered!

5. Style Your Logs with CSS

Sometimes, you need your logs to pop. Use %c to style your logs with CSS and make them stand out.

Example:

console.log(
  "%cWarning: This feature is deprecated!",
  "color: white; background-color: red; font-size: 16px; padding: 4px; border-radius: 4px;"
);

Result:

Highlight errors, warnings, or just have some fun with your logs.

6. Group Related Logs Together

Tired of scrolling through endless logs? Use console.group() to group related logs together.

Here’s an example:

console.group("User Info");
console.log("Name: John Doe");
console.log("Age: 25");
console.groupEnd();

Output:

▼ User Info  
   Name: John Doe  
   Age: 25  

You can also use console.groupCollapsed() to keep groups collapsed by default.

Wrapping Up

The Console API is a lot more powerful than you think. From tables to performance measurement, counters, styling, and grouping, there’s a tool for almost every debugging scenario.

This is just Day 1 of our 30 Days of JavaScript APIs series. If you found this helpful, bookmark this article for later and be sure to stick around—there’s so much more to learn!

And hey, if you have any questions, feel free to message me on Twitter at @sprucekhalifa. Don’t forget to follow me for more insights and updates. Happy coding!