What are All The Differences between var and let ?

 

What is ‘var’ ? It is the keyword used to declare a variable in JavaScript.

What is ‘let’ ? It is also a keyword used to declare a variable in JavaScript, which was introduced in the ES6 standards.

If we already have a keyword ‘var’ which is used to declare a variable and which is also similar to most of the programming languages which also makes it more easier to understand to most of the programmers, then what was the necessity of ‘let’ keyword in JavaScript.

To answer the above question, what we need to understand is, traditionally we used to have several problems in ES5 JavaScript. Though some of them can be taken as the features of JavaScript,  they can become a very big nuisance, especially if you are not aware of them.

Till the happening of Node JS, most of the JavaScript developers were, for the name sake JavaScript developers, but were actually using primarily jQuery or any other library. As jQuery and most other JavaScript libraries taken care of the issues which were present in the Vanilla JavaScript, most of those library users never came across the problems which were existing in vanilla JavaScript.

With the rise of Node JS, many developers from other programming languages started learning JavaScript and eventually started facing the issues with the problems that were there in the ES5 JavaScript. Apart from these problems ES5 JavaScript was also different from most of the other programming languages such as implementation of Object Oriented Programming. While most of the other programming languages used Class based OOP, JavaScript had Prototype based implementation. Though prototype based implementation have some benefits, it became an inconvenient thing for the other programmers while learning JavaScript.

All the above things forced ECMA to come up with a new set of standards, ES6, which is, not only solved most of the issues that were present in its earlier standards, but also made it more similar to other programming languages.

One of the keyword introduced to solve the earlier issues was ‘let’.

Now, let us find out, what were problems with ES5 JavaScript and how ‘let’ solves them.

Scopes in JavaScript

Have a look on the following code

Copy to Clipboard

In most of the programming languages a similar program prints value 100 to the console. But in JavaScript, we get 5.

The reason for getting 5 in the console is, we used to have Only two scopes in ES5 JavaScript. One being Global scope and the other is Functional Scope. Since, we declared a variable inside ‘for’ loop which do not have its own scope, will overwrite a variable with same name in the Global scope, if declared earlier. Now the variable ‘x’ inside the ‘for’ loop is overwriting the global variable.

Since our example contains only 3 lines of code, its easy to identify the issue. This can be a big problem if your code is too lengthy in which you might have declared a variable at one place and somewhere down in the line unknowingly might have used same variable name in any loop or conditional statement. This can be a even bigger problem if you have imported some others JavaScript and you have overwritten it.

This problem can be solved by using the new keyword ‘let’ which provides block scope in ES6 JavaScript.

Copy to Clipboard
Temporal Dead Zones

We can access a variable declared by using the keyword ‘var’ even before creating it.

Copy to Clipboard

In the above example, we are getting undefined for the variable ‘x’. It happens due to the concept known as Variable Hoisting in JavaScript. Though it may be useful in few scenarios, mostly we are not supposed to access a variable before even creating it.

When we use ‘let’ keyword, JavaScript creates a Temporal Dead Zone (TDZ) for that variable. TDZ is nothing but the area of the program, where we are unable to use that variable. That means, Dead Zone for that variable. This will be the area of the program before declaring that variable. If we declare a variable at line number 100 by using the ‘let’ keyword, the lines of code from 1 to 99 is the dead zone for that variable. We will get “ReferenceError: Cannot access ‘x’ before initialization” error message.

Copy to Clipboard
Attaching to the window object

When working with the client side applications, browsers automatically attach the variables declared with the keyword ‘var’ to the global ‘window’ object. It do not happen with the keywords defined with ‘let’ keyword.

Copy to Clipboard

Note that the above example do not work in Node JS, as we will not have ‘window’ (global) object in Node JS.

Creation of Closures

One of the major advantage of JavaScript (which is also the core concept behind node js) is the way it handles the events using event pool. This ability can also create confusion among new JavaScript developers. Consider the following example

Copy to Clipboard

Irrespective of the duration given to the setTimeout function, we get 5,5,5,5,5 in the console. The reason for getting all 5s in the console is because of the way JavaScript handles events. As setTimeout is considered as an event, for each iteration the callback function inside setTimeout function will be sent to the event pool. Once the ‘for’ loop is over, all the callback functions gets executed. As the value of x will be 5 at that moment, we get all 5s in the console.

In-order to solve the above problem is ES5, we need to use ‘Closures’ in JavaScript.

ES5 solution is

Copy to Clipboard

Instead of understanding how JavaScript handles events, closures, we can simply use let instead of var in the for loop, which will internally create closures and gives us the correct answer.

ES6 Solution for the above problem:

Copy to Clipboard
Avoids Re-Declarations

By using the ‘var’ keyword, we can declare same variable as many times as we want, but with ‘let’ JavaScript throws “SyntaxError: Identifier ‘yourVariable’ has already been declared”

Copy to Clipboard

 

If you know any other difference between ‘var’ and ‘let’ keywords in JavaScript, please let us know through a comment.