Open In App

Difference between var and let in JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

In the early days of JavaScript, there was only one way of declaring variables and that was using the var keyword. A variable declared with var is defined throughout the program. One of the issues with using the var keyword was redeclaring a variable inside a block will also redeclare the variable outside the block. 

With the introduction of ES6 in 2015 two more keywords, let and const came into the picture. var and let are both used for variable declaration in javascript but the difference between them is that var is function scoped and let is block scoped. Variable declared by let cannot be redeclared and must be declared before use whereas variables declared with var keyword are hoisted. 

An example will clarify the difference even better 

Example 1: Here we will see the use of var.

Javascript




<script>
    console.log(x);
    var x=5;
    console.log(x);
</script>


Output:

undefined
5 

Example 2:  Here we will see the use of let.

Javascript




<script>
    console.log(x);
    let x=5;
    console.log(x);
</script>


Output:

ReferenceError: Cannot access 'x' before initialization

 Code 1: Let’s see the code in JavaScript.

Javascript




<script>
    // calling x after definition
    var x = 5;
    document.write(x, "\n");
     
    // calling y after definition
    let y = 10;
    document.write(y, "\n");
     
    // calling var z before definition will return undefined
    document.write(z, "\n");
    var z = 2;
     
    // calling let a before definition will give error
    document.write(a);
    let a = 3;
</script>


Output:

 

Code 2: In the following code, clicking start will call a function that changes the color of the two headings every 0.5sec. The color of the first heading is stored in a var and the second one is declared by using let. Both of them are then accessed outside the function block. Var will work but the variable declared using let will show an error because let is block scoped. 

Javascript




<h1 id="var" style="color:black;">GeeksforGeeks</h1>
<h1 id="let" style="color:black;">GeeksforGeeks</h1>
<button id="btn" onclick="colour()">Start</button>
<!-- executing function on button click -->
 
<script type="text/javascript">
    function colour() {
     
        setInterval(function() {
     
            if (document.getElementById('var').style.color == 'black')
                var col1 = 'blue';
            else
                col1 = 'black';
     
            // setting value of color 1 through var
            if (document.getElementById('let').style.color == 'black') {
                let col2 = 'red';
            } else {
                col2 = 'black';
            }
     
            // setting value of color 2 through let
            document.getElementById('var').style.color = col1;
     
            document.getElementById('let').style.color = col2;
     
            // changing color of h1 in html
        }, 500);
     
    }
</script>


Output:

 

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples

Let us understand the differences in a tabular form:

 

var

let

1. The var is a keyword that is used to declare a variable The let is also a keyword that is used to declare a variable.
2.

Syntax -:

var name = value;

Syntax -:

let name = value;

3. The variables that are defined with var statement have function scope. The variables that are defined with let statement have block scope.
4. We can declare a variable again even if it has been defined previously in the same scope. We cannot declare a variable more than once if we defined that previously in the same scope.
5. Hoisting is allowed with var. Hoisting is not allowed with let.
6.

Example -:

var websitename = “geeksforgeeks”;

Example -:

 let x = 69;

7. var is an ECMAScript1 feature. let is a feature of ES6.
8. Its supported browsers are: Chrome, Internet Explorer, Microsoft Edge, Firefox, safari, opera Its supported browsers are -: Chrome49, Microsoft Edge12, firefox44 , safari11, opera36

We have an article on how to declare variables in different ways in JavaScript.



Last Updated : 30 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads