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:

    Previous Tutorial Next Tutorial