6 Common Javascript Mistakes

Javascript is one of the most popular languages in the market. It is used both in the front-end and back-end development. So part of the reason for this proliferation across the web is for its apparent simplicity — getting started in Javascript can feel quick and easy and starting with basics is a great way to go. However, once you start looking deeper there are a lot of subtleties to Javascript that are easy to overlook.
Everyone makes mistakes, so here are the six most common mistakes that help you to polished your code.

Getting Confused About Equality

Javascript rules of coercion can be incredibly convenient when working with values in a boolean context as their values will be forced into a boolean value. Unfortunately, this handy shortcut creates a few easy traps for the Javascript coder to fall into!
One common mistake is for apparently empty brackets to be deemed an object under Javascript’s boolean rules and despite being empty and presumptively false, determined as true.

The type coercion rules are an easy place to slip up, so we recommend using === and !== rather than == or != to avoid accidents with type coercion!

1let a = ‘42’;
2let b = 42;
3a === b    //true
4a === b    // false

Assuming Block-Level Scope

This is an easy mistake to make, especially for new developers because it’s true in other coding languages but Javascript is different. Making the assumption that Javascript creates a new scope for each code block is a common error, and the confusion this creates leads to a lot of bugs. In Javascript, something called a variable, hoisting occurs, where a variable will retain its last value even upon exiting a loop.

Support for block-level scopes, let and const keyword introduced in ES2015.

1const foo = () => {
2  if(true){
3    var a = 10;    //exist in function scope
4    let b = 20;    //exist in block scope
5    const c = 30; //exist in block scope
6  }
7  console.log(a);
8  console.log(b);
9  console.log(c);
10}
11foo()
12// *** result: ***
13//10
14//error: b is not defined
15//error: c is not defined

Letting Memory Leaks Sneak In

Coding to avoid memory leaks takes a proactive approach, without which memory leaks ultimately sneak into your code. This makes them an exceptionally common problem in Javascript, not least because there are a number of ways in which they can occur. When an unnecessary global variable is created by assigning a variable value for the first time. This global variable sits in the background and even though a variable like this won’t use a lot of memory your browser speed will still be impacted.

Try to avoid global variables wherever possible by using local variables or use the ‘use strict’ directive, which won’t let you invoke an undeclared variable at all.

1“use strict”
2a = 3.14;     // This will cause an error because x is not declared

Inefficient DOM Manipulation

Javascript adding, modifying, and removing elements (manipulating the DOM) is pretty easy, but you won’t always find yourself doing it in the most efficient way unless you’re careful. You could, for example, build a code that adds elements to the DOM individually — this may work, but neglects the fact that it’s an expensive operation to add a DOM element, and ultimately your code will be clunky and inefficient.

A good fix to this is to get into the habit of using document fragments it when you need to add multiple DOM elements. Modifying these elements when they’re detached and then attaching them afterward will give you better-performing code.

1const fragment = document.createDocumentFragment();

Failing To Leverage Prototypal Inheritance

Prototypical inheritance is still not fully understood by a vast number of Javascript coders, and therefore they aren’t making the most of this function. Slow-running code can often be solved by effectively leveraging prototypal inheritance, so it’s a key skill to perfect.
Incorporating prototypical inheritance will allow an object to inherit its name property from a prototype, saving time and speeding things up down the ling.

1class Car {
2  constructor({ wheel = 4, color = 'black' } = {}){
3    Object.assign(this, {
4      wheel,
5      color,
6    });
7  }
8}
9class Jeep extends Car {
10  constructor(options = {}) {
11    super(options);
12    this.driver = options.driver;
13  }
14}

Creating Incorrect Reference To Instance Methods

This common mistake comes as a result of allowing a method to be defined in the global scope which means a window in another browser. In this instance, the keyword this is equal to that window, rather than the instance of the object we intended.

Getting your references to instance methods right takes work, so pay close attention to how you code these otherwise you’ll start getting the wrong outputs entirely!

1let x = 'String Object';
2let y = x;

Conclusion:

So far these are the six common mistakes developers make in Javascript. Don’t feel bad you’ve fallen for a few of there as they’re all easy to do.

Understanding the nuances of Javascript will help you write better code in the future.