In this article, I am going to discuss some of the most important Js topics. Js is unlike any traditional language, It behaves slightly differently than C, C++, python, or any other programming language. In this article, I will try to simplify some of the js advance topics that will help you to understand the workings of js better.

✨Scope

Scope means where we can access a specific variable or function in our code.

let a = "a";
Here we can access variable a only, not b.

function temp(){
  // Here we can access variables a and b both.
  let b = "b";
}

// Here we can access variable a only, not b.

Now from the above example, it is clear that a variable can be accessed in some part of our code or in our complete code depending on its scope.

Scope is of 3 types:

Global Scope
Function Scope
Block Scope

1. Global Scope

Variables or functions that are not declared inside of any function or curly braces { } have global scope. We can access these variables anywhere in our program.

let a = "a";
// Here we can access variable a 

function temp(){
  // Here we can access variable a
}

// Here we can access variable a.

2.Function Scope

Variables or functions that are declared inside a function have function scope. We can access these variables only in the function in which they are declared, not in any other part of our code.

let a = "a";
// Here we can not access variable b.

function temp(){
  // Here we can access variables b.
  let b = "b";
}

// Here we can not access variable b.

3. Block Scope

Variables or functions that are declared with let and const keywords have block-level scope. We can access these variables only in the curly braces in which they are declared.

if(true){
    let a = 1;
    // Here we can access variable a.
}
// Here we can not access variable a.

But, Since var does not have block level scope. So If we declare a variable using the var keyword then we can access them even outside the block.

if(true){
    var a = 1;
    // Here we can access variable a.
}
// Here we can access variable a.

✨Scope Chain

When we execute a code, the JS engine will look for variable and function definitions in their own Execution Context. If no definition is found then it looks into the parent Execution Context, until it reaches the Global Execution Context or finds the correct definition. If it can not find it even in the Global Execution Context then it will return Reference Error. This way of looking for variable and function definition is known as Scope Chain. Js will always look into parent Execution Context but in child Execution Context.

let name = "global";
function outer() {
  console.log(name);
  function inner() {
    console.log(name); // Output global from global execution context.
  }
  inner();
}
outer();

✨Hoisting

Hoisting in JS is a phenomenon in which we can access variables and functions even before defining them. In Javascript, Code is executed in 2 phases, i.e., a) Memory Creation Phase and b) Code Execution Phase. In Memory Creation Phase, Js scan the code quickly and allocate memory to it. For variables declared with the var keyword, it assigns undefined to that variable, and for variables declared with let or const it assigns undefined but it is stored in a different memory location than the variables with var. So we can not access variables declared with let or const unless the value is assigned to them during the code execution phase. The phase from getting memory till the variable gets assigned some value is known as Temporal Dead Zone. Functions got memory during the Memory creation phase and literally, complete function code is stored.

Since all variables and functions already get their memory in the first phase, So when in 2nd phase, when JS starts executing our code line by line, It finds the required definition and we can access them even before defining them.

console.log(a)  //Output: undefined
temp();        //Output:  In temp function
var a = "a";
function temp(){
  console.log("In temp function")
}

Memory Creation.png

✨Call Stack

Js controls creation, execution, control, and deletion of Execution Context using call Stack. The call stack is basically a stack data structure that follows the Last In First Out (LIFO) principle. Call Stack tracks different Execution Contexts, whenever a new execution context is created, it got pushed in to call stack and after completion, it got pops out. And the execution of the next execution context starts. Global Execution Context is last at Call Stack. Execution context that is at top of Call Stack will only get executed.


let a = "a";

function temp1(){  
  let b = "b";
  function temp2(){
    let c = "c";
  }
}

✨Single Thread

JavaScript is a synchronous, Single Thread Language. Js has only one call stack. Whatever is at the top of the call stack will run first. With the help of the browser Web API's Javascript can behave like asynchronous and multi-threaded language But under the hood, it has just one call stack and it performs one operation at a time, line by line.

Kumar Shubham