Skip to content
Related Articles

Related Articles

Difference between var and let in JavaScript

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 04 Jul, 2022

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. It can be said that a variable declared with var is defined throughout the program as compared to let. An example will clarify the difference even better 

Example of var:

Input:
console.log(x);
var x=5;
console.log(x);
Output:
undefined
5

 

Example of let:

Input:
console.log(x);
let x=5;
console.log(x);
Output:
Error

 

Let’s see code in JavaScript: Code #1: 

HTML




<html>
 
<body>
    <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>
</body>
 
</html>                           

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

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Var vs Let</title>
</head>
 
<body>
 
    <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>
</body>
 
</html>

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 -:

 varlet
1.The var is a keyword that is used to declare a variableThe 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 a function scope.The variables that are defined with let statement have a block scope.
4.We can declare a variable again even if it has been defined previously in the code.We cannot declare a variable more than once if we defined that previously
5.Hoisting is allowed with var.Hoisting does not work 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 , operaIts supported browsers are -: Chrome49, Microsoft Edge12, firefox44 , safari11, opera36

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!