Tech Junkie Blog: JavaScript Basics : Global Scope VS. Local Scope And Function Hoisting

Friday, March 31, 2017

JavaScript Basics : Global Scope VS. Local Scope And Function Hoisting

In JavaScript anything defined outside of a function is considered a global scope while anything that's defined inside a function is called a variable scope (local or function scope) meaning it exists inside the lifetime of the function.  Let's use code to demonstrate this point


var streetFighter = "Ryu";

function displayFighter()
{
    var streetFighter = "Ken";

    console.log(streetFighter);
}

displayFighter();


So which street fighter will win? Would it be Ryu at the global level or Ken at the local scope level? Let's go to the console to find out!












Ken is the winner!  In JavaScript the local variable gets the precedence over the global variable if it's the same name.

The var keyword is used to distinguish that the variable is a local variable instead of the global variable.  Let's see what happens if we don't use the var keyword in this code example


globalVariable = "global";

function displayGlobalVariable()
{
    globalVariable = "local";

    console.log(globalVariable);
}

displayGlobalVariable();


Do you think the word local or global will displayed? Let's run it and see what happens.








That's right without knowing it, you've changed the global variable if you don't use the var keyword.

One final concept about JavaScript scope that gives backend developers a lot of problems is the concept of function hoisting.  As the name implied all the variables within the function is hoisted at the top of function.  There are no concept of a block scope variable.  A variable inside a for loop has the same scope as the variable outside of the variable.  Let's use code to demonstrate this concept.


var globalVariable = "global";

function displayGlobalVariable()
{
    console.log("globalVariable: " + globalVariable);

    var globalVariable = "local";

    console.log("globalVariable: " + globalVariable);

}

displayGlobalVariable();

It's surprising that the first console.log statement  shows the globalVariable as being undefined.  That's because there's a local variable with the same name and it hasn't been declared yet.  So it is undefined.  But on the second console.log the globalVariable is defined as "local", that's because the globalVariable variable is defined in the function and is hoisted to the top of the function taking over the globalVariable at the global scope.  It's as if the globalVariable was never defined when operating inside of the function.

Now let's see what happens when we use variables inside an if statement and for statement


var globalVariable = "global";

function displayGlobalVariable()
{
    var a = "top of function";

    if(typeof a == "string")
    {
        var b = "inside if";

        for(var c=0; c < 7; c++)
        {
            console.log(c);
        }
    }

    console.log(a);
    console.log(b);
    console.log(c);

}

displayGlobalVariable();


Let's look at the output.

















As you can see all three variables are accessible throughout the function even the for loop variable "c"!.  That is weird indeed, it's something you have to think about when programming in JavaScript.  One way to minimize this confusion is the declare all the variables at once at the top of the function.

No comments:

Post a Comment