HomeContact UsPortfolio

SCOPE OF VARIABLES

Scope of Variables

Scope refers to the availability of variables and functions in certain parts of the code.

To work with JavaScript efficiently, one of the first things you need to understand is the concept of variable scope. The scope of a variable is controlled by the location of the variable declaration, and defines the part of the program where a particular variable is accessible. There are two types of scope in JavaScript. * Global Scope * Local Scope

Global Scope :

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

Example :

let a = 7;
function scope() {
   console.log(a); //Prints: 7;
   a = 10;
}
scope();
console.log(a); //Prints: 10;

In above example, variable ‘a’ is declared outside of the function so ‘a’ is a global variable and can be accessed inside any function. Changing value of global variable in any function will reflect throughout the program. Variables declared inside a function without any keyword also becomes global variables.

Local Scope :

Variables declared inside any function with keyword are called local variables. Local variables cannot be accessed or modified outside the function declaration. Local scope can be divided into function scope and block scope. Below example is for function scope.

Example :

function scope() {
   let a = 10;
}
scope();
console.log(a); //Prints: a is not defined

In above example, variable ‘a’ is declared inside a function so, it is a local variable.

Block Scope :

A block scope is the area within the curly braces.

Example :

function scope() {
  if (true) {
    var fruit1 = "apple"; //exist in function scope
    const fruit2 = "banana"; //exist in block scope
    let fruit3 = "strawberry"; //exist in block scope
  }
  console.log(fruit1); //Prints: apple
  console.log(fruit2); //Prints:  fruits2 is not defined
  console.log(fruit3); //Prints:  fruits3 is not defined
}
scope();

In above example, keywords let and const has block level scope and declared in block scope so, we cant access fruits2 and fruits3 variables outside block scope even there are in its function scope. But var keyword is different even though it is declared in block scope still we can access it outside of the block scope.

Lexical Scope :

Lexical scope means the children scope have the access to the variables defined in the parent scope. The children functions are lexically bound to the execution context of their parents.

Execution Context

In the javascript engine, the environment where the code is executed is called Execution Context. Whenever a javascript engine executes a code, the execution context will be created.

The Execution Context works in two phases :

  • Creation Phase
  • Execution Phase

Creation Phase

  • In the Creation Phase, the script gets executed first time and a Global Execution Context will be created along with Global Memory and Call Stack.
  • Global Memory is created to store all variable and function declarations. In this Creation Phase all variable are initialized as undefined and functions are declared.
  • A Call Stack will be created to keep track of the functions invocations and the Global Execution Context.

Execution Phase

  • In the Execution Phase, the javascript engine executes the code line by line, assigns values to its variables and starts executing the function calls.
  • Whenever a function call is made, the javascript engine creates a new Execution Context for that function called Function Execution Context which gets appended to the top of call stack and that function will have its own memory called local memory.
  • After execution, the function will be removed from the call stack
  • Let’s say we have a function which is nested with another function. When the main function(e.g. main()) is invoked that will be add to the call stack and after that the nested function (e.g. nested()) will also get invoked. Now, this nested function will be added above to the main function in the call stack. After execution, nested function will be deleted first from the call stack and then main function will also get removed from the call stack.

Example :

const main = () => {
    let a = 7;
    const nested = () => {
        console.log(a); // Prints: 7
    }
    nested() // This function will be add to the top of main function in call stack
}


main() // This main function will be add to the top of global execution in call stack
Execution Context