JavaScript Common Mistakes

JavaScript is an easy language to get started with, but achieving mastery takes a lot of effort, time, and patience. Beginners often make a few well-known mistakes.

In this article, we’ll cover some of the most common learning mistakes people make and find out how to overcome them. Many of these tips will be applicable outside of JavaScript or even web development.

Case Sensitivity

Variables and function names are case-sensitive. And, remember that native javascript function and CSS properties in javascript are camelCase.

Example:

// it should be 'Id' not 'ID'
getElementById('geeksforgeeks') != getElementByID('geeksforgeeks'); 

// 'geeksforgeeks' again does not equal 'GeeksForGeeks'
getElementById('geeksforgeeks') != getElementById('GeeksForGeeks');

Using ‘IF’ Statement Comparison Operator Incorrectly

We’re talking about the “==” operator and the “=” operator. The first one does a comparison and the second assigns a value to a variable. The error created depends on the language. Some languages will throw an error, but JavaScript will actually evaluate the statement and return true or false.

Example:

// This if statement returns false (as expected) because x is not equal to 5:
let x = 0;
if (x == 5);

// This if statement returns true (not expected) and Assigns 5 to x:
let x = 0;
if (x = 5);

Javascript is loosely typed, except in switch statements. JavaScript is NOT loosely typed when it comes to case comparisons.

Example:

let myVar = 5;
if(myVar == '5'){ 
  // returns true since Javascript is loosely typed
  alert('Welcome to GeeksforGeeks'); 
}

switch(myVar){
  case '5':
  // this alert will not show since the data types don't match
  alert('Welcome to GeeksforGeeks'); 
}

Forgetting to use 'this'

Another common mistake is forgetting to use ‘this‘. Functions defined on a JavaScript object accessing properties on that JavaScript object and failing to use the ‘this’ reference identifier.

Example:

// the following is incorrect:

function myFunction() {
  let myObject = {
     objProperty: "GeeksforGeeks welcomes you",
     objMethod: function() {
        alert(objProperty);
        }
     };
  myObject.objMethod();
} 
myFunction();

// the following is correct:

function myFunction() {
  let myObject = {
     objProperty: "GeeksforGeeks welcomes you",
     objMethod: function() {
        alert(this.objProperty);
        }
     };
  myObject.objMethod();
} 
myFunction();

Undefined != null

In JavaScript, undefined means a variable has been declared but has not yet been assigned a value, and null is an assignment value. It can be assigned to a variable as a representation of no value.

Example:

// undefined
let TestVar;
console.log(TestVar); // shows undefined
console.log(typeof TestVar); // shows undefined

// null
let TestVar = null;
console.log(TestVar); // shows null
console.log(typeof TestVar); // shows object

// it is clear that undefined and null are 
//two distinct types:
// undefined is a type itself (undefined) 
//while null is an object.

null === undefined // false
null == undefined // true
null === null // true

Confusing addition and concatenation

An addition is about adding numbers and concatenation is about adding strings. In JavaScript, both operations use the same '+' operator. Because of this, adding a number as a number will produce a different result from adding a number as a string and a lot of beginners have confusion about this.

Example:

// the result in x is 30
let x = 5 + 25;  

// the result in x is '525'
let x = 5 + '25';  

Not understanding how scopes work

A difficult concept for beginners to understand is JavaScript's scoping rules and closures. Functions retain visibility to variables in their parent scopes. But because we are delaying the execution with a setTimeout, when the time comes for the functions to actually run, the loop has already finished and the I variable is incremented to 6. The self-executing function in the comment works because it copies the I variable by value and keeps a private copy for each timeout function.

Example:

// Output will be 6
for(let i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i+1);
    }, 100*i);
}

Conclusion

The better you understand why and how JavaScript works and doesn’t work, the more solid your code will be and the more you’ll be able to effectively harness to the true power of the language and improve. Conversely, a lack of proper understanding of JavaScript paradigms and concepts is indeed where many JavaScript problems lie.