Results of a Study to Understand JavaScript Bugs (and How to Avoid Them)
Dr. Michael Garbade
Posted on June 15, 2018
JavaScript is a popular programming language that is extensively used in web applications to enhance user-interactivity on the client side.
Benhartouz, 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 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:
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:
<!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.
<!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
onloadevent attribute to run the code immediately after the page has been loaded.
<!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.
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, 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:
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:
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.
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:
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:
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:
var colors =['blue','white', red];
colors.forEach(values => 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.
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!
Posted on June 15, 2018
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related