Skip to content

Commit 8968057

Browse files
Added JavaScript execution context and strict mode documentation
1 parent fce7529 commit 8968057

4 files changed

Lines changed: 78 additions & 0 deletions

File tree

File renamed without changes.
File renamed without changes.

04_Execution_Context.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Episode 1 : Execution Context
2+
3+
### Everything in JS happens inside the **execution context.**
4+
5+
Assume execution context to be a big box/container where everything takes place(whole javascript code is executed).
6+
7+
It has 2 components in it:
8+
9+
<li> <strong>Memory : </strong>The place where all the variables and functions are stored as (key:value) pairs. Memory component is also known as <em>variable environment</em>.
10+
<li> <strong>Code : </strong>The place where code is executed one line at a time. Code component is also known as <em>Thread of Execution</em>
11+
12+
<br>
13+
14+
**NOTE:**
15+
_Javascript is not possible without this beautiful execution context._
16+
17+
### JS is a **synchronous single-threaded language**.
18+
19+
<li> By single threaded, we mean JS can only run 1 command at a time
20+
<li> By synchronous single threaded, we mean it can run 1 command at a time, <em>in a specific order</em>
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# Episode 2 : Execution & Call Stack
2+
3+
**What happens when we run a js program?**
4+
5+
Everytime we run a program, an execution context is created.
6+
7+
```javascript
8+
var n = 2;
9+
10+
function square(num) {
11+
var ans = num * num;
12+
return ans;
13+
}
14+
15+
var square2 = square(n);
16+
var square4 = square(4);
17+
```
18+
19+
Now first, for this entire code a <strong>Global</strong> execution context is created.
20+
21+
So, this execution context is created in 2 phases:
22+
23+
1. **CREATION PHASE / MEMORY CREATION PHASE**
24+
2. **CODE EXECUTION PHASE**
25+
26+
## In the first phase (memory creation)
27+
28+
Here JS will allocate memory to all the variables and functions whenever they are encounterd while running whole js program line by line. In case of variables, it stores a special value called _undefined_, and in case of functions it literally stores the whole code of the function inside this memory space.
29+
30+
- Memory is allocated to variables and functions.
31+
- For variable name(which is key) it assigns a value of <strong>undefined</strong>
32+
- For the function name(which is key) it assigns the entire function code as value.
33+
34+
```javascript
35+
n:undefined
36+
square:{...entire-code...}
37+
square2:undefined
38+
square4:undefined
39+
40+
```
41+
42+
## In the second phase (code execution)
43+
44+
- The javascript, once again runs through the whole js program line by line and executes the code now. This is the point when all these functions and every calculation in the program is done.
45+
- The variable name is replaced with its actual assigned value from code. So now `n:2`
46+
- Skips over function code as there is nothing to assign there. Functions are like a mini program in the javascript.
47+
- We encounter a function call in `square2`. So, whenever a new function is envoked, a mini program is envoked. So altogether a brand new local EC is created inside the code part of global EC and this will have the same 2 components: Memory and Code and again 2 phases will be involved.
48+
- In the local EC, `ans` and `num` are both `undefined` (in first phase). Then, the `n` value in global EC is passed to num, replacing `undefined`. `num` is the parameter and `n` is the argument.
49+
- `ans = num*num` (calculated in code part of local EC and returned) replaces `undefined` in local EC (memory part) and the final value is returned from local and is assigned to `square2` var in global.
50+
After returning, local EC is removed form global EC and control goes back to global.
51+
- One more function call is met. Same thing happens again here.
52+
Once `square4` value is replaced from `undefined` to `16`, global EC will also be deleted.
53+
54+
To manage all these EC, a **call stack** is created. Everytime code is run, the EC is pushed in. So first global EC is pushed. Then e1 EC(for `square2`) is pushed, and then after value returned, is popped. Similarly e2 EC(for `square4`) is pushed, and then popped and finally Global is also popped and stack is empty.
55+
56+
> Call Stack maintains the order of execution of execution contexts
57+
58+
#### Call stack also known as Execution control stack, program stack, control stack, runtime stack and machine stack

0 commit comments

Comments
 (0)