Today we are going to learn about the Scope, Hoisting, Call Stack and JavaScript as a Single Threaded language. After reading this article you have a basic understanding of these concepts. Lets get start.

What is Scope ?

A scope of variable tell us where it is accessible and where not .In other words , it is a set of rules which define the accessibility of the variable during the execution. There are two types of scopes

• Global Scope
• Local Scope

Global Scope

The moment we start writing the first line of our code in the file , we are working under the global scope . The statements which are defined or declared outside the curly braces is come under the global scope .

var a = 2;                        //Global Scope
function checkScope() {
  console.log(a);               //accessible
}
checkScope();
console.log(a);                 //accessible

Output

2
2

Local Scope

The scope which lies inside a function , loop or we can say the things which are inside the curly braces is come under the local scope. There are two types of local scope

• Function Scope
• Block Scope

Both types of local scope are approximately same , the time when left parenthesis (open Curly bracket)encountered the new scope is created and after passing the right parenthesis (closed Curly bracket)the scope is get overed.

var myName = "Cillian Murphy";                        //Global Scope
function checkScope() {    //Fucntion or Block Scope
      const age = 45;
      if (age > 20) {
        console.log(`Mr. ${myName} your age is ${age}`);
  }         
}
checkScope();

Output

Mr. Cillian Murphy your age is 45

Scope Chain

When we declare the variable , Javascript try find out its values in the current scope , if it it not found then it target its parent scope for the value and it keep doing this and the ultimate parent is window object , if it is unable to find the value yet it show an error.

Lexical Scope and Lexical Environment

Basically Lexical Scope means in the group of nested statements the most child statement have the access to all the properties of its parents. A lexical Environment is a data structure that holds an identifier-variable mapping.

const myName = "Jeff Keller";
function showMyData() {
  const age = 45;
  if (age < 50) {
     const sayHi = "Hello";
    console.log(`${sayHi} Mr. ${myName} this is your age : ${age}.`);
  }
}
showMyData();

Output

Hello Mr. Jeff Keller this is your age : 45.

Hoisting

It is a concept where we allow to access our variables , functions , class before its declaration in the code or it is a JavaScript mechanism to implement its code .

console.log(a);
var a = 2;
sayHello();
function sayHello() {
  console.log("Hello");
}

Output

undefined
Hello

Note : let and const keyword variables are show the reference error while var keyword variable show undefined because due to their scopes.

Call Stack

It is a mechanism for the interpreter to keep the track of the all functionality of the entire program . These functions are take place inside the stack and after complete their task they are pop out from the stack .

JavaScript is Single Threaded ?

Single threaded means it has a one stack and one memory heap so it execute the line of statements one by one . It cannot move forward until the last line of code is executed .This is like all statements are lie on thread and we have to execute them one by one .

Thanks for reading this article , I hope now these concepts are clear to you.