Results of a Study to Understand JavaScript Bugs (and How to Avoid Them)
Tags: javascript, bugs, webprogramming, study
Published: 2018-06-15 19:44:36

---
title: Results of a Study to Understand JavaScript Bugs (and How to Avoid Them)
published: true
description: This article gives the results of study that discovered the most causes of bugs or errors in JavaScript web applications. 
tags: javascript, bugs, web programming, study
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1ut064imkne43yymssqp.jpg
---


JavaScript is a popular programming language that is extensively used in web applications to enhance user-interactivity on the client side. 

[Benhartouz](https://www.liveedu.tv/benhartouz/lzNVQ-front-end-development/), who is currently using JavaScript to teach people how to build a website for searching jobs, says that "unfortunately, the ubiquitous language is prone to bugs and errors, which make most developers frown and freak." You can visit the link to learn more about his project.

Researchers from the University of British Columbia (UBC) recently carried out a [study](http://salt.ece.ubc.ca/publications/docs/frolin-tse16.pdf) to understand the causes and consequences of client-side JavaScript faults and errors.

The researchers investigated 502 bug reports from 19 bug repositories and discovered some common patterns that make JavaScript-powered applications to behave abnormally. 

Here is a table summarizing the findings of the study:

![javascript bug study results](https://thepracticaldev.s3.amazonaws.com/i/umlwyav1c7960l0dpq48.png)
 

In this article, I’m going to illustrate the key findings of the study and how you can make your JavaScript programs less prone to errors and performance failures.

## 1. DOM-related errors

Surprisingly, according to the JavaScript bug report study, DOM-related faults accounted for most of the errors, at 68%. 

The Document Object Model, usually referred to as the DOM, is a dynamic tree-like structure that consists of the components in the application and how they interact with each other. 

With DOM API calls, you can utilize JavaScript to manipulate the constituents of the DOM, making the web page to be interactive without necessitating a page reload.

As much as the features of the DOM allow developers to add interactivity to the applications, they are also one of the main avenues for introducing flaws in JavaScript applications.

For example, a common mistake most developers make is to reference a DOM element before it is loaded on a web page. 

Here is the code:

```javascript
<!DOCTYPE html>
<html>
<body>
     <script>
       
document.getElementById("javascript").innerHTML = "JavaScript is Fun!";

  //it throws an output error
    </script>
    <div id="javascript"></div>
    </body>
</html>
```
  
If you run such a code, it will throw an error. JavaScript code usually loads and runs following the order it appears in a document; therefore, the browser will not know about the referenced element when the code is executed. 

 There are a couple of ways of solving this problem:

- Place the `<div id="javascript"></div>` first before the script. 
  
```javascript
<!DOCTYPE html>
<html>
<body>

	<div id="javascript"></div>
    
    <script>
        
document.getElementById("javascript").innerHTML = "JavaScript is Fun!";

  //it does not throw an output error

    </script>
        
</body>
</html>
```
  

- Use the JavaScript `onload` event attribute to run the code immediately after the page has been loaded.  
  
```javascript
<!DOCTYPE html>
<html>
<body onload="bugJS()">

	<div id="javascript"></div>
    
    <script>

       function bugJS(){

     document.getElementById("javascript").innerHTML = "JavaScript is Fun, yeah?";

        }
  
    </script>
    
    
</body>
</html>
```
 

## 2. Syntax-based errors

The study found out that 12% of all JavaScript bugs were due to syntax errors in JavaScript programs. Syntax faults are due to grammatical errors that are not aligned to the standard syntax of the JavaScript programming language. 

Here are two common syntax-based errors:

- Mismatched brackets 

This error often arises when you forget to match the brackets accordingly, especially when working on a complex application.

Here is an example of a JavaScript object function without one corresponding closing bracket.

```javascript
functionPerson(name,street){

this.name = name;

this.street = street;

this.info =function(){

returnthis.name +this.street;

//closing bracket missing here

}
```

- Missing a semicolon 

Although ending every statement with a semicolon is not necessary in JavaScript, and your code will execute without any problems, the problem usually comes when you have several lines of code, and some of them end up piling up on the same line. 

Therefore, it’s a good practice to always end your statements with a semicolon to avoid such bugs.

To avoid making such grammatical errors in your code, you need to spend time increasing your skills in JavaScript programming. 

For example, [Kauress](https://www.liveedu.tv/kauress/lj6eO-how-to-code-a-single-operation-calculator-in-javascript/), who is from the U.S. and has over four years of experience in web programming, has completed a project on how to code a calculator using JavaScript. 

You can use his project to increase your skills in JavaScript programming and avoid making syntax errors. 

 ##3. Undefined and null errors

The researchers at UBC discovered that misuse of `undefined` and `null` keywords lead to 9% of all JavaScript bugs. 

This result of the study implies that most JavaScript programmers do not understand how to use the two keywords correctly to avoid coding errors in JS web applications. 

The `null` keyword is an assignment value, which is a representation of a non-existent value. It also behaves like an object. 

Here is an example:

```javascript
var bugJS =null;

    console.log(bugJS);

        // null is the output

   console.log(typeof bugJS);

        // object is the output
```

  
Conversely, the `undefined` keyword means that a declared variable or any other property does not have an assigned value. In fact, it is a type of itself. 

Here is an example:

```javascript
var bugJS;

   console.log(bugJS);

        // undefined is the output

   console.log(typeof bugJS);

        // undefined is the output
```

  
Furthermore, when the `null` and `undefined` keywords are compared with one another using the equality and identity operator, it is only the former that considers them to be equal.

```javascript
console.log(null==undefined);

       //true

  console.log(null===undefined);

       //false
```
  
## 4. Improper usage of the return statement

The `return` statement is used to tell the interpreter that the running of a JavaScript function is completed, and the value needs to be returned. 

According to the results of the study, improper usage of the return statement accounts for 2% of all JavaScript bugs. 

For example, a common error most web programmers make is to break the `return` statement.

Here is a code example:

```javascript

function bugJS(z) {

    var

    fun =10;

    return 

    z * fun;

}

console.log(bugJS(77));

//it leads to undefined error
```

Running the above function will lead to an undefined error. 

Here is how the interpreter executes the code:

```javascript
function bugJS(z) {

    var

    fun =10;

    return;//semicolon inserted here automatically

    z * fun;

}

console.log(bugJS(77));

//it leads to undefined error
```
  

Since the interpreter will automatically insert a semicolon at the end of the line of the return statement, it will lead to an undefined error. 

This also illustrates why ending JavaScript statements with semicolons is important. 

## 5. Other causes of JavaScript bugs

Lastly, the study found out that other JavaScript programming mistakes lead to 9% of all errors and faults in JavaScript code. 

For example, a common cause of errors in this category is neglecting the differences in browsers when developing applications. 

With the availability of various web browsers, which interpret JavaScript code differently, it is essential for developers to ensure that their applications can run smoothly in the different browsers. 

Otherwise, if your code cannot work comfortably across the major browsers, your applications may not meet the needs of the intended audience.

For example, the new JavaScript arrow function, which is supported by most modern browsers, cannot work on the good old Internet Explorer browser.

Here is an example of an arrow function:

```javascript

var colors =['blue','white', red];

colors.forEach(values =&gt; console.log(values));

//blue

//white

//red
```
  

## Conclusion

If you want to ensure that your JavaScript programs are error-free, you need to understand how the quirks of the language work. 

And, the best way to master the intricacies of the language is to build real applications using projects offered by [LiveEdu](https://www.liveedu.tv/guides/programming/javascript/). 

With practice (and lots of it), you’ll be able to build amazing web applications that improve the user experience. 

Happy bug-free JavaScript coding!