JavaScript var Keyword

    In ECMAScript 2015 two new JavaScript keywords were introduced let and const , to declare variables in JavaScript. Before it, we only had var keyword to declare variables for global and function scope (local scope). In this JavaScript tutorial, we will learn everything about the JavaScript var keyword.

    Var keyword in JavaScript

    The var keyword allows us to declare a variable. Example

    <script>
    
        var name; //variable declaration
        name ="Rahul";
        document.write(name);   // Rahul
    
    </script>

    When we only declare a variable using var and do not assign a value to it, by default the variable become undefined .

    <script>
    
        var game; //variable declaration
        document.write(game);  // undefined
    
    </script>

    Before we discuss var keyword further,  you need to know about global, function (local), and Block scopes present in JavaScript.

    Global Scope

    When variables are declared outside the function or globally they considered as Global Scoped variable or global variable. And they can be accessed anywhere in the program.

    <script>
        var name ="Rahul";
        function func()
        {
            document.write(name); //access name inside function
            document.write("<br>");
        }
        func();
        document.write(name); //accesing name outsside the function
    </script>

    Output

    Rahul
    Rahul

    In the above example, the name variable is the global scope variable because it is defined globally or the root of the main script. That's why we were able to access it globally or locally inside the function.

    Function Scope

    When a function is declared, all the code that resides in its body or between curly {....} brackets comes under a local scope or function scope. And the variable declared in that local scope is known as the local variable, which can only be accessed within the function scope.

    <script>
    
        function func()
    
        {
            var name ="Rahul";         // local variable 
            document.write(name);     //print Rahul
            document.write("<br>");
        }
    
        func();
        document.write(name);          //error
    </script>

    Block Scope

    Block scope concept introduced to JavaScript with let and const keywords that we will discuss in next upcoming tutorials. For now, you only need to know that a block scope is a scope that generated between curly brackets {....block scope.....} . Do not confuse the Block Scope with the function or local scope, it is a completely different concept in itself. A block Scope can be generated by statements like, if...else, loops, etc. In block scope, if a variable is declared inside the {...} bracket then it will be only available for that curly bracket. As the block scope was introduced for let and const keywords, it has no effect on var variables. The var variable only follows the rules of Global and function(local) scope.

    <script>
        var id= 20;
        if(id==20)
        {  //block global scope
            var name ="Rahul";
        }
        document.write("ID "+id+ " "+name)
    </script>

    Output

    ID 20 Rahul

    In the above example, we declared the name variable inside the Block Scope still we were able to print its value outside that block scope. This is because var declared variables do not follow the block scope concept.

    Redeclaring the variable

    When we redeclare a variable using var keyword, it simply declares a new variable for its respective scope.

    <script>
        var id= 20;
        var name="Ravi"; //declare global variable
        //name value is Ravi
    
        if(id==20)
        {
            var name ="Rahul"; //redeclare name
            //now name value is Rahul
        }
    
        function func()
        {
            var name ="Raj";// declare new local scope variable
        }
        func();
        document.write(name); // Rahul
    </script>

    Hoisting Variables

    Hoisting is a very unique feature of JavaScript, by far we are only accessing the value of var declared variable after declaring the variable. But hoisting variable allows us to access the variable before we declare it. When we declare a variable using the var keyword the hoisting feature of JavaScript, will automatically declare the variable at the top of the script.

    <script>
        document.write(game) // undefined
        var game = "fifa21";
    </script>

    The JavaScript hoisting feature will treat the above code as.

    <script>
       var game;
       document.write(game) // undefined
       game = "fifa21";
    </script>

    Summary

    • var keyword is used to declare variables in JavaScript.
    • var only follows the Global and local scope.
    • Block Scope has no effect on it.
    • The hoisting will declare the var variables at the top of the Script.

    People are also reading: