The Power of Console.log()

Debugging is an essential skill for every developer, new or experienced, and JavaScript provides a powerful tool for this purpose: the console.log function. Let’s first touch on what console.log actually is. As its name implies, console.log is a built-in JavaScript function that allows you to log information to the console. The console is a developer tool available in most web browsers, which provides a space for outputting messages, errors, and other useful information during runtime. By logging relevant data using console.log, you can inspect and understand what's happening in your code at different points of execution.

For example, let’s say you had some data stored in variables:

const name = “Homer”
const age = 39
const address = “742 Evergreen Terrace”

If we wanted to see what information our variables held we could console.log them:

console.log(name)
// Would output Homer to the console.

console.log(age)
// Would output 39 to the console.

console.log(address)
// Would output 742 Evergreen Terrace to the console.

This can be very powerful, especially when our code starts getting more complex and variables are being passed around and operated on. When I first started learning JavaScript I found myself utilizing the console.log very sparingly, only really using it when my code was broken and I needed to track down the issue. This would often lead to a frustrating debugging process, especially if I had written a lot of new code since realizing there was an issue. A major breakthrough for me came when I began using console.log more in the process of writing my code rather than waiting until something broke. For example, let’s say I wanted to write a function to handle the clicking of a like button. First I would check to make sure I attached my event listener to the correct button:

function handleLikeButton () {
    console.log(“Like button was clicked!’);
}

If I click the like button and the message “Like button was clicked!” is logged to the console, I know that I attached my event listener to the correct button and it is firing off my handleLikeButton function as intended. Great! Now I can start building the function out. First I will need to grab the DOM element where my likes are displayed:

function handleLikeButton () {
    const likeElement = document.getElementByID(“likes”);
}

Did I grab the correct element? Let’s console.log it and find out!

function handleLikeButton () {
    const likeElement = document.getElementByID(“likes”);
    console.log(likeElement);
}

If the correct DOM node now shows up in the console when the button is clicked I know I’m on the right track! Now I have to increment the variable I’m storing my like count in. For the sake of this example, we’ll call it likeCount:

function handleLikeButton () {
    const likeElement = document.getElementByID(“likes”);
    likeCount++;
}

Did that actually increment my likeCount by 1? Was my syntax correct? I know how to find out!

function handleLikeButton () {
    const likeElement = document.getElementByID(“likes”);
    likeCount++;
    console.log(likeCount);
}

Now when I click my like button a few times I should see the number incrementing in my console with each click. If not, I know that my syntax may be wrong or perhaps I tried incrementing the wrong variable. Either way, I know that there is an issue here before I try moving on to the next step! If my console is increasing the likeCount as expected, I know that I’m now good to proceed and set the inner text of my likeElement to our updated variable:

function handleLikeButton () {
    const likeElement = document.getElementByID(“likes”);
    likeCount++;
    likeElement.innerText = likeCount
}

Whether you’re building out a function, fetching data from an API, or trying to access certain elements of an array or object, console.log can help you along the way! It’s a great way of keeping track of your data and finding potential issues before they are buried in a pile of code and harder to root out. Wield the power of console.log() to debug as you write your code and save yourself from some potential future headaches. I know I will!