Signup/Sign In

Difference between var and let in JavaScript

Posted in Programming   LAST UPDATED: OCTOBER 30, 2021

    In JavaScript variables were declared using the var keyword up until ECMAScript 6 (ES6). Before ES6, we used to declare variable using the var keyword where variables had global scope by default or in other words we can say the variables declared using the var keyword are available throughout the program and not just within a block.

    While on the other hand, if we want a variable to exist only within a block we can use the let keyword.

    Now let's see a few differences between variables declared using the keywords var and let.


    Global window object

    When we declare a variable using the var keyword, it is added to the global window object and can be accessed using the same whereas when we declare a variable using the let keyword it is not added to the global window object. Let's take an example and see,

    var one = "Hello";
    
    let two = "World";
    
    console.log(window.one);    \\ Hello is printed in console
    
    console.log(window.two);    \\ undefined

    As only global variables, which can be accessed throughout the program gets added to the global window object and as variables declared using the let keyword have block scope they are not added to the global window object.


    Scope of Variable

    As mentioned already, variables declared using the let keyword have a block scope i.e. they are available only within the code block where it is declared or initialised whereas variables declared using the var keyword have a program scope i.e. it is available throughout the program.

    Let's take an example,

    for(let i=0; i<5; i++)
    
    {
    
         console.log(i);    // 0 1 2 3 4
    
    }
    
    console.log(i);    // undefined as 'i' is not available outside the foor loop block

    In the code snippet above you can see how scope of variable declared using let keyword works.

    for(var i=0; i<5; i++)
    
    {
    
        console.log(i);    // 0 1 2 3 4
    
    }
    
    console.log(i);    // 5 is printed in console

    You will see many trick coding interview questions based on scope of variables now during JavaScript interviews. When used inside a function, both the variables types will be avialble within the scope of the function.


    Redeclaration of Variables

    When we declare a variable, we also provide value for it, which can obviously be changed. But not anymore, when we declare a variable using the let keyword we cannot change it's value once defined.

    The error can be seen when we are working in 'strict mode'.

    First, let's take an example with var keyword,

    'use strict'
    
    var one = "I am number 1";    // declared
    
    var one = "I am the new number 1";    // redeclared easily

    But this is not the case with let keyword,

    'use strict'
    
    let two = "I am number 2";    // declared
    
    let two = "I am new number 2";    // SyntaxError: two is already declared


    Conclusion

    So these are some differences between let and var keyword, used for variable declaration in JavaScript. The overall conclusion is, to justify scopes of variables you must use let instead of var for defining variables. And avoid using var keyword unless you need a global variable.

    You may also like:

    About the author:
    I like writing content about C/C++, DBMS, Java, Docker, general How-tos, Linux, PHP, Java, Go lang, Cloud, and Web development. I have 10 years of diverse experience in software development. Founder @ Studytonight
    Tags:ES6letvarJavaScript
    IF YOU LIKE IT, THEN SHARE IT
     

    RELATED POSTS