JavaScript Variables (var vs let vs const)
Tags: javascript, webdev, codenewbie
Published: 2021-02-19 20:51:46

If you are new to the world of JavaScript, then you might be thinking that why JavaScript uses different keywords to declare a simple variable. So in this blog, I am going to discuss all of this and clear all your doubts. 

In JavaScript, we use three main keywords to declare a variable. They are **"var"**, **"let"** and **"const"**. Let's discuss them one by one.

##What is a variable?
So variables are like containers or boxes where you can store data.
Now, if you come from a C, C++ or Java background, then you may be using **"int"**, **"double"**, **"string"** keywords to declare a variable. In these languages, the value stored in a variable depends on the type of the variable you declared.

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

But in JavaScript, the type of the variable depends on the data assigned to it. It means you can change the type of data stored in a variable anytime.

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

###var keyword
Previously, JavaScript uses the "**var**" keyword to declare a variable. There are some of the points that worth mentioning for the "**var**" keyword:

* We can declare the same variable multiple times using **"var"** in the current scope. It doesn't give any error.

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

* We can use a variable before declaring it using **"var"**. The main reason for it is JS uses something known as ***"Hoisting"***. ***Hoisting*** is JavaScript's default behaviour of moving all declarations to the top of the current scope. So if you think about how you can use a variable before it's even declared, it is because of hoisting. 

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

* **"var"** uses the functional scope. So we can access a variable anywhere inside the function where it is declared. So if you declare and initialize a variable inside a block using the same name, that will modify the variable outside of the block scope.

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


###let keyword
In ES6, JavaScript announced the **"let"** keyword. It also used to declare variables. There are some of the points that worth mentioning for the **"let"** keyword:
* We can't declare the same variable multiple times using let in the current scope.

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

* We can't use any variable before declaring it. In **"let"**, JavaScript doesn't use ***hoisting***. So, when you try to use a variable before declaration compiler finds the variable is not defined.

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

* **"let"** uses a blocked scope. It means we can define the same-named variables inside the different block scopes. Also, we can't access a variable outside of its block scope.

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

###const keyword
In ES6, JavaScript announced the **"const"** keyword. It also used to declare variables. But you can't change the value of a **"const"** variable. In the case of **"var"** and **"let"**, we can declare and initialize at different lines. But, using **"const"**, you have to initialize at the line of declaration. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjm2dgy6izeklsi9vdv3.png)

##Summary
Now the main question is when to use which keyword. So, if you want a variable whose value may be changed later in the program, then use **"var"** or **"let"**. If you declare a variable globally inside a function, use **"var"** and if you want to use it inside a blocked scope like if, loops etc., use **"let"**. And if you declare a variable whose value never changed in the program, use **"const"**. Ex: const PI = 3.14 etc.

If you like my blogs and want to connect with me, follow me on [LinkedIn](https://www.linkedin.com/in/debajit-mallick/) and [Twitter](https://twitter.com/MallickDebajit)