loading...
Cover image for Var vs Let and Const

Var vs Let and Const

damewold profile image Denis Woldemariam ・5 min read

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

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. For example:-

Alt Text

The first time we assign a value to the variable it is called initialization. In other words assigning the initial value. Or rather initializing the variables.But we can also declare and initialize the variables at the same time. For example:-

Alt Text

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. 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? For example:-

Alt Text

Instead you have to change the value you used to initialize if you want a different constant value or declare a new variable.

Alt Text

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 it’s preferable to use let and const over var?

Before 2015 const and let were not in use. We only used var to declare and initialize variables. But after 2015 we abandoned var and prefer to use let and const for the most part. 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 while it is not possible to do that with let and const. You can only declare a variable just once with let and const. For example:-

Alt Text

Another difference comes into mind in regards to the concept of hoisting. But 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

That’s unusual since it should not be possible to use variable or functions before they are declared or exist for that matter. It seems like the variable and function declarations where pushed above the lines of code they are being used or called up on.

Alt Text

The word hoisting actually means raising something using ropes and pulleys literally. That is not what happens in this case though. Instead variable declarations and function declarations are stored in live memory or variable environment during the creation(compile) phase of execution context. So when the code is executed the variable declarations and function declaration can be accessed for use.

Although there is a difference on how variables declarations using var are stored as supposed to variables declared using let and const.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 and const don't get assigned any value. As a result variables declared with let and const return reference error if we try to use it before its declared. let's look at the following example.

Alt Text

With this in mind, let’s get to the another main difference between var on one side and let and const on the other side. Variables declared with let and const are block scoped whereas variables declared using var are not block scoped. What do I mean by this. If the variable is declared using var then it is accessible or visible for use inside the entire window if declared globally or in the global scope and it is accessible or visible inside the entire function if it is declared locally or in the local scope. This is true regardless of whether or not it is declared inside blocks. let's look at the following to understand this.

Alt Text

The same things happens in inside the function or local scope.

Alt Text

On the other hand variables declared with let and const are bound by blocks in regards to their accessibility or visibility. In other words you can not access variables declared with let and const inside a block from outside that block. You can only do it from the inside the block. For example:-

Alt Text

Similarly if the variable is declared inside a block within a function or local scope, you can't access it from outside the block because variables declared with let and const are block scoped.

Alt Text

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

Here are the three main disadvantages of using let and 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 results in less likelihood of bugs compared to using var to when making variable declarations.

And there you have it! Please let me know what you think.

Posted on by:

damewold profile

Denis Woldemariam

@damewold

["JavaScript and React enthusiast", "technical blogger", "Half-Marathon runner", "book lover" & "Science and financial literacy passionate advocate"]

Discussion

pic
Editor guide