Why using var is a bad practice in javascript?

In javascript, we declare a variable in three ways

• Var

• Let

• Const

Developers prefer that language by which they can create predictable results but in javascript, when we use Var then, sometimes the results are not predictable. There are four potential problems for not using var in the javascript code I come across. So, Let's deep dive into it and understand the scenarios.

1. Scope

   a. Function Scope

   b. Global Binding

2. Declaration and Initialisation.

   a. Redeclaration.

   b. Access before Initialisation.

Function Scope- The scope is nothing but boundaries represented by {}. There are two kinds of blocks we usually deal with in javascript. Function level and Normal blocks.

Function block {} which we write immediately after function declaration.

function ExampleOfFunctionBlock() {
    console.log("Inside function block");
}

The normal block which we use with if or else etc.

function ExampleOfFunctionBlock() {
  if (true) {
    var a = 50;
    console.log("Inside Normal Block", a); // Result of a will be 50 }
    console.log("Inside function block", a); // Result of a will be 50
  }
}

Problem with function scope- As a programmer, Sometimes, we need to access the information within the normal block only but the problem with Var is, It is accessible throughout the function level means outside of the normal block.

That's why we prefer not to use Var as It could give us the undesired result.

Global Binding- At the top level var creates the property on the global object. In simple terms, it will be accessible throughout the code.

Problem with Global Binding-

1. Global binding could be a potential issue for the undesired result if it would be altered in between by some code.

2. Debugging would be difficult if the variable will be changed multiple times by code.

Redeclaration of Variable- When we use var, we can write the same variable name multiple times within the scope as the new variable will override the previous one.

function reDeclareOfSameVariable() {
    var a = 70;
    if (true) {
        var a = 90;
    }
    console.log("The value of a is:", a);
}
reDeclareOfSameVariable(); // The value of a is: 90

Problem with Redeclaration- Unknowing, we can declare another variable with the same name which can give the undesired result.

Access Before Initialisation- When we declare the variable through var keyword, We can access the variable before initialization as a result of undefined which as a programmer we don't want.

var anyRandomNumber;  // variable declaration
console.log(anyRandomNumber); // result as undefined
anyRandomNumber=76;
console.log(anyRandomNumber) // result as 76

Conclusion- Declaring a variable or object in this way(through var keyword) could be a nightmare for the developer as we saw four cases where we can get an undesired result. So better to avoid the var keyword and start using Let and const which comes as a solution to the above problems.