This article focuses on :

• Scope
• Single Thread
• Call Stack
• Hoisting

Scope:

Scope is a very important topic in JavaScript. This helps us to write good quality and clean code. Scope is of 3 types:

1. Global
2. Function
3. Block

1. Global:

This means you have defined variable outside any function or block. these variables can be accessed by anyone.

var firstnum=10

function shownum(){
console.log(`the num is ${firstnum}`)
}

Output is 10

2. Function:

In this scope of the variable is inside the function i.e. the variable is defined in the function and if we try to access it outside the function we will not able to access it.

function shownum(){
  var firstnum=10;
  console.log(firstnum)
}

console.log(firstnum)

Output is 10 and Undefined

3. Block:

this is mainly for let and const variables. Variable that are initialized as let or const and are present inside a block cannot be access outside the block. It will give an error.

{
  var firstnum=10;
}

console.log(firstnum)

Output is 10

{
  let firstnum=10;
}

console.log(firstnum)

Output is Undefined

{
  const firstnum=10;
}

console.log(firstnum)

Output is undefined

lexical scoping:

a variable defined outside a function, can be accessed by another function after variable declaration.

It is a complicated way of saying that declare all the variable inside or outside the function before calling the function.

const x=10;

function f1(){
  console.log(x);
  console.log(y)
}
y=5

f1()

output of this will be 10 5

However if we define in this manner:

const x=10;

function f1(){
  console.log(x);
  console.log(y)
}

f1()

const y=5

output will be 5 and " y is not defined"

Scope Chaining:

Scope chaining in simple words means if there are 2 nested function, the innermost function will first check the variable inside it, if it is not found it will search outside and if it is still not found it will search in the global scope. it forms a chain

Single Thread:

Javascript is a Single thread language.

Means the code is executed line by line, means the first line is executed then it goes to second and then to third. Order is maintained no matter whatsoever.

Call Stack:

As per MDN

  /*A call stack is a mechanism for an interpreter
 (like the JavaScript interpreter in a web browser)
 to keep track of its place in a script that calls multiple functions
 — what function is currently being run and what functions
 are called from within that function, etc.*/

In simple language, What is going on

Image you have an event at hour home and lot of guest are coming and going, you need to keep a track of which guest has come ( which variable or function is initialized) which guest has gone ( which function has been executed) and who you are currently attending to ( which function is currently running).

When a guest comes you attend that guest, if that guest brings someone with them you attend them also at the same time, one you have spent time with them you move on the next one.

Javascript reads the code line by line when it reaches a function it reads that and adds it to a stack, if it has a nested function it reads that also and adds it to the stack. Once that function is completed it removes it from the stack and then moves onto next one.

Hoisting

Javascript allows writing function, variables, classes usage before they are are declared.

Function/Class hoisting :

addtwoNumbers();

function addtwoNumbers(){
  return 3+2
}

Output will be 5

In this case we are calling add function even before declaring this function this is a feature of javascript as it reads each line one by one and the initializes them.