var, let, and const in javaScript

In JavaScript, variables can be declared using three different methods:

var
let
const

In this article, we will discuss the differences between these three ways of creating variables.

Variables declared with var and const are scoped to the immediate function body. Variables declared with the var keyword are hoisted. Hoisting means that the variable can be accessed in their enclosing scope even before they are declared. Variables declared with the let keyword are block-scoped, which means the variables will have scope to the immediate enclosing block.

Issues with var for Variable Declaration One of the issues is that the variables declared with the var keyword can be re-declared or updated in the same scope. This could lead to a serious problem if we declare another variable with the same name in the same scope; the new value will replace the old one. Check out the following code-snippet for illustration:

var name ="sivabharathy";
var name= "gotocva";
console.log(name); // output gotocva
var name="siva";
console.log(name); // output siva

Another issue with the var keyword is that if you declare a variable without the keyword var, then that variable will have global scope. To get a better understanding, consider the following code:

for(x = 0; x < array.length; x++){  //index has a global scope
   //code
}

In the above code snippet, the JavaScript for loop will create variable x in the global scope. If you would create a new variable with the same name x and use it somewhere else in the program, then that new variable’s value will get overwritten.

let is Block Scoped

The let keyword should be used in situations where you want to declare a variable that should be restricted to the block in which it is restricted. Also, variables declared with the let keyword cannot be updated or re-declared. Here is an example of how to use let to declare variables in JavaScript:

function func() {
    let x = 10; 
 
    if(x === 10) {
        let y = 20; 
 
        console.log(x); //Output 10
        console.log(y); //Output 20
    }
     
    console.log(x); // Output 10
    console.log(y); // ’undefined'
}
func();

Note that the variable y declared with the let keyword is not accessible beyond the if block in which it is declared. If we would have declared it with the var keyword, then it would have been available, because var has global scope within a function. The following code snippet will help you to better understand this train of thought:

function func() {
    console.log(x);     //Output 'undefined'
    console.log(y);     //Error - "Uncaught ReferenceError: y is not defined"
     
    var x = 10;
    let y = 20;
}
 
func();

Another thing to consider is that let cannot be used before its declaration. If you do so, it will result in a ReferenceError.

The const Keyword in JavaScript

The const keyword follows the same rules as the let keyword. The only difference with const is that const is used to define only constant values in JavaScript programs.

const PI = 3.14;
 
PI = 3.141; // Uncaught TypeError: Assignment to constant variable.

const Declarations are Block Scoped The scoping principles of const are the same as that of the let keyword. Like let, the variables declared with the const keyword will also have scope restricted to the block in which they are declared.

Some important pointers for const include:

const declares a variable with a constant value. Use the const keyword if the variable that you are declaring should not be allowed to be reassigned in the future.

let is Block Scoped​

The const Keyword in JavaScript​

let is Block Scoped

The const Keyword in JavaScript