DEV Community

Cover image for JavaScript Variables (var vs let vs const)
Debajit Mallick
Debajit Mallick

Posted on

JavaScript Variables (var vs let vs const)

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

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

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

  • 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

  • "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

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

  • 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

  • "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

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

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 and Twitter

Discussion (0)