var, let & const in JS.
Tags: javascript, beginners, webdev, programming
Published: 2020-11-22 16:47:03

In JavaScript, variable declarations are done using keywords such as __var__, __let__ & __const__. _var_ has been around since the beginning of the javascript,  while _let_ and _const_ were introduced in ES2015 also called ES6 which was an update to the javascript language that included many new features. _let_ & _const_ have a big advantage when it comes to block level scope.

When a variable is declared in JavaScript it can have either function level scope or block level scope based on the keyword used during declaration. Variables declared using __var__ keyword have a function level scope, while variables declared using __let__ & __const__ have a block level scope.

Let's first look at the variable declarations then we'll deeply understand what the function level & block level scope means.

__Variable Declaration__

__var__

Variable declaration using _var_ keyword is done similar to how we declare variables in other programming languages. Also, once declared the variables can be reassigned to some other value if required.

See the code snippet below:

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


__let__

_let_ works very similar to _var_, infact it is identical  on the global scope, but _let_ have certain advantages when it comes to block level scoping which we'll be seeing in the later sections. We can reassign a variable in _let_ similar to what we have done in _var_ above.

See the code snippet below:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8phk9f1x8aifgltkklvh.png)

__const__

Variables declared using __const__ keyword are immutable. const works differently as compared to _var_ & _let_. _const_ stands for constant hence it cannot be changed, once a value is assigned during declaration it cannot be reassigned. 

See the code snippet below:


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

But when it comes arrays & objects const works little differently. Look at the below code snippet.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2z60v9g7uajfzyz3bhx9.png)

Now you might be thinking that as person is constant object then how come we are able to change its properties. This is possible because const keyword creates immutable bindings i.e. we cannot reassign the variable identifier but we can change the properties of an object i.e. the stuff which is inside an object, but we cannot reassign person completely to an entire new object.

Same goes with arrays. See the code snippet below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3tk3wo9p1t740ffdvbvf.png)

So in the above snippet we are creating a variable numbers using const keyword and assigning it to an array. But, later we are inserting a new value into an array & we can do that as we are just inserting a value to an already assigned array. But we cannot reassign a completely new array, if done it will throw an error which you can see in the snippet above.

Now, we have explored all the variable declaration keywords. So it completely depends on developer which keyword to use. But the modern javascript i.e. In ES6, it is generally advised to use let instead of var as there are lot of disadvantages based on its scope level which we'll look now.

There are basically two types of scope level in JavaScript:
__1. Function level scope.__
__2. Block level scope.__  

__Function Scope__

Variables declared using __var__ keyword in JavaScript are functioned scoped i.e. their scope is limited within a function in which it has been declared. Hence, they cannot be accessed outside the function. 
See the code snippet below.

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

So, we can see above that variables declared using keyword var inside the function test() are accessible only within that function, if used outside the function then its globally assigned values are being accessed.  

__Block Scope__

Variables declared using __let__ & __const__ keywords in JavaScript are block scoped i.e. their scope is limited within a block in which it has been declared. Hence, they cannot be accessed outside the block. Here, block means an if statement, a loop or anything that's wrapped in a curly braces {}.
See the code snippet below.

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

Now notice when we are logging global scope at the very bottom of the code we are getting output as 4 2 3, but initially in the global scope (at the very top) we have defined a = 1 but in the block scope that _a_ variable is redeclared to 4 due to which we are getting value of _a_ as 4 in the global scope.

But variables b & c which are declared using keywords let & const are still 2 & 3 (see at the very bottom of the code) even though inside the block scope we have set them to 5 & 6. This is because that's what we initially set them to.

So the way let & const works is how most programming languages work, but var is kind of weird due to which let & const were introduced in ES6.

__So to sum up__

* Variables declared using _var_ keyword can be redeclared & reassigned at a later stage and its scope is limited within a function.

* Variables declared using _let_ keyword can be reassigned at a later stage and its scope is limited within a block.

* Variables declared using _const_ keyword cannot be reassigned at a later stage and its scope is limited within a block.