scope of a variable

Scope of a variable with examples in the best way JavaScript

by

Scope of a variable is its active state or lifetime in an application or program. It is the block of code in the entire program where a you can use, access, or modify a variable you declare.

In JavaScript, scope defines accessibility of variables, functions and objects. We can define scope in two ways.

Global Scope of a Variable

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

When you need to use a variable in multiple functions or throughout the program, we should define a variable with global scope. Global scope variables can be declared outside a function or on top of a program. You can access or modify these variables in any part or function of the program. However, this scope is for one file. To be used in any other project file, you must export the variable from where it is declared and import in the file where it should be used. Lets consider the example below for global declaration of a variable.

var cur_time;

function player_start(video_player){
 cur_time = 0;
}

function player_ends(video_player){
 cur_time = video_player.currentTime;
 player_events(video_player, cur_time);
}

In the example above, we have declared a cur_time variable on top of the program and outside functions. You can use this variable in any functions and throughout the program. This is a global scope variable. Moreover you can also export this variable to other files, by passing it as a parameter of a function as shown above. You can use the variable in a new file as shown below.

export function player_events(video_player, cur_time){
 cur_time = 30;
}

Another way to declare global variables is to declare then inside a function without the var keyword. For example,

    function player_starts() {
        cur_time = "0";
        console.log(cur_time);  
    }

    function player_ends(video_player) {
        cur_time = video_player.currentTime;
        console.log(cur_time);  
    };

    function player_events(video_player) {
        cur_time = 30;
        console.log(cur_time);  
    }
    
    player_starts(); // consoles 0
    player_ends(); // consoles current time of video player
    player_events(); // consoles 30

In the example above, variable cur_time is declared without var keyword inside player_starts(), that makes it a global variable automatically after we call player_starts() for the first time.

Local Scope of a Variable

Variables you declare inside a function, are only accessible within the function you declare them. For example function parameters, can be used in the specific function only. Similarly, if you declare a variable inside a function, it can only be accessible or modified in that function. If used outside that scope it throws undefined errors as its not readable. These are Local Scope Variables, that have a confined scope. This is useful for variables which hold sensitive data or one that should not be subject to much modification.

function player_start(video_player){
 var cur_time = 0;
}

function show_time(video_player){
 console.log(cur_time); // throws error that cur_time is not defined. 
}

The same example above, now we declare cur_time inside a function, but here it cannot be used in another function unless it is declared again.

Block Scope in JavaScript

Non-Strict Mode

Variables in JavaScript may not have a block scope when declared in the non-strict mode. These variables that you declare within a block have a scope to the entire function, and you can use them throughout the function. For example

function non_strict_block(){
    if (1 > 0)
    {
        var myVal = 22;

    }
    console.log(myVal);
}

Here, the variable myVal is declared and initialized inside the if loop. However, using non-strict mode, this variable can be accessible throughout the function as shown above.

Strict Mode

Using strict mode, if you don’t declare a variable, it will have local scope. This will also apply block scope. So when in strict mode, if you declare a variable inside braces, it will only be accessible within those braces.


  function non_strict_block(){
   "use strict";
    if (1 > 0)
    {
        var myVal = 22;

    }
    console.log(myVal); // throws error
}