Scope in JavaScript

Scope in JavaScript defines accessibility of variables, objects and functions.

There are two types of scope in JavaScript.

1. Global scope
2. Local scope

Global Scope

Variables declared outside of any function become global variables. Global variables can be accessed and modified from any function.

<script>

    var userName = "Bill";

    function modifyUserName() {
            userName = "Steve";
        };

    function showUserName() {
            alert(userName);
        };

    alert(userName); // display Bill
    
    modifyUserName();
    showUserName();// display Steve

</script>

In the above example, the variable userName becomes a global variable because it is declared outside of any function. A modifyUserName() function modifies userName as userName is a global variable and can be accessed inside any function. The same way, showUserName() function displays current value of userName variable. Changing value of global variable in any function will reflect throughout the program.

Please note that variables declared inside a function without var keyword also become global variables.

<script>

    function createUserName() {
        userName = "Bill";
    }

    function modifyUserName() {
        if(userName)
            userName = "Steve";
    };

    function showUserName() {
        alert(userName);  
    }
    
    createUserName();
    showUserName(); // Bill 

    modifyUserName();
    showUserName(); // Steve 

    
</script>

In the above example, variable userName is declared without var keyword inside createUserName(), so it becomes global variable automatically after calling createUserName() for the first time.

Local Scope

Variables declared inside any function with var keyword are called local variables. Local variables cannot be accessed or modified outside the function declaration.

<script>
    
    function createUserName() {
        var userName = "Bill";
    }

    function showUserName() {
        alert(userName);
    }

    createUserName();
    showUserName(); // throws error: userName is not defined

</script>

Function parameters are considered as local variables.

In the above example, userName is local to createUserName() function. It cannot be accessed in showUserName() function or any other functions. It will throw an error if you try to access a variable which is not in the local or global scope. Use try catch block for exception handling.

Some tips..

If local variable and global variable have same name then changing value of one variable does not affect on the value of another variable.

var userName = "Bill";

function ShowUserName()
{
    var userName = "Steve";

    alert(userName); // "Steve"
}

ShowUserName();

alert(userName); // Bill

JavaScript does not allow block level scope inside { }. For example, variables defined in if block can be accessed outside if block, inside a function.

Function NoBlockLevelScope(){
    
    if (1 > 0)
    {
        var myVar = 22;

    }

    alert(myVar);
}

NoBlockLevelScope();

Points to Remember :

1. JavaScript has global scope and local scope.
2. Variables declared and initialized outside any function become global variables.
3. Variables declared and initialized inside function becomes local variables to that function.
4. Variables declared without var keyword inside any function becomes global variables automatically.
5. Global variables can be accessed and modified anywhere in the program.
6. Local variables cannot be accessed outside the function declaration.
7. Global variable and local variable can have same name without affecting each other.
8. JavaScript does not allow block level scope inside { } brackets.