Understanding JS code execution & call stack.

• Execution Context is the cerebrum🧠 of JS language.

To understand this, firstly we need to conclude JS run-time in a bigger picture 🖼️

NOTE: JavaScript mechanism is broadly divided into 2 phases.

✍️

• Execution Context is JS run time. This simply means during dynamic or execution time how JS engine behaves.

• By default, there is always a Global Execution Context whenever we write any JS program.

• Function creates its own Execution Context.

• If there is no function in our program then only Global Execution Context exists.

• We can also say EC is like a container and within that, we get all the global objects.

  To have a better understanding let's understand through code snippets.

let name = 'JS'

function myFunc(msg){
  return  console.log(`${name} is the best programming language!`);
}

myFunc(name);

Firstly, let's understand the above code through a diagram

Execution Context in JS

• Firstly compilation/ memory creation phase will start within which all the declaration & memory space allotment will take place.

compilation phase also known as memory creation phase

1. In this phase, JS skims through the entire program & allocates memory to the variables & functions.

2. As soon as it gets the variable it assigns the special value to it -> undefined.

3. name variable and func method will be declared in the global scope undefined value will be assigned to name variables.

4. And the entire code of the myFunc function will be assigned to myFunc method.

NOTE: The time when the variable is declared with either let or const but no value is assigned other than undefined & can't be accessed. Therefore, this zone is known as temporal dead zone.

---

Runtime/Code Execution phase :

1. During this phase utilization of memory, assignment, and program execution takes place.

2. Values get assigned to the placeholder (variable) in this phase.

3. Function invocation creates a new execution context (brand new one). And again all the memory creation and code execution phase happens for that particular function.

4. JS value will be assigned to a variable name. In the last line of our program function invocation is happening. Since, function invocation creates a new execution context. again all the memory creation and code execution phase happens for myFunc function.

5. Now, control will go to myFunc function and the value of JS will be passed to the name argument & it will be collected by the parameter msg.

6. return keyword will pass the control of the program to the last line of the program where function invocation takes place with the value passed in the console.log.

7. Once the control goes away from the function. The Execution Context of myFunc function will be ended.

8. Once our entire program is skimmed the global execution context also ends.