Topics Covered

Scope in JavaScript
Single-threaded JavaScript
Call Stack
Hoisting

Scope

Scope of a variable or an expression is a rigion within a program where that variable or expression is visible an can be referenced .A variable which is not in the current scope is not available and cannot be used.

In Modern JavaScript there are following types of Scopes -

Global Scope
Module Scope
Local Scope
Block Scope ( Only in case of Let and Const and not for Var)

Global Scope

A variable or an expression that is globally scoped can be accessed anywhere within the program . A variable defined with var keyword and not inside any function is globally scoped . A variable defined with let and const keyword that are not inside any function,module and pair of curly braces are global variable .

Local Scope

A variable defined within a function is local variable and can be accessed only within that function. All the inner or child function can access variable defined in their outer or parent funtion but not vice versa.

Module Scope

A module is a group of function . A variable defined inside a module is molule scoped can be accessed only within that module .

Block Scope

Block Scope is new concept of JavaScript that was interduced in latest version of Js ES6 and is only applicable for variable defined with keyword let and const . A variable which is block scoped can only be accessd within that block . Here a block means simply a pair of curly braces.

Single-threaded JavaScript

JavaScript is single threaded language because it has only one call stack and one memory heap. So it executes code line by line in order and only after finishing one line of code it can proceed further .

Now the question is What is this call Stack ??

Call Stack

Well if you have read stacks in Data structure call stack works in the same way . You can think of it as a pile of plates object placed over one another and it works on the principle LAST IN FIRST OUT (LIFO). Similarly In a call stack javascript code and function pile up and after fininshing the execution of function on the top of the stack it goes away and next function start executing .

A call stack is a mechanisam for an interpreter that keeps tracks of which part of the program is executing ,what functions are called and nesting of function inside that function .

Let's understand with the help of an diagram

At first call stack is empty . Now code start executing and no function is called so the program is executing in main thread .
fun2 get call so the fun2 is now on the top of call stack and start executing in function execution context .
Another function inside fun2 get called now it will be placed on the top of the stack and so on.
As soon as the function on the top of the call stack finish its execution it goes away and the function below that start it execution .
When all the function call ends the control is back to global execution context .

Let's take and example for more clearance

var one = 2;  //Global Exection Context

function first() { 
  second();
  console.log("First function Ends Here")
}

function second() {
  var  two = one +10;
  third();
 console.log( "second function Ends Here")
}

function third() {
  console.log("third function Ends Here");
}

first();    //Function Exection Context

Hoisting

In JavaScript before execution of the code, javascript scans the whole code and all the variable ,function and classes are made available before execution of the code . This process is called hoisting . Hoisting in javascript works on mainly two concepts :

Variable Hoisting

All the variable are scanned and made undefined

Function Hoisting

Function declaration are scanned and made available for use . It allows function to be used before they are declared .

Now let's know some behind the scenes to understand the concept of Hoisting

Now that we have alreay read about the concept of execution context and call stack ,we know that everything in javascript is wrapped inside exexution context. As we know that this execution context there are two phase in which javascript code gets executed.

Memory Allocation Phase
Code Execution Phase

Memory Allocation Phase

In this phase of all the function ,variable are stored in key value pair . In case of variable only variable declaration are stored and their value is stored as undefined . But In case of functions whole function code is copid inside the memory block,And this is also the reason why we can use function before their declaration .And this is how hoisting takes place.

Let's Understand with the help of an Example

Console.log(num) // Returns undefined
Console.log(Square(5)); // Return 25 
function Square (n) {  //Whole function is copied inside memory block before execution 
    var res = n * n;
    return res;
}
var num = 5;   // Made undefined before execution of this line

LALITA GARG's Blog