diff --git a/dist/lectures.html b/dist/lectures.html index ad3bf79..76e78b5 100644 --- a/dist/lectures.html +++ b/dist/lectures.html @@ -1,136 +1,294 @@ - - title: Namaste JavaScript - - - - - - -

title: Namaste JavaScript

-
- -

Episode 1 : Execution Context

- -
- -

Watch Live On Youtube below:

-

-
- -
- -
- -

Episode 2 : How JS is executed & Call Stack

- -
var n = 2;
+
+
+  title: Namaste JavaScript
+  
+  
+  
+  
+  
+  
+
+
+
+  

+    
Title: Namaste
+      JavaScript

+    

+  

+  

+
+  
Episode 1 :
+    Execution Context

+  
+  

+
+  
Watch Live On Youtube below:

+  
Execution Context Youtube Link

+  

+
+  

+
+  

+
+  
Episode 2 : How JS is executed & Call Stack

+  
+  
var n = 2;
 function square(num) {
   var ans = num * num;
   return ans;
 }
 var square2 = square(n);
-var square4 = square(4);
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.

-
So O/P will look something like

-
Execution Context Phase 1

-
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.

-
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.

-
Execution Context Phase 2

-
When return keyword is encountered, It returns the control to the called line and also the function execution context is deleted.
-Same thing will be repeated for square4 and then after that is finished, the global execution context will be destroyed.
-So the final diagram before deletion would look something like:

-
Execution Context Phase 2

-
-

-
-
Watch Live On Youtube below:

-

-

-
-

-
-

-
-
Episode 3 : Hoisting in JavaScript (variables & functions)

-
-
getName(); // Namaste Javascript
+var square4 = square(4);

+  
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.

+  
So O/P will look something like

+  
Execution Context Phase 1
+  

+  
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.

+  
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.

+  
Execution Context Phase 2
+  

+  
When return keyword is encountered, It returns the control to the called line and also the
+      function execution context is deleted.
+    Same thing will be repeated for square4 and then after that is finished, the global execution context will be
+    destroyed.
+    So the final diagram before deletion would look something like:

+  
Execution Context Phase 2

+  
+  

+
+  
Watch Live On Youtube below:

+  
How JS is executed & Call Stack Youtube Link

+  

+
+  

+
+  

+
+  
Episode 3 : Hoisting in JavaScript (variables
+    & functions)

+  
+  
getName(); // Namaste Javascript
 console.log(x); // undefined
 var x = 7;
 function getName() {
   console.log("Namaste Javascript");
-}

-
getName(); // Namaste JavaScript
+}

+  
+  
getName(); // Namaste JavaScript
 console.log(x); // Uncaught Reference: x is not defined.
 console.log(getName); // f getName(){ console.log("Namaste JavaScript); }
 function getName() {
   console.log("Namaste JavaScript");
-}

-
getName(); // Uncaught TypeError: getName is not a function
+}

+  
+  
getName(); // Uncaught TypeError: getName is not a function
 console.log(getName);
 var getName = function () {
   console.log("Namaste JavaScript");
 };
-// The code won't execute as the first line itself throws an TypeError.

+// The code won't execute as the first line itself throws an TypeError.
+
-

Watch Live On Youtube below:

-

-
+

Watch Live On Youtube below:

+

Hoisting Youtube Link

+
-
+
-
+
-

Episode 4 : Functions and Variable Environments

-
var x = 1;
+  
Episode 4 : Functions and Variable Environments

+  
var x = 1;
 a();
 b(); // we are calling the functions before defining them. This will work properly, as seen in Hoisting.
 console.log(x);
@@ -143,134 +301,183 @@ 
function b() {
   var x = 100;
   console.log(x);
-}
Outputs:

-

-
10

-

-

-
100

-

-

-
1

-

-
Code Flow in terms of Execution Context

-
-

-
Call Stack : GEC

-

-
-

-
Call Stack: [GEC, a()]

-

-
-

-
Call Stack: GEC

-

-
-

-
Call Stack :[GEC, b()] -> GEC (after printing yet another totally different x value as 100 in console log)

-

-
-
Execution Context Phase 1

-

-
-
Watch Live On Youtube below:

-

-

-
-

-
-

-
-
Episode 5 : Shortest JS Program, window & this keyword

-
-
eg:

-
var x = 10;
+}

+  
Outputs:

+  

+    
10

+  

+  

+    
100

+  

+  

+    
1

+  

+  
Code Flow in terms of Execution Context

+  
+  

+    
Call Stack : GEC

+  

+  
+  

+    
Call Stack: [GEC, a()]

+  

+  
+  

+    
Call Stack: GEC

+  

+  
+  

+    
Call Stack :[GEC, b()] -> GEC (after printing yet another totally different x value as 100 in console log)

+  

+  
+  
Execution Context Phase 1
+  

+  

+
+  
Watch Live On Youtube below:

+  
Functions and Variable Environments Youtube Link

+  

+
+  

+
+  

+
+  
Episode 5 : Shortest JS Program, window & this
+    keyword

+  
+  
eg:

+  
var x = 10;
 console.log(x); // 10
 console.log(this.x); // 10
-console.log(window.x); // 10

-
-
Watch Live On Youtube below:

-

-

-
-

-
-

-
-
Episode 6 : undefined vs not defined in JS

-
-

-
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.

-

-
console.log(x); // undefined
+console.log(window.x); // 10

+  

+
+  
Watch Live On Youtube below:

+  
Shortest JS Program, window & this keyword Youtube Link

+  

+
+  

+
+  

+
+  
Episode 6 : undefined vs not defined in JS

+  
+  

+    
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.

+  

+  
console.log(x); // undefined
 var x = 25;
 console.log(x); // 25
-console.log(a); // Uncaught ReferenceError: a is not defined

-

-
-
Watch Live On Youtube below:

-

-

-
-

-
-

-
-
Episode 7 : The Scope Chain, Scope & Lexical Environment

-
-
// CASE 1
+console.log(a); // Uncaught ReferenceError: a is not defined

+  
+  

+
+  
Watch Live On Youtube below:

+  
undefined vs not defined in JS Youtube Link

+  

+
+  

+
+  

+
+  
Episode 7 : The Scope Chain, Scope & Lexical
+    Environment

+  
+  
// CASE 1
 function a() {
   console.log(b); // 10
   // Instead of printing undefined it prints 10, So somehow this a function could access the variable b outside the function scope.
 }
 var b = 10;
-a();
// CASE 2
+a();

+  
// CASE 2
 function a() {
   c();
   function c() {
@@ -278,7 +485,8 @@ 
var b = 10;
-a();
// CASE 3
+a();

+  
// CASE 3
 function a() {
   c();
   function c() {
@@ -287,7 +495,8 @@ 
var b = 10;
-a();
// CASE 4
+a();

+  
// CASE 4
 function a() {
   var b = 10;
   c();
@@ -296,101 +505,137 @@ 
console.log(b); // Error, Not Defined

+  

+
+  
Watch Live On Youtube below:

+  
The Scope Chain, Scope & Lexical Environment Youtube Link

+  

+
+  

+
+  

+
+  
Episode 8 : let & const in JS, Temporal Dead Zone
+  

+  
+  
console.log(a); // ReferenceError: Cannot access 'a' before initialization
 console.log(b); // prints undefined as expected
 let a = 10;
 console.log(a); // 10
 var b = 15;
 console.log(window.a); // undefined
-console.log(window.b); // 15
It looks like let isn't hoisted, but it is, let's understand

-
-

-
-
-
let a = 10;
+console.log(window.b); // 15

+  
It looks like let isn't hoisted, but it is, let's understand

+  
+  

+
+  
+  
let a = 10;
 let a = 100;  //this code is rejected upfront as SyntaxError. (duplicate declaration)
 ------------------
 let a = 10;
-var a = 100; // this code also rejected upfront as SyntaxError. (can't use same name in same scope)

-
let a;
+var a = 100; // this code also rejected upfront as SyntaxError. (can't use same name in same scope)

+  
+  
let a;
 a = 10;
 console.log(a) // 10. Note declaration and assigning of a is in different lines.
 ------------------
@@ -399,80 +644,100 @@ 
console.log(b); // SyntaxError: Missing initializer in const declaration. (This type of declaration won't work with const. const b = 10 only will work)
 ------------------
 const b = 100;
-b = 1000; //this gives us TypeError: Assignment to constant variable.

-
SOME GOOD PRACTICES:

-
-

-
-
Watch Live On Youtube below:

-

-

-
-

-
-

-
-
Episode 9 : Block Scope & Shadowing in JS

-
What is a Block?

-
-
{
+b = 1000; //this gives us TypeError: Assignment to constant variable.

+  
+  
SOME GOOD PRACTICES:

+  
+  

+
+  
Watch Live On Youtube below:

+  
let & const in JS, Temporal Dead Zone Youtube Link

+  

+
+  

+
+  

+
+  
Episode 9 : Block Scope & Shadowing in JS

+  
What is a Block?

+  
+  
{
   var a = 10;
   let b = 20;
   const c = 30;
   // Here let and const are hoisted in Block scope,
   // While, var is hoisted in Global scope.
-}

-
{
+}

+  
+  
{
   var a = 10;
   let b = 20;
   const c = 30;
 }
 console.log(a); // 10
-console.log(b); // Uncaught ReferenceError: b is not defined
* Reason?
+console.log(b); // Uncaught ReferenceError: b is not defined

+  
* Reason?
     * In the BLOCK SCOPE; we get b and c inside it initialized as *undefined* as a part of hoisting (in a seperate memory space called **block**)
     * While, a is stored inside a GLOBAL scope.
 
-    * Thus we say, *let* and *const* are BLOCK SCOPED. They are stored in a separate mem space which is reserved for this block. Also, they can't be accessed outside this block. But var a can be accessed anywhere as it is in global scope. Thus, we can't access them outside the Block.
What is Shadowing?

-
var a = 100;
+    * Thus we say, *let* and *const* are BLOCK SCOPED. They are stored in a separate mem space which is reserved for this block. Also, they can't be accessed outside this block. But var a can be accessed anywhere as it is in global scope. Thus, we can't access them outside the Block.

+  
What is Shadowing?

+  
var a = 100;
 {
   var a = 10; // same name as global var
   let b = 20;
@@ -481,59 +746,76 @@ 
console.log(b); // 20
   console.log(c); // 30
 }
-console.log(a); // 10, instead of the 100 we were expecting. So block "a" modified val of global "a" as well. In console, only b and c are in block space. a initially is in global space(a = 100), and when a = 10 line is run, a is not created in block space, but replaces 100 with 10 in global space itself.

-
let b = 100;
+console.log(a); // 10, instead of the 100 we were expecting. So block "a" modified val of global "a" as well. In console, only b and c are in block space. a initially is in global space(a = 100), and when a = 10 line is run, a is not created in block space, but replaces 100 with 10 in global space itself.

+  
    
+    
  • 
+      
    So, If one has same named variable outside the block, the variable inside the block shadows the
+        outside variable. This happens only for var
    
+    
    • 
+    
  • 
+      
    Let's observe the behaviour in case of let and const and understand it's reason.
    
+    
    • 
+  

+  
let b = 100;
 {
   var a = 10;
   let b = 20;
   const c = 30;
   console.log(b); // 20
 }
-console.log(b); // 100, Both b's are in separate spaces (one in Block(20) and one in Script(another arbitrary mem space)(100)). Same is also true for *const* declarations.
Block Scope Explaination

-
    
-
  • Same logic is true even for functions
    • 
-

-
const c = 100;
+console.log(b); // 100, Both b's are in separate spaces (one in Block(20) and one in Script(another arbitrary mem space)(100)). Same is also true for *const* declarations.

+  
Block Scope Explaination

+  
    
+    
  • Same logic is true even for functions
    • 
+  

+  
const c = 100;
 function x() {
   const c = 10;
   console.log(c); // 10
 }
 x();
-console.log(c); // 100
What is Illegal Shadowing?

-
let a = 20;
+console.log(c); // 100

+  
What is Illegal Shadowing?

+  
let a = 20;
 {
   var a = 20;
 }
-// Uncaught SyntaxError: Identifier 'a' has already been declared
    
-
  • We cannot shadow let with var. But it is valid to shadow a let using a let. However, we can shadow var with let.
    • 
-
  • All scope rules that work in function are same in arrow functions too.
    • 
-
  • Since var is function scoped, it is not a problem with the code below.
    • 
-

-
let a = 20;
+// Uncaught SyntaxError: Identifier 'a' has already been declared

+  
    
+    
  • We cannot shadow let with var. But it is valid to shadow a let using a let. However, we can
+      shadow var with let.
    • 
+    
  • All scope rules that work in function are same in arrow functions too.
    • 
+    
  • Since var is function scoped, it is not a problem with the code below.
    • 
+  

+  
let a = 20;
 function x() {
   var a = 20;
-}

-
-
Watch Live On Youtube below:

-

-

-
-

-
-

-
-
Episode 10 : Closures in JS

-
+  

+
+  
+        
+      
+      
These examples demonstrate the power and versatility of closures in
+        JavaScript! 🚀

+    
+    
  • 
+      
    Disadvantages of Closure:
    
+      
      
+        
    • Over consumption of memory
      • 
+        
    • Memory Leak
      • 
+        
    • Freeze browser
      • 
+      
    
+    
    • 
+  
+  
    
+
+  
    Watch Live On Youtube below:
    
+  
    Closure in JS Youtube Link
    
+  
    
+
+  
    
+
+  
    
+
+  
    Episode 11 : setTimeout + Closures Interview
+    Question
    
+  
    
+    
    Time, tide and Javascript wait for none.
    
+  
    
+  
    function x() {
   var i = 1;
   setTimeout(function () {
     console.log(i);
@@ -740,18 +1050,27 @@ 
    // Output:
 // Namaste Javascript
-// 1 // after waiting 3 seconds