Tech Blog #1: Troubleshooting JavaScript Using Conole.log()

Here it is! The start of my professional programming career. As a beginner in all things coding there’s really only one unique thing I can share with the programming world, and that’s my own journey learning all this stuff! So hopefully these blog posts can act as a guide to those coding newbies out there looking for a peer perspective on a beginners journey through tech.

In this post, I’m gonna focus on the main tip that has helped me troubleshoot and bugfix my JavaScript code. Everyone has there own way of troubleshooting and the same thing that works for me might seem unhelpful to you. That being said, the most useful line of code and also the topic of todays post, is the console.log().

The purpose of using console.log is very simple, you can see what certain parts of your code look like as your program runs. Console.log does exactly what it says, and literally logs something in the console. This is useful for when you want to see what values certain variables hold, what affect your functions are having on your data, and where in a function or program your code is messing up. The code snippet below is an example of using console.log for these purposes.

let var1 = 0;
let arr = [0,1,2,3,4]

for(let i = 0;i < arr.length();i++){
  var1 += arr[i];
  console.log(var1); //will print, 0, 1, 3, 6, 10 in that order
}

This code is an example of how you’d use console.log to check the value of a variable as it runs through code. This code would run through the for loop and add the value of every variable in the array ‘arr’ to the value of our ‘var1’. It then uses the fancy console.log to write the current value of ‘var1' down in the console of whatever program you’re using. This could be useful for when you’re expecting the variable that you’re checking to be one thing (let’s say 11 in this case), but as you would see in the console, it ends up at 10. If you used ‘var1’ later in the code under the assumption that it was 11, you could end up using the wrong value for some important function you made, and assume that the problem was with the implementation of the function. Trust me when I say that I know how frustrating it is to try for hours to fix a function to realize it was the variables that were the problem. Now we can change the loop or add 1 after it to solve this problem. Using console.log we can check the values of whatever we want, whenever we want, and eliminate bugs by getting to know our code at every step. Below is another example.

let var1 = 10;
let var2 = 20;

function get30(arg1, arg2){
  console.log(var1); //var1 will print 10
  var1 = var1 - var2;
  console.log(var1); //var1 will print -10
  var1 = var1 - 20;
  console.log(var1); //var1 will print -30
  return var2 + var1;
}

console.log(get30(var1, var2);) //the function will print -10

This code snippet shows an example of using console.log to troubleshoot a function. For this function we want to send in 10 and 20, and do some ‘stuff’, to get the number 30. (this is not a useful function and only exists for education purposes lol). After creating this function we can put console.log after every time we change a variable to see it’s new value, and again calling the function to see if the result is truly 30. Checking the console.log we used to call the function, we can see that our result is NOT 30. Now we turn to our console logs in the function. Doing this will reveal that the function changes var1 to some pretty crazy numbers that won’t add to create 30 like we hoped. Now we can go back into the function and tweak it to match our intention.

Hopefully this small explanation of console.log() helps show how it can be a helpful tool for any troubleshooting situation. It has truly helped me fix my code time and time again over these last few months, and is a tool used by not just beginners like me but programming professionals at all skill levels.

Check out my future blog posts to keep up with my progress and gain an insight into the tools beginners use to grow their programming strength. Till next time :)