Ten Common JavaScript Bugs and How to Avoid Them

Home»Ten Common JavaScript Bugs and How to Avoid Them

JavaScript is a client-side programming language. Anyone having little bit programming knowledge can do JavaScript programming. But programmers make mistakes while coding. Sometimes, these mistakes cause your program to not produce the result that you wanted. Anything that causes a program not run as expected is called a bug. To catch these bugs and errors in your program, a programmer should have good debugging skills. In this article, we will point out most common mistakes a JavaScript programmer often make.

1. Brackets Mismatch
This is the most common mistake that programmers make while coding. They write huge lines of code and they often miss out ending brackets of function.

 

2. Missing Parentheses

This error most often occurs in conditional statements. Consider below example.

if (x > y) && (y < 125) {
...
}

In above code, initial parenthesis of if statement is missing. In order to be correct, this statement should be as follows.

if ((x > y) && (y < 125)) {

}
3. Missing Semicolon
Every statement in JavaScript should end with a semicolon. However, JavaScript code will work even without semicolon.

4. Capitalization Errors
This error occurs if you spelled JavaScript keyword incorrectly. For example, you typed document.getElementByid(). JavaScript won’t understand this. The correct statement should be document.getElementById().

5. Referencing DOM element Before It's Loaded
This error occurs if you try to access a DOM element before it is loaded. Your code should wait for the DOM to load.

Above code will result in error because browser doesn’t know about the div with id=”myText”. The script is trying to access the div with id=”myText” before it is loading into the DOM.

The correct code is here.

Call changeText() function in onload function of the body or you can use document.ready JQuery function to access DOM element after it’s loaded.

We will see another example of this while using document.ready() function.

 

In above code, you are trying to change html of a div with id=”content” which is not loaded yet. This code won’t change html of content div. In order to work above code, you have to call this code inside document.ready() function.

 

6. Missing Parameters in Function Calls
Whenever you are defining any function you are declaring number of parameters of that function. But, sometimes at the time of calling a function developer might miss to pass parameters to that function. This creates a syntax error in you code. Make sure to give parameters descriptive names when you create a function.

7. Bad variable/function names
There are around 50 reserved keywords in JavaScript. Sometimes developers declare a variable with this reserved words. In JavaScript, you cannot use any of the reserved keywords to name your variable. Also give meaningful names to your variables and function and names should be in camel case pattern. For example,
var carSpeed;
function calculateDistance(){
}
8. Equality Confusion

Sometimes developer’s make a mistake in equality and assignment operator. This creates unexpected error.


In above code, assignment operator is used instead of equality operator. This creates “Invalid left-hand side assignment” error.

 

9. Missing Quotes

While string concatenation developers’ forgot to close the string with quotes.


This creates syntax error and will stops the execution of script. You should use proper single/double quotes while concatenating strings. Correct script is as follows.

10. Accessing element at an index in array which does not exist.

Sometimes you are trying to access an element of an array at index which is not exists. This creates type error and will stop execution of your script.

To avoid these kind of errors, enclose your code inside try catch block. Try catch statement will continue your script execution even if there is runtime error in your code.

 

Posted by: Prathamesh Karangutkar. in Computer , php , Technology | Date: 04/02/2016

Share this article

Other articles

Back to article listing

Find a Great Teacher

Tell us your learning needs in detail and get immediate response from qualified tutors

Terms & conditions agreed
Ask a Question
Top