Javascript introduced two more new ways of declaring variables, let and const keywords in its ES6 version. Before ES6 there was only one way of declaring variable, i.e. using var keyword.

In this article, I will explain the concepts of var, let, and const in details, as well as the differences among them.

The var keyword

In JavaScript, the variable declared with var keyword has function level scoping and can be reassigned. However, if the variable declared outside the function then its scope is global. Also, if a variable is declared but not initialized then it is assigned undefined by default.

Look at the following function to ease of understanding about var usage. If you try to use any of the variables outside of this function, you will get ReferenceError (because, variable declared with var has function level scoping, so accessing any variable outside of this function will produce an error).

function varUsage(){
    var age = 20;
    var sex; // declared but not assigned any value
    var adult = false;
    console.log(age); // output: 20
    console.log(sex); // output: undefined 
    console.log(adult); // output: false
    sex = "male"; // assigned
    console.log(sex); // output: male
    if (age > 18){
        adult = true; // reassigned
        var greetings = "congratulations!"
    }
    console.log(adult); // output: true
    console.log(greetings); // output: congratulations!
}

The let keyword

In JavaScript, the variable declared with let keyword has block level scoping (i.e. its scope is the nearest enclosing block) and can be reassigned. Also, if a variable is declared but not initialized then it is assigned undefined by default.

Look at the following function to ease of understanding about let usage. As variable declared with let has a block level scoping, so in this example the greetings variable's scope is if statement block. That's why it produces ReferenceError: greetings is not defined when tried to access outside of if block.

function letUsage(){
    let age = 20;
    let sex; // declared but not assigned any value
    let adult = false;
    console.log(age); // output: 20
    console.log(sex); // output: undefined
    console.log(adult); // output: false
    sex = "male"; // assigned
    console.log(sex); // output: male
    if (age > 18){
        adult = true; // reassigned
        let greetings = "congratulations!"
    }    
    console.log(adult); // output: true
    console.log(greetings); // ReferenceError: greetings is not defined}

The const keyword

In JavaScript, the variable declared with const keyword has block level scoping (i.e. its scope is the nearest enclosing block) and cannot be reassigned (i.e. the value cannot be changed once it is declared).

Look at the following function to ease of understanding about const usage. If a variable declared with const without initialization then it will produce a SyntaxError: Missing initializer in const. Also, variable cannot be reassigned otherwise it will produce a TypeError: Assignment to constant variable. Similar to let, it also produced ReferenceError: greetings is not defined while greetings variable is accessed outside of if block.

function constUsage(){
    const age = 20;
    const sex; // SyntaxError: Missing initializer in const declaration    const adult = false;
    console.log(age); // output: 20
    console.log(adult); // output: false
    if (age > 18){
        adult = true; // TypeError: Assignment to constant variable        const greetings = "congratulations!"
    }    
    console.log(adult); // output: true
    console.log(greetings); // ReferenceError: greetings is not defined}

Summary

In a nutshell, the key points to remember about var, let, and const are,

• var has function level scoping while let and const have block level scoping.
• var and let can be reassigned but const cannot be reassigned.
• In case of var and let, variables can be declared without initialization but in case of const variable has to be declared with initialization.
• In case of hoisting, variable declare with var do hoist but let or const do not hoist (well, the actual fact behind the scene is all three do hoist but var initialized with undefined while let or const do not initialized at all and hence, produced an error called Temporal Dead Zone).

By considering the differences which one should use? Hmm... It's depend on the situation. If you do not need to change the value use const, otherwise use let for block level scoping and use var for function level scoping. Yeah, you can use let as well for function level scoping. Personally I recommend to use const or let only, and forget about var totally. Because let can replace var quite nicely. Besides, var do hoist whereas let or const don't hoist. However, as long as you know the differences among them choice is yours.

Happy JavaScript coding!