Let VS Const Vs Var
Tags: beginners, javascript, codenewbie, hoisting
Published: 2021-05-10 20:16:11


We use variables in JavaScript a lot. An awful lot. And it’s for good reason. But Why? Well, JavaScript needs a way or mechanism to store values in order to manipulate data, interpret data, carry out instructions and ultimately execute a task. One way we can store values is to store them in variables. Variables are used as containers of values. But how can we make use of a variable?

Before we can use a variable we first have to declare it. How do we do that? We can use var, let and const to declare a variable. For example:-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjvvjinjxphhix8lite0.png)

But it is highly advisable to use let and const not var for reasons we will discuss later. For now let’s assign values to the variables above. Since we have already declared the variables we can store or assign values. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0v28nhbrd7h6wrpl5474.png)

The first time we assign a value to the variable, it is called initialization. In other words assigning the initial value. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9zjrukfinsyy2xjt64c.png)

After you have declared and initialized a variable you can change the value assigned to it multiple times. Sometimes this happens by accident especially when you are working in groups. If you want the variable to have a constant value you can declare it using const. When using const you can’t just declare the variable, you also have to initialize it with the constant value. For example:-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7j737yapfv093gn8kob6.png)

And like the name suggests you can’t change the value of a variable declared with const otherwise it wouldn’t be a constant, would it? Instead you have to change the value you used to initialize if you want a different constant value or declare a new variable all together. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ruo4hx96m4ush25cz5g.png)

Now that we know how to declare and initialize variables using var, let and const, let’s talk about the difference between them. So what’s the difference between using var, let and const? Why is it preferable to use let and const over var?

Before 2015 const and let were not in use. Software developers only used var to declare and initialize variables. But after 2015 var was abandoned and let & const started being adopted. But Why? Why is that so? Well, there are several reasons for that.

For one it is possible to declare as many times as you want with var but it is not possible to do that with let and const.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe56ffipq1p6fez34as7.png)

You can only declare a variable just once with let and const. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvsqeohf4qjhmzg1qlf4.png)

Another difference is that variables declared with var get hoisted unlike those variables declared with let & const. But 1st what is hoisting? Great questions! Hoisting is a concept that describes a mechanism in which it’s possible to use variable declarations and call on functions before they are declared.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnleu4u9l63x8ihn6sfw.png)

As you can see above you can access or refer to variables declared with var but not let & const. And access function declarations as well.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs6b84qsmfy0xlyhtaq5.png)

That’s unusual because it should not be possible to use variables or functions before they are declared. Precisely because javascript gets read and executed from left to right going down from top to bottom. It seems like the variable and function declarations where pushed above the lines of code they are being used or called up on. That is not really the case though. Instead variable declarations and function declarations are stored in live memory or variable environment during the creation phase of execution context. The difference is that variables declared with var get assigned the default value of undefined initially and function declarations get assigned function definition before being stored in live memory or variable environment whereas variables declared with let & const don't get assigned any value. As a result return reference error. 

In addition variables declared with let & const are block scoped whereas variables declared using var are not block scoped. What does that mean? If the variable is declared using var then it is accessible or can be referenced from anywhere inside the global scope. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsn2y46jbghr68fjk98j.png)

Similarly it is accessible or can be referenced from anywhere inside the local scope if it is declared inside block statements. But this is not the case when the variable is declared with let & const. Variables declared with let & const inside a block statement can only be accessed or referenced from within the block statement only.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff2x757d13h1pbjxbzf6.png)

What are the implications of these differences and why is it then advantageous or preferable to use let & const to declare variables instead of using var?

Here are the three main advantages of using let & const instead of var:-

* less possibilities for accidental changing of values or mutation since you can declare variables once
* discourages or prevents bad coding practices of using variables and calling on function before they are declared
* less chances for conflicts due to let and const being block scoped

And all these result in less likelihood of bugs compared to using var to declare variables. This then prevents less time waisted in debugging which prevents possible loss of revenue & resources.

All in all these are the major differences between var on one side and let & const on the other side. If you like my writing please follow my blog or my twitter account at @wolde_ai for more articles.