DEV Community

Isabelle Bessa
Isabelle Bessa

Posted on • Edited on

How console.log might save your code from yourself

Starting my bootcamp, there were two things I knew about javascript:

1.Using a ";" to separate code lines is optional, but helps your code;
2.Console.log EVERYTHING.

As a great know-it-all, I refused to follow both rules. That got me stuck in many different situations, but what really opened my eyes to the importance of console.log was failing my first code challenge.

And here's how I'm gonna save you from the same mistake.

What is console.log()?

In simple words, console.log() outputs to your console whatever you request it to.If you're familiar with other languages, such as python, you probably know it as print().

What parameters does it take?

console.log() takes any parameter. It can be used for strings, arrays, objects, and to access HTML content by JavaScript. On a side note, console.log() outputs the value you're looking for regarding the moment you open your console.

Why do I need to use it?

Let's start with a simple example. We're trying to update our website so it shows the first object of our json file. We want it to show the image, name and description of our product.

For that, we're creating a function that assigns our values from the json file to our html content, like so:

//setting the element information 
function setElementInfo (element){

    //display the element name 
    const elementName = document.getElementById("detail-title");

    //display the element image
    const elementImage = document.getElementById("detail-image");


    elementName.textContent = element.name;
    elementImage.src = element.image;
}
Enter fullscreen mode Exit fullscreen mode

Okay, that looks great! Let's try calling this function by the data we got from out fetch request.

//requesting the information from the json file
fetch("http://localhost:3000/data")
//returning the response from the file and reading it to javascript
.then(response => response.json())
.then(data => {

    setElementInfo(data)
Enter fullscreen mode Exit fullscreen mode

Now, let's update our HTML page and see how this works!

Our console log in the HTML browser

Oh, no. We got an error there, and it says it can't find our data. That's weird. It's a very open error and it doesn't show in what line we made a mistake or what exactly is the problem with our code. How can we find out more about it?

Enter console.log()

For staters, let's make sure we have our return data right, by logging it.

//requesting the information from the json file
fetch("http://localhost:3000/data")
//returning the response from the file and reading it to javascript
.then(response => response.json())
.then(data => {
    console.log(data)
}
Enter fullscreen mode Exit fullscreen mode

Now let's reload our HTML browser and see what the console shows us.

Our console log in the HTML browser

Great, we go out data! But wait, it all comes in an array. We need to set only the first element of our array to show up, and how can we do that? Let's try calling it with our index.

//requesting the information from the json file
fetch("http://localhost:3000/data")
//returning the response from the file and reading it to javascript
.then(response => response.json())
.then(data => {

    setElementInfo(data[0])
Enter fullscreen mode Exit fullscreen mode

Now, reloading our HTML page.

Great! We got our first element to show when our page loads. Thanks, console.log()!

What to take from this?

When working with too many elements and functions, specially while building websites, it's easy to get our data confused. What we think it might be a string turns out to be an array, or our calls to html function sometimes return whole html objects, instead of a simple value inside that object.

console.log() helps your access your data and what you are building into your code to help you make less errors, and have less frustrations while working on a big program. It's easier to console.log() every data and variable as it is set, than face an error while running the code and having to checking everything from the beginning.

I hope this post helped you understand the importance of console.log() while creating your code and how it can help you improve your programming!

Sources:

console.log() - Web APIs - MDN

What is console.log in JavaScript?

Top comments (0)