Hello Everyone!
JavaScript is the most hated as well as most loved and popular programming language in the world.
The reason for the hate is because most people don't understand the underlying beauty of JavaScript.
In this series of posts we will explore:
- How JavaScript works behind the scene?
- What is Execution Context?
- What is Call Stack?
- What is Hoisting in JavaScript?
- What is Event Loop?
- The "this" keyword?
And much more...
I wil keep updating this post with further parts. Now let's dive in.
The Execution Context
Everything in JavaScript happens inside an Execution Context. This Execution Context works in 2 phases.
Both phases are known by multiple names.
- Declaration Phase || Memory Allocation Phase || Creation Phase
- Execution Phase || Implementation Phase
1 Declaration Phase
In this phase JavaScript scans through the entire code and allocates memory to the variables and functions.
Variables are initialized with Undefined as value.
That's it. This phase don't care about executing the code. It just initializes all the variables with undefined.
2 Execution Phase
In this phase Undefined value of variables are replaced by the actual value.
For all the function calls (invocation) a new Function Execution Context (FEC) is created inside the Global Execution Context (GEC is the main parent execution context).
And this FEC will again follow the entire 2 phase process of execution context.
My handwritten visual notes
Every execution context (global OR function) maintains a memory. For GEC it is the Global Memory and for FEC it is the local memory.
First JavaScript looks in the local memory for a variable if not found then it looks for it in the global memory.
Here are my handwritten visual notes.
I hope these will help.
In part 2 of this series we will discuss about how JS manages all these nested Function Execution Context. The Call Stack.
If you enjoyed it or found useful, please consider joining my weekly Newsletter: https://www.getrevue.co/profile/8020lessons
Top comments (0)