Debugging JavaScript code - Day 21 of 100

This post is a part of the Week X of 100DaysOfCode JavaScript Challenge series.

• Catch Misspelled Variable and Function Names:

We often notice a reference error in the browser console when debugging our programs. What does that mean? The Browser is looking for an object that doesn't exist. And that is because we make mistakes humanly while typing fast. We may miss a character in a variable or function name, do a capitalization mistake, or just misspell our variable or function names. Variable and function names in JavaScript are case-sensitive. So, a variable declared as let name = "Arif"; will give a reference error if you try to access it as console.log("My name is " + Name), notice the capitalization mistake.

ReferenceError: Name is not defined

• Catch Unclosed Parentheses, Brackets, Braces, and Quotes:

Another common syntax error takes place when you forget the closing pair of parenthesis, bracket, curly brace, or any other pair. The best way to avoid this error is to immediately write the closing pair after the opening one and then move back your cursor and start writing code. The missing closing bracket in this statement let myArray = [1, 2, 3; will give the following error.

SyntaxError: unknown: Unexpected token, expected "," (1:22)

Fortunately, today most modern editors generate the closing pair automatically for you.

• Catch Mixed Usage of Single and Double Quotes:

JavaScript allows for two types of quotes for declaring strings, the single quote ' and the double quote ". A common syntax error occurs when both of these quotes are used in a string and you close your string too early. Mixed quotes are usually used when your string has sub-strings that are enclosed in quotes or when there are contractions in your string like I'll come.

Example:

let innerHtml = "<p>Click here to <a href="#Home">return home</a></p>";

The above string will give a syntax error because you can't use a double quote inside double-quoted strings. You have to either escape the internal quotes using the backslash \ or replace them with single quotes '.

• Catch Use of Assignment Operator Instead of Equality Operator:

A logical error comes in when you mistakenly use an assignment operator = instead of an equality operator (== or ===) in a condition. Your program output will be unexpected because the program flows in the wrong direction. So, be careful with these symbols.

• Catch Missing Open and Closing Parenthesis After a Function Call:

Just don't forget the opening and closing parenthesis when you call a function. Sometimes you may want to store the function's returned value into a variable. If you miss the opening and closing parenthesis when you assign a function's returned value to a variable, the function itself will be stored in the variable instead of the returned value.

Example:

function getName() {
  return "John Doe";
}

let result = getName; // note the missing opening and closing parenthesis here
console.log(result); // [Function: getName]

• Catch Arguments Passed in the Wrong Order When Calling a Function:

When you call a function, supply the arguments in the order as the function definition would expect. For example, if a function expects two arguments the first being an array and the second being an integer, supply these arguments in that order, otherwise, expect a runtime or logical error. Supply the arguments in the correct order whether they are of the same type or of different.

• Catch Off By One Errors When Using Indexing:

String and array indexing in JavaScript starts from 0, not 1. The index of the last element is always one less than the length of the element. So, be careful when you access an array or string element using its index. The index must be within the range.

• Use Caution When Reinitializing Variables Inside a Loop:

Sometimes it is required to reinitialize/reset a variable inside loops but you forget doing so. This may cause bugs like an infinite loop. Remember to take help of console.log() to output any buggy behavior of your program.

• Prevent Infinite Loops with a Valid Terminal Condition:

A terminal condition is one that eventually terminates the loop. Loops are great but when you don't have a terminal condition or you just set it to something that's never met, you will fall into the infinite loop that will crash your browser. So watch out for this when using loops.

And we finished the Debugging module of the JavaScript course at FreeCodeCamp.