JavaScript – Difference between Var, Let, and Const Keyword

Want to know the difference between JavaScript var, let, and const keyword? Keep reading this article, we will discuss in details, how and when to use JavaScript Let, Var, and Const Keywords while doing programming.

Understanding JavaScript Var, Let, and Const

Now, we will see in details how to use JavaScript Var, Let and Const keyword with example, syntax everything.

There are three ways we can declare variables in JavaScript. We can use keywords like var, let, and const to declare a variable in JavaScript like below:

• var laptop=’HP Laptop’
• let price=80000
• const discount=’20%’

Before ES6 (ES2015), we have only var to declare variables in JavaScript. But in ES6, we also can use let and const to declare variables in JavaScript.

Var

Let us see how to use var to create variables in JavaScript.

Syntax:

var variablename =value;

Example:

• var name=’Bijay’;
• var isNewProduct=true;
• var discout=5.5 etc.

While declaring a variable, to understand the scope is necessary. Like if we declare a JavaScript variable, in what scope the variable will be accessible.

When you declare a variable using var, then the scope will be either global or function scope.

If you declare a variable within a function, then the variable will be accessible anywhere within the function block.

If you declare a variable out side of a function block, then it will be available globally to use. In this case, the variable scope will be global.

Function Scope:

Let us declare a JavaScript function.

function sayHello()
{    
    var name='bijay';
    for (var i = 0; i < 2; i++) {
        console.log(name);
        console.log(i);
      }
      console.log(i); // This will print 2
}

sayHello();

Here you can see I declare a variable as name in a function and that variable we can access inside the for loop, because the for loop is inside the function.

At the same time, the variable i, that is declared inside the for loop, and is accessible inside the for loop, as well as outside the for loop. Because the console.log is inside the function.

Output:

You can see the output looks like below:

Global Scope:

Now, let us see how we can create a JavaScript variable in the global scope and how we can access the variable.

Here is the example,

var name='bijay';
function sayHello()
{    
    console.log(name);
    for (var i = 0; i < 2; i++) {
        console.log(name);        
      }      
}
console.log(name);
sayHello();
console.log(name);

You can in the example, I have created a variable as name (var name=’bijay’;).
The variable is declared outside the function, so it is a global variable and can be accessed anywhere.
I have accessed the variable inside the function as well as outside the function.

You can see the output.

Let

We can also use let keyword to create a variable in JavaScript. This is the preferred approach to declaring variables in JavaScript.

The benefit of using let keyword is the scope. let is context scope. The variable will be accessible on the scope where it is declared.

The variable will be available inside the curly braces inside which it is defined.

Syntax:

let variablename = value;

Example:

let name = 'Bijay'

Now, let us see how it works.

function sayHello()
{   
    let name='Bijay';
    console.log(name);
    for (let i = 0; i < 2; i++) {
        console.log(name);     
      }
      console.log(i);
}
sayHello();

Now, you can see the name is available inside the for loop also.

But when I tried to access the let i variable, outside the for loop, it gave error as:

Uncaught ReferenceError: i is not defined
at sayHello (jskeyword.js:9)
at jskeyword.js:11

This is how we can use the let keyword to declare a variable in JavaScript.

Const

Now, let us see how to use the const keyword to create a constant variable in JavaScript.

We can use the const keyword similar to let keyword. It is also block scoped. But once it is assigned we can not reassign it.

Syntax:

const variablename = value;

Example:

const name= 'Bijay';

Now, let us see how it works:

function sayHello()
{   
    const name='Bijay';
    name='Sahoo';
    console.log(name);    
}
sayHello();

Here, I have declared a const variable as name.

When I tried to assign some value to the constant variable, then it throws the error as:

jskeyword.js:5 Uncaught TypeError: Assignment to constant variable.
at sayHello (jskeyword.js:5)
at jskeyword.js:8

Because we cannot reassign value to a constant variable in JavaScript.

You can see the output like below:

Note: If you have declared a const array type in JavaScript, then you can add items to the array.

Difference between JavaScript Var, Let and Const

By this time, we got an understanding on how to use JavaScript var, let, and const keyword.

Let us check a few different between these 3.

• let and const are context scope or block scope (within curly brackets) whereas var is not as discussed in the above examples. var is a function and global scope.
• The variable that you have created using the var keyword can be redeclared, reassigned, and updated. But the variable that you have created using the let keyword, can not be redeclared to reassign a value. If you declare a variable using const keyword, then you can not reassign a value to it.

Example:

function sayHello()
{   
    const name='Bijay';
    const name='Sahoo';
    console.log(name);    
}
sayHello();

It will give the error in the below line:

const name=’Sahoo’;

Uncaught SyntaxError: Identifier ‘name’ has already been declared

But if you declared with var then it will not give an error.

• Another difference is you can declare a variable without initializing it using the let and var keyword, But const must be initialized while declaring the variable.

Best Practices

Now, the question is whether we should use var, let or const.

You can use const if you dont want to reassign it.

If you want to reassign a value to a variable, then better to use the let keyword to declare the variable.

Use of let or const is the best practices in JavaScript programming.

You may like the following tutorials:

• tabulator js tutorial
• How to call a javascript function when a checkbox is checked unchecked
• How to design an HTML form quickly
• How to handle radio button checked and unchecked events using JavaScript and jQuery
• Dropdown selected change event in jQuery Example
• Run JavaScript after page loaded completely using jQuery

Conclusion

It is always a question of which keyword should we use to create a variable in JavaScript. Here we learned how to use JavaScript var, let, and const keyword to declare a variable in JavaScript.

Also, we discussed the difference between var, let, and const keyword in JavaScript.