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.

/* In C/C++/Java variable declarations */
int a = 3;
float b = 3.5;

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.

// In JS variable declarations
var a = 3;      // Number Type 
a = "hello";    // String Type
var name = "John";

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.

    function fun() {
        var a = 3;
        var a = 3;
        console.log(a);
    }
  
    fun(); // 3
  

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

    function fun() {
        a = 3;
        console.log(a);
        var a;
    }
  
    fun(); // 3
  

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

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.

    function fun() {
        let a = 3;
        let b = 3;
        console.log(a);
    }
  
    fun();    // SyntaxError: Identifier 'a' has already declared
  

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

    function fun() {
        a = 3;
        console.log(a);
        let a;
    }
  
    fun(); // ReferenceError: a is not defined
  

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

    function fun() {
        let a = 3;
        console.log(a);
        if(true) {
            let a;
            console.log(a);
        }
        console.log(a);
    }
  
    fun(); 
    /*
     3 
     5 
     3
    */
  

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.

const a;
a = 4; 
console.log(a); // SyntaxError: Missing initializer in const declaration

const a = 3;
a = 4;
console.log(a); // TypeError: Assignment to constant variable

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 learn more about Software Enginnering and Frontend Development follow me on hashnode.