JavaScript is an essential technology for front-end development. Websites, mobile applications, and even smart devices use this language. There are several benefits of using JavaScript for development. Websites built in this language are highly responsive, making them accessible on any screen. For mobile applications, JavaScript offers flexibility to integrate complex functionalities.
Furthermore, hundreds of advanced JavaScript frameworks, libraries, and development tools can benefit the developers. JavaScript is an essential language for web developers. While it is relatively simple, JavaScript developers must be aware of some language pitfalls. This article will detail the top 6 mistakes made by JavaScript developers.
1. Incorrect references to ‘this’ keyword
One of the most common JavaScript mistakes is the keyword ‘this.’ Many developers wonder if the ‘this’ JavaScript keyword has the same literal meaning or is something else entirely. As JavaScript has grown sophisticated over the years, several self-referencing scopes within callbacks and closures are introduced into the language. The confusion around this/that keywords is better understood from this example:
Game.prototype.restart = function () {
this.clearLocalStorage();
this.timer = setTimeout(function() {
this.clearBoard(); // what is “this”?
}, 0);
};
Running the above code will result in ‘Uncaught TypeError: undefined is not a function error.
In the above code example, the ‘this’ keyword is used to invoke setTimeout(), but it is invoking window.setTimeout(). This is causing the anonymous function using the setTimeout() to be associated with the window object without any clearBoard() method.
A conventional solution experienced JavaScript programmers use to avoid this mistake is to use the ‘this’ keyword regarding a variable; the closure can inherit that. Here’s how:
Game.prototype.restart = function () {
this.clearLocalStorage();
var self = this; // save reference to ‘this’, while it’s still this!
this.timer = setTimeout(function(){
self.clearBoard(); // oh OK, I do know who ‘self’ is!
}, 0);
};
2. Using magic values
Not only in JavaScript but using magic values is a common malpractice in many programming languages.
A magic value is a constant value that abruptly appears within the JavaScript code, only the developer who wrote the code knows why it is there.
This makes JavaScript code unmaintainable as no one can understand what that random value represents; even sometimes, the coder who added the value cannot recall the reason.
For instance, check out this code excerpt:
const specialFn = (r) =>{
const fnValue= 2*3.1416*r // no idea why this value is used
return fnValue
}
console.log(specialFn(4))
How the code should be:
const PI = 3.1416
const specialFn = (r) =>{
const fnValue = 2*PI*r // Calculation for circumference
return fnValue
}
console.log(specialFn(4))
This practice must be followed with all methods, functions, variables, and values.
3. Not “static typing” JavaScript code
A JavaScript developer should write Static Typed code. A type is a syntax format to write JavaScript code with predefined syntax, hierarchy, and structure.
Typescript is one of JavaScript’s most popular static typing styles to help programmers write maintainable and quality code. Typescript is a superset of JavaScript, implying it is JavaScript but with some added syntax features.
When you write static-type JavaScript code, you can easily avoid some of the most common typos and syntax errors.
4. Assuming JavaScript has block-level scope
A beginner JavaScript developer can think that the language creates a new scope for each block of code, but it is simply not true. While many other programming languages like Python and Java have this functionality, JavaScript does not offer block-level scope.
For instance, in this code block:
for (var i = 0; i < 10; i++) {
/* … */
}
console.log(i);
What do you assume will be the output here?
The code will not throw an error or undefined output but will return 10.
Why?
In most other languages, this code block will throw an error because the scope of variable ‘i’ would be only within the for loop block. But in JavaScript, there is no such restriction and the variable ‘i’ remains in scope outside the for loop.
5. Anomalous behavior of Boolean Functions
One of the advantages of JavaScript is that it automatically coerces any value referenced in a Boolean context into a Boolean value. But this convenience comes at a cost for JavaScript developers. Let’s see how.
// All these statements are True
console.log(false == ‘0’);
console.log(null == undefined);
console.log(” \t\r\n” == 0);
console.log(” == 0);
// And these do too
if ({}) // …
if ([]) // …
But the last two statements are empty, which any developer will intuitively think to return false, but as both {} and [] are coerced to a Boolean value in JavaScript, they will return True.
6. Not using “strict mode”
The “strict mode” in JavaScript is voluntary to ensure better quality code by enforcing stricter parsing and error handling. It also makes the code more secure. While not using strict mode is not a “mistake” per se, it is a practice that makes you a better JavaScript developer.
The strict mode JavaScript code prevents accidental globals, makes debugging more manageable, and makes eval() safer.
Conclusion
Being a proficient JavaScript developer is not only about learning the language’s concepts but also about being familiar with the common mistakes and best practices. It helps write concise and quality JavaScript code.
Talent500 is a platform for JavaScript developers to get career redefining opportunities with some of the best companies. Join us here.
