You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: notes/season-1/lecture-02.md
+14-11
Original file line number
Diff line number
Diff line change
@@ -1,21 +1,24 @@
1
1
# Episode 2 : How JS is executed & Call Stack
2
2
3
-
* When a JS program is ran, a **global execution context** is created.
3
+
- When a JS program is ran, a **global execution context** is created.
4
4
5
-
* The execution context is created in two phases.
6
-
* Memory creation phase - JS will allocate memory to variables and functions.
7
-
* Code execution phase
5
+
- The execution context is created in two phases.
6
+
7
+
- Memory creation phase - JS will allocate memory to variables and functions.
8
+
- Code execution phase
9
+
10
+
- Let's consider the below example and its code execution steps:
8
11
9
-
* Let's consider the below example and its code execution steps:
10
12
```js
11
13
var n =2;
12
14
functionsquare(num) {
13
-
var ans = num * num;
14
-
return ans;
15
+
var ans = num * num;
16
+
return ans;
15
17
}
16
18
var square2 =square(n);
17
19
var square4 =square(4);
18
20
```
21
+
19
22
The very **first** thing which JS does is **memory creation phase**, so it goes to line one of above code snippet, and **allocates a memory space** for variable **'n'** and then goes to line two, and **allocates a memory space** for **function 'square'**. When allocating memory **for n it stores 'undefined'**, a special value for 'n'. **For 'square', it stores the whole code of the function inside its memory space.** Then, as square2 and square4 are variables as well, it allocates memory and stores 'undefined' for them, and this is the end of first phase i.e. memory creation phase.
20
23
21
24
So O/P will look something like
@@ -24,7 +27,7 @@ So O/P will look something like
24
27
25
28
Now, in **2nd phase** i.e. code execution phase, it starts going through the whole code line by line. As it encounters var n = 2, it assigns 2 to 'n'. Until now, the value of 'n' was undefined. For function, there is nothing to execute. As these lines were already dealt with in memory creation phase.
26
29
27
-
Coming to line 6 i.e. **var square2 = square(n)**, here **functions are a bit different than any other language. A new execution context is created altogether.** Again in this new execution context, in memory creation phase, we allocate memory to num and ans the two variables. And undefined is placed in them. Now, in code execution phase of this execution context, first 2 is assigned to num. Then var ans = num * num will store 4 in ans. After that, return ans returns the control of program back to where this function was invoked from.
30
+
Coming to line 6 i.e. **var square2 = square(n)**, here **functions are a bit different than any other language. A new execution context is created altogether.** Again in this new execution context, in memory creation phase, we allocate memory to num and ans the two variables. And undefined is placed in them. Now, in code execution phase of this execution context, first 2 is assigned to num. Then var ans = num \* num will store 4 in ans. After that, return ans returns the control of program back to where this function was invoked from.
* Javascript manages code execution context creation and deletion with the the help of **Call Stack**.
40
+
- Javascript manages code execution context creation and deletion with the the help of **Call Stack**.
38
41
39
-
* Call Stack is a mechanism to keep track of its place in script that calls multiple function.
42
+
- Call Stack is a mechanism to keep track of its place in script that calls multiple function.
40
43
41
-
* Call Stack maintains the order of execution of execution contexts. It is also known as Program Stack, Control Stack, Runtime stack, Machine Stack, Execution context stack.
44
+
- Call Stack maintains the order of execution of execution contexts. It is also known as Program Stack, Control Stack, Runtime stack, Machine Stack, Execution context stack.
Copy file name to clipboardExpand all lines: notes/season-1/lecture-03.md
+12-10
Original file line number
Diff line number
Diff line change
@@ -1,37 +1,39 @@
1
1
# Episode 3 : Hoisting in JavaScript (variables & functions)
2
2
3
-
* Let's observe the below code and it's explaination:
3
+
- Let's observe the below code and it's explaination:
4
+
4
5
```js
5
6
getName(); // Namaste Javascript
6
7
console.log(x); // undefined
7
8
var x =7;
8
9
functiongetName() {
9
-
console.log("Namaste Javascript");
10
+
console.log("Namaste Javascript");
10
11
}
11
12
```
12
13
13
-
* It should have been an outright error in many other languages, as it is not possible to even access something which is not even created (defined) yet But in JS, We know that in memory creation phase it assigns undefined and puts the content of function to function's memory. And in execution, it then executes whatever is asked. Here, as execution goes line by line and not after compiling, it could only print undefined and nothing else. This phenomenon, is not an error. However, if we remove var x = 7; then it gives error. Uncaught ReferenceError: x is not defined
14
+
- It should have been an outright error in many other languages, as it is not possible to even access something which is not even created (defined) yet But in JS, We know that in memory creation phase it assigns undefined and puts the content of function to function's memory. And in execution, it then executes whatever is asked. Here, as execution goes line by line and not after compiling, it could only print undefined and nothing else. This phenomenon, is not an error. However, if we remove var x = 7; then it gives error. Uncaught ReferenceError: x is not defined
14
15
15
-
***Hoisting** is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting error and this is happening due to the 1st phase (memory creation phase) of the Execution Context.
16
+
-**Hoisting** is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting error and this is happening due to the 1st phase (memory creation phase) of the Execution Context.
16
17
17
-
* So in previous lecture, we learnt that execution context gets created in two phase, so even before code execution, memory is created so in case of variable, it will be initialized as undefined while in case of function the whole function code is placed in the memory. Example:
18
+
- So in previous lecture, we learnt that execution context gets created in two phase, so even before code execution, memory is created so in case of variable, it will be initialized as undefined while in case of function the whole function code is placed in the memory. Example:
18
19
19
20
```js
20
21
getName(); // Namaste JavaScript
21
22
console.log(x); // Uncaught Reference: x is not defined.
22
23
console.log(getName); // f getName(){ console.log("Namaste JavaScript); }
23
-
functiongetName(){
24
-
console.log("Namaste JavaScript");
24
+
functiongetName(){
25
+
console.log("Namaste JavaScript");
25
26
}
26
27
```
27
28
28
-
* Now let's observe a different example and try to understand the output.
29
+
- Now let's observe a different example and try to understand the output.
30
+
29
31
```js
30
32
getName(); // Uncaught TypeError: getName is not a function
31
33
console.log(getName);
32
34
vargetName=function () {
33
-
console.log("Namaste JavaScript");
34
-
}
35
+
console.log("Namaste JavaScript");
36
+
};
35
37
// The code won't execute as the first line itself throws an TypeError.
Copy file name to clipboardExpand all lines: notes/season-1/lecture-04.md
+8-8
Original file line number
Diff line number
Diff line change
@@ -27,27 +27,27 @@ Outputs:
27
27
28
28
## Code Flow in terms of Execution Context
29
29
30
-
* The Global Execution Context (GEC) is created (the big box with Memory and Code subparts). Also GEC is pushed into Call Stack
30
+
- The Global Execution Context (GEC) is created (the big box with Memory and Code subparts). Also GEC is pushed into Call Stack
31
31
32
32
> Call Stack : GEC
33
33
34
-
* In first phase of GEC (memory phase), variable x:undefined and a and b have their entire function code as value initialized
34
+
- In first phase of GEC (memory phase), variable x:undefined and a and b have their entire function code as value initialized
35
35
36
-
* In second phase of GEC (execution phase), when the function is called, a new local Execution Context is created. After x = 1 assigned to GEC x, a() is called. So local EC for a is made inside code part of GEC.
36
+
- In second phase of GEC (execution phase), when the function is called, a new local Execution Context is created. After x = 1 assigned to GEC x, a() is called. So local EC for a is made inside code part of GEC.
37
37
38
38
> Call Stack: [GEC, a()]
39
39
40
-
* For local EC, a totally different x variable assigned undefined(x inside a()) in phase 1 , and in phase 2 it is assigned 10 and printed in console log. After printing, no more commands to run, so a() local EC is removed from both GEC and from Call stack
40
+
- For local EC, a totally different x variable assigned undefined(x inside a()) in phase 1 , and in phase 2 it is assigned 10 and printed in console log. After printing, no more commands to run, so a() local EC is removed from both GEC and from Call stack
41
41
42
42
> Call Stack: GEC
43
43
44
-
* Cursor goes back to b() function call. Same steps repeat.
44
+
- Cursor goes back to b() function call. Same steps repeat.
45
45
46
46
> Call Stack :[GEC, b()] -> GEC (after printing yet another totally different x value as 100 in console log)
47
47
48
-
* Finally GEC is deleted and also removed from call stack. Program ends.
48
+
- Finally GEC is deleted and also removed from call stack. Program ends.
* The shortest JS program is empty file. Because even then, JS engine does a lot of things. As always, even in this case, it creates the GEC which has memory space and the execution context.
3
+
- The shortest JS program is empty file. Because even then, JS engine does a lot of things. As always, even in this case, it creates the GEC which has memory space and the execution context.
4
4
5
-
* JS engine creates something known as '**window**'. It is an object, which is created in the global space. It contains lots of functions and variables. These functions and variables can be accessed from anywhere in the program. JS engine also creates a **this** keyword, which points to the **window object** at the global level. So, in summary, along with GEC, a global object (window) and a this variable are created.
5
+
- JS engine creates something known as '**window**'. It is an object, which is created in the global space. It contains lots of functions and variables. These functions and variables can be accessed from anywhere in the program. JS engine also creates a **this** keyword, which points to the **window object** at the global level. So, in summary, along with GEC, a global object (window) and a this variable are created.
6
6
7
-
* In different engines, the name of global object changes. Window in browsers, but in nodeJS it is called something else. At global level, this === window
7
+
- In different engines, the name of global object changes. Window in browsers, but in nodeJS it is called something else. At global level, this === window
8
8
9
-
* If we create any variable in the global scope, then the variables get attached to the global object.
9
+
- If we create any variable in the global scope, then the variables get attached to the global object.
* In first phase (memory allocation) JS assigns each variable a placeholder called **undefined**.
3
+
- In first phase (memory allocation) JS assigns each variable a placeholder called **undefined**.
4
4
5
-
***undefined** is when memory is allocated for the variable, but no value is assigned yet.
5
+
-**undefined** is when memory is allocated for the variable, but no value is assigned yet.
6
6
7
-
* If an object/variable is not even declared/found in memory allocation phase, and tried to access it then it is **Not defined**
7
+
- If an object/variable is not even declared/found in memory allocation phase, and tried to access it then it is **Not defined**
8
8
9
-
* Not Defined !== Undefined
9
+
- Not Defined !== Undefined
10
10
11
-
> When variable is declared but not assigned value, its current value is **undefined**. But when the variable itself is not declared but called in code, then it is **not defined**.
11
+
> When variable is declared but not assigned value, its current value is **undefined**. But when the variable itself is not declared but called in code, then it is **not defined**.
12
12
13
13
```js
14
14
console.log(x); // undefined
@@ -17,12 +17,12 @@ console.log(x); // 25
17
17
console.log(a); // Uncaught ReferenceError: a is not defined
18
18
```
19
19
20
-
* JS is a **loosely typed / weakly typed** language. It doesn't attach variables to any datatype. We can say *var a = 5*, and then change the value to boolean *a = true* or string *a = 'hello'* later on.
21
-
***Never** assign *undefined* to a variable manually. Let it happen on it's own accord.
20
+
- JS is a **loosely typed / weakly typed** language. It doesn't attach variables to any datatype. We can say _var a = 5_, and then change the value to boolean _a = true_ or string _a = 'hello'_ later on.
21
+
-**Never** assign _undefined_ to a variable manually. Let it happen on it's own accord.
***Scope** in Javascript is directly related to **Lexical Environment**.
3
+
-**Scope** in Javascript is directly related to **Lexical Environment**.
4
+
5
+
- Let's observe the below examples:
4
6
5
-
* Let's observe the below examples:
6
7
```js
7
8
// CASE 1
8
9
functiona() {
9
-
console.log(b); // 10
10
-
// Instead of printing undefined it prints 10, So somehow this a function could access the variable b outside the function scope.
10
+
console.log(b); // 10
11
+
// Instead of printing undefined it prints 10, So somehow this a function could access the variable b outside the function scope.
11
12
}
12
13
var b =10;
13
14
a();
@@ -16,10 +17,10 @@ a();
16
17
```js
17
18
// CASE 2
18
19
functiona() {
19
-
c();
20
-
functionc() {
21
-
console.log(b); // 10
22
-
}
20
+
c();
21
+
functionc() {
22
+
console.log(b); // 10
23
+
}
23
24
}
24
25
var b =10;
25
26
a();
@@ -28,11 +29,11 @@ a();
28
29
```js
29
30
// CASE 3
30
31
functiona() {
31
-
c();
32
-
functionc() {
33
-
var b =100;
34
-
console.log(b); // 100
35
-
}
32
+
c();
33
+
functionc() {
34
+
var b =100;
35
+
console.log(b); // 100
36
+
}
36
37
}
37
38
var b =10;
38
39
a();
@@ -41,21 +42,21 @@ a();
41
42
```js
42
43
// CASE 4
43
44
functiona() {
44
-
var b =10;
45
-
c();
46
-
functionc() {
47
-
console.log(b); // 10
48
-
}
45
+
var b =10;
46
+
c();
47
+
functionc() {
48
+
console.log(b); // 10
49
+
}
49
50
}
50
51
a();
51
52
console.log(b); // Error, Not Defined
52
53
```
53
54
54
-
* Let's try to understand the output in each of the cases above.
55
-
* In **case 1**: function a is able to access variable b from Global scope.
56
-
* In **case 2**: 10 is printed. It means that within nested function too, the global scope variable can be accessed.
57
-
* In **case 3**: 100 is printed meaning local variable of the same name took precedence over a global variable.
58
-
* In **case 4**: A function can access a global variable, but the global execution context can't access any local variable.
55
+
- Let's try to understand the output in each of the cases above.
56
+
- In **case 1**: function a is able to access variable b from Global scope.
57
+
- In **case 2**: 10 is printed. It means that within nested function too, the global scope variable can be accessed.
58
+
- In **case 3**: 100 is printed meaning local variable of the same name took precedence over a global variable.
59
+
- In **case 4**: A function can access a global variable, but the global execution context can't access any local variable.
59
60
```
60
61
To summarize the above points in terms of execution context:
61
62
call_stack = [GEC, a(), c()]
@@ -69,40 +70,39 @@ console.log(b); // Error, Not Defined
69
70
70
71
<br>
71
72
72
-
* So, **Lexical Environment** = local memory + lexical env of its parent. Hence, Lexical Environement is the local memory along with the lexical environment of its parent
73
+
- So, **Lexical Environment** = local memory + lexical env of its parent. Hence, Lexical Environement is the local memory along with the lexical environment of its parent
73
74
74
-
* **Lexical**: In hierarchy, In order
75
+
- **Lexical**: In hierarchy, In order
75
76
76
-
* Whenever an Execution Context is created, a Lexical environment(LE) is also created and is referenced in the local Execution Context(in memory space).
77
+
- Whenever an Execution Context is created, a Lexical environment(LE) is also created and is referenced in the local Execution Context(in memory space).
77
78
78
-
* The process of going one by one to parent and checking for values is called scope chain or Lexcial environment chain.
79
+
- The process of going one by one to parent and checking for values is called scope chain or Lexcial environment chain.
79
80
80
-
* ```js
81
+
- ```js
81
82
function a() {
82
-
function c() {
83
-
// logic here
84
-
}
85
-
c(); // c is lexically inside a
83
+
function c() {
84
+
// logic here
85
+
}
86
+
c(); // c is lexically inside a
86
87
} // a is lexically inside global execution
87
88
```
88
89
89
-
* Lexical or Static scope refers to the accessibility of variables, functions and object based on physical location in source code.
90
-
```js
91
-
Global {
92
-
Outer {
93
-
Inner
94
-
}
95
-
}
96
-
// Inner is surrounded by lexical scope of Outer
97
-
```
98
-
90
+
- Lexical or Static scope refers to the accessibility of variables, functions and object based on physical location in source code.
99
91
100
-
***TLDR**; An inner function can access variables which are in outer functions even if inner function is nested deep. In any other case, a function can't access variables not in its scope.
92
+
```js
93
+
Global {
94
+
Outer {
95
+
Inner
96
+
}
97
+
}
98
+
// Inner is surrounded by lexical scope of Outer
99
+
```
101
100
101
+
-**TLDR**; An inner function can access variables which are in outer functions even if inner function is nested deep. In any other case, a function can't access variables not in its scope.
0 commit comments