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;
}
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)
Now, let's update our HTML page and see how this works!
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)
}
Now let's reload our HTML browser and see what the console shows us.
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])
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:
Top comments (0)