Types of Errors

If you are new to JavaScript, you probably encounter the 2 most common type of errors:

1. Syntax Errors
2. Logic Errors

Syntax errors are basically spelling errors in your code. JavaScript is case-sensitive! So a little mistake in the capitalization can cause the code not to run and therefore, an error.

On the other hand...

Logic errors are more difficult to spot than Syntax errors. In short, it is when the program runs but the result is not what you, the developer, intended it to be.

Let's move on to some examples and tips on how you can troubleshoot your code in case of these errors.

Example: Syntax error

Let's say you are writing a function to convert an angle in degrees to radians. The formula to convert degrees to radians is:

Radians = Degrees * (Pi/180), where Pi is approximately 3.1416

So you'll write your function as follows:

function degToRad(degrees) {
     return degree * (Math.PI / 180);
};

degToRad(50);

Now let's test that out in our browser. Open a New Tab and press F12 (or Ctrl+Shift+I) to open the inspector window. Here's what you should see:

Note: The Inspector Window is a useful debugging tool for developers. I encourage you to explore and get familiar with it to debug future projects on the web. I recommend you get started by reading here.

Just copy that function above and paste it on the console to run. And... you should see an error!

Well, let's see why the console says 'degree' is not defined... Aha! The name of the parameter is 'degrees' but we asked the function to return 'degree'! Not wonder it is not defined and giving us errors.

Let's change 'degree' to 'degrees' and function should work.

Yay! It works. So, 50 degrees is equivalent to 0.8726646259971648 radians. Good to know.

Types of Syntax Errors

There are many ways the console can tell you that you have a syntax error. Although they won't explicitly tell you "Hey look! You mispelled something!" but just like the example above, they will tell you it's a ReferenceError or a TypeError or that something is undefined or null.

Usually, that means it's a Syntax error and you'll have to read your code line-by-line to find it.

Conclusion: Syntax errors are generally stated as ReferenceError, TypeError or NullError. If you encountered these errors, read your code line-by-line and make sure it's error-free.

Example: Logic error

So for this example, let's say you want a function that takes in a word and determine whether the word is "apple" of not. Here's what it looks like:

function appleOrNot(word){ 
        if(word="apple") { return true; }
        return false;
}

appleOrNot("orange");

Let's test that on the Inspector window.

Hmm, no errors but there is something strange. Our word was "orange" so the function should return 'false' and not 'true'... Why is that?

This is a classic example of a logic error. No error is stated in the console like a Syntax error but clearly, you know that the function is not right. For this example, if you examine the code correctly, you will find that the if statement if(word = "apple") { return true; } will always return true because of the single '=' sign. You have to write '==' to check for equality so fix that and the function should now run correctly!

Hooray! This function is also fixed!

Types of Logic Errors

Unlike Syntax errors which clearly states there's an error, logic errors are invisible to the console and so it may look like the code works but if it doesn't come out the way you expected, it's a logic error. For this reason, it may be difficult to spot a logic error. Take your time and break down your code line-by-line to understand how the code might process and follow its logic. Once you see something odd within the code's logic then you might have detected that error. Be patient and keep trying!

Conclusion

From this guide, I hope you can now understand how to debug code in your browser using the Inspector window, know the 2 most common types of errors and know a few tips on how to detect them. Troubleshooting skills takes time and experience to be good at so don't give up if you cannot fix errors well now. The more you practice, the better you'll be.

If this guide helps you in any way, don't forget to leave me a 'thumbs up' so I know it helps you! Also, if you have any questions regarding this topic, feel free to comment below so we can help you. Cheers!