Why use let and const over var in JS? ES6 variable declaration

What is the difference between var, let, and const and why not use var in Javascript? Let's find out in this article

Photo by Ferenc Almasi on Unsplash

These days, many people have an opinion that JavaScript has a bad developer experience and is broken in many ways. They complain that the variable declaration system it uses is completely unmaintainable since you would never know whether you made the data of string, integer, or an object.

JS is a dynamically typed language, meaning it can change the datatype of a variable if needed. This created many unexpected results if not taken into account by the developer. Let me give you an example of what I am talking about.

This is the problem many devs have. You can try it for yourself, open the dev console of this site and try it out. This is not a bug but a feature of JS. This makes it easier to work with JS if accounted for. In this article, I will give you some tips to use the power of JS to its limits using ES6 variable declarations. It doesn’t solve the type conversion but solves many problems which devs complain about in JS. Let's begin

Defining all three types of variables:

Types of variable declaration in JS

As you can see in the image, there are three types of variables in JS. var, let, and const. Let's define each of them.

Var:

var declaration was used before the latest version of JS ES6+ came into existence. In this type of declaration, the variable declaration was the root cause of all the hate JS is getting even when it is no longer actively used. These were the features of this variable declaration.

Here are some of the features of var declarations:-

1:) They are function or global scope only-

These variables are function or global scope only means that if a var is declared in any other block-level element like loops, conditionals, or objects then the variable can be accessed outside of this block. Here is an example:-

This image clearly shows the scope of var variable

In the above image, the greet variable is declared in the if statement but is used outside the scope of the conditional block of if. Although, you won’t be able to call it from outside of this function as var declaration is a function scoped declaration.

2:)Hoisting of var-

Hoisting is a mechanism of JavaScript that means that the variable declarations will be read first by the JavaScript compiler in its scope which means that the JS compiler would place variable declarations over other operations in a given block which in var’s case is a function or the global scope. Here is an example of hoisting:-

Example of hoisting in javascript

In the above image, the JavaScript interpreter declared the variable before any other operation, then logged it in the console, and after that assigned it a value. It is interpreted like this code below:-

Code as interpreted as JS compiler

ISSUES WITH var:

1:) Var variables can be declared and redeclared multiple times. Here is an example of this problem:-

A local variable of the same name changed the global value

In the above image, the local variable made with the same name changed the value of the global variable.

An example of declaring a variable twice

In the above example, the variable is declared and redeclared due to which the value of the variable changed.

These issues have made JavaScript very difficult to use and also to debug. These are the reasons that JS gets so much hate from the dev community but all this changed with the advent of ES6 into the world of JavaScript

The solution to these problems:

To address all these issues, ECMAScript 6(ES6+) was launched and since then, JS has never been the same as it used to be. let and const were the part of ES6 and they addressed most of the issues which were present in the original JS before ES6. Let's see what the changes were.

Let:

It is the variable declarative approach of ES6 which improves upon many problems which were there in var declarations of variables. Here are some of the qualities and features of this approach:-

Here are some of the features of let declarations:

1:) Unlike var, let is a block-scoped variable declaration meaning it can only be used in the block in which it was declared. Here is an example of block-scoped let variables:-

This is an example of the block scope of let declaration

Due to this feature, we can make variables of the same name in the local scope, assign them a different value, and make changes to them all without touching the global variable. Here, in this image I have logged both, the local and global variables of the same name and both have different values:-

Example of local and global variables being the same

2:) let variables cannot be redeclared but their value can be reassigned and changed. Here is an example of this:-

This image shows let can be reassigned

The above image shows that the variable greeter has logged the changed value and not the original value which clearly shows that let variables can be reassigned the values. If I would have redeclared the greeter variable then it would have been an error since they cannot be redeclared in the same scope.

3:) Hoisting in let works the same way as it does in var. However, as I said earlier, let works in block scope so hoisting can only elevate the variable declaration to the top of the block, no matter if it is a function, conditional, loop, or the global scope.

Const:

This variable declaration makes a variable constant, its value cannot be changed once assigned and it cannot be redeclared in its scope. Here are some of the features of const declaration of variables:-

Here are some of the features of const declarations

1:) As mentioned above, const variables cannot be redeclared in their scope and their value can also not be changed. This makes them perfect to store constant values or arrow functions, things that don’t have to change the value in the code. Here is an example of const declaration and reassignment:-

This image shows the use case of const variables

2:) Const variables have a scope similar to let variables. They are only accessible within the block in which they are defined.

3:) The hoisting of const variables is done the same way as is done for let or var variables. They are hoisted to the top of their block scope.

Conclusion:

So the end conclusion, the summary of this very long article is just this:-

1. Var variable declarations can be redeclared and reassigned anywhere in the code. They are global or function scoped and are hoisted to the top of their scope.
2. Let variable declaration can be reassigned and changed but cannot be redeclared in its scope. They are block-scoped and they too are hoisted to the top of their scope.
3. Const variables are constants, they cannot be redeclared or reassigned. They too are block-scoped and are hoisted to the top of their scope

This is it guys, this is everything about the variable declaration in JS. I hope you enjoyed reading it as much as I enjoyed writing it and I also hope that you have learned something new from this article.

If you like this post and find it helpful, then hit that clap button and do let me know in the comment what you think of this article. Have a great day😉.