├── LICENSE
├── Notes
    ├── 1-ExecutionContext.md
    ├── 10-Closures.md
    ├── 11-setTimeout-closures.md
    ├── 12-JSInterview-Closures.md
    ├── 14-Functions.md
    ├── 15-Callbacks-EventListeners.md
    ├── 16-Async-EventLoops.md
    ├── 17-JSEngine-ChromeV8.md
    ├── 17-setTimeout().md
    ├── 2-Execution-CallStack.md
    ├── 3-Hoisting.md
    ├── 4-Fun-VarEnv.md
    ├── 5-Window-this.md
    ├── 6-Undef-NotDef.md
    ├── 7-Scope-LexEnv.md
    ├── 8-letConst-deadzone-errors.md
    ├── 9-BlockScope-Shadowing.md
    └── README.md
└── README.md


/LICENSE:
--------------------------------------------------------------------------------
  1 | Creative Commons Legal Code
  2 | 
  3 | CC0 1.0 Universal
  4 | 
  5 |     CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
  6 |     LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
  7 |     ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
  8 |     INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
  9 |     REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
 10 |     PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
 11 |     THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
 12 |     HEREUNDER.
 13 | 
 14 | Statement of Purpose
 15 | 
 16 | The laws of most jurisdictions throughout the world automatically confer
 17 | exclusive Copyright and Related Rights (defined below) upon the creator
 18 | and subsequent owner(s) (each and all, an "owner") of an original work of
 19 | authorship and/or a database (each, a "Work").
 20 | 
 21 | Certain owners wish to permanently relinquish those rights to a Work for
 22 | the purpose of contributing to a commons of creative, cultural and
 23 | scientific works ("Commons") that the public can reliably and without fear
 24 | of later claims of infringement build upon, modify, incorporate in other
 25 | works, reuse and redistribute as freely as possible in any form whatsoever
 26 | and for any purposes, including without limitation commercial purposes.
 27 | These owners may contribute to the Commons to promote the ideal of a free
 28 | culture and the further production of creative, cultural and scientific
 29 | works, or to gain reputation or greater distribution for their Work in
 30 | part through the use and efforts of others.
 31 | 
 32 | For these and/or other purposes and motivations, and without any
 33 | expectation of additional consideration or compensation, the person
 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she
 35 | is an owner of Copyright and Related Rights in the Work, voluntarily
 36 | elects to apply CC0 to the Work and publicly distribute the Work under its
 37 | terms, with knowledge of his or her Copyright and Related Rights in the
 38 | Work and the meaning and intended legal effect of CC0 on those rights.
 39 | 
 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be
 41 | protected by copyright and related or neighboring rights ("Copyright and
 42 | Related Rights"). Copyright and Related Rights include, but are not
 43 | limited to, the following:
 44 | 
 45 |   i. the right to reproduce, adapt, distribute, perform, display,
 46 |      communicate, and translate a Work;
 47 |  ii. moral rights retained by the original author(s) and/or performer(s);
 48 | iii. publicity and privacy rights pertaining to a person's image or
 49 |      likeness depicted in a Work;
 50 |  iv. rights protecting against unfair competition in regards to a Work,
 51 |      subject to the limitations in paragraph 4(a), below;
 52 |   v. rights protecting the extraction, dissemination, use and reuse of data
 53 |      in a Work;
 54 |  vi. database rights (such as those arising under Directive 96/9/EC of the
 55 |      European Parliament and of the Council of 11 March 1996 on the legal
 56 |      protection of databases, and under any national implementation
 57 |      thereof, including any amended or successor version of such
 58 |      directive); and
 59 | vii. other similar, equivalent or corresponding rights throughout the
 60 |      world based on applicable law or treaty, and any national
 61 |      implementations thereof.
 62 | 
 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention
 64 | of, applicable law, Affirmer hereby overtly, fully, permanently,
 65 | irrevocably and unconditionally waives, abandons, and surrenders all of
 66 | Affirmer's Copyright and Related Rights and associated claims and causes
 67 | of action, whether now known or unknown (including existing as well as
 68 | future claims and causes of action), in the Work (i) in all territories
 69 | worldwide, (ii) for the maximum duration provided by applicable law or
 70 | treaty (including future time extensions), (iii) in any current or future
 71 | medium and for any number of copies, and (iv) for any purpose whatsoever,
 72 | including without limitation commercial, advertising or promotional
 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
 74 | member of the public at large and to the detriment of Affirmer's heirs and
 75 | successors, fully intending that such Waiver shall not be subject to
 76 | revocation, rescission, cancellation, termination, or any other legal or
 77 | equitable action to disrupt the quiet enjoyment of the Work by the public
 78 | as contemplated by Affirmer's express Statement of Purpose.
 79 | 
 80 | 3. Public License Fallback. Should any part of the Waiver for any reason
 81 | be judged legally invalid or ineffective under applicable law, then the
 82 | Waiver shall be preserved to the maximum extent permitted taking into
 83 | account Affirmer's express Statement of Purpose. In addition, to the
 84 | extent the Waiver is so judged Affirmer hereby grants to each affected
 85 | person a royalty-free, non transferable, non sublicensable, non exclusive,
 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and
 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the
 88 | maximum duration provided by applicable law or treaty (including future
 89 | time extensions), (iii) in any current or future medium and for any number
 90 | of copies, and (iv) for any purpose whatsoever, including without
 91 | limitation commercial, advertising or promotional purposes (the
 92 | "License"). The License shall be deemed effective as of the date CC0 was
 93 | applied by Affirmer to the Work. Should any part of the License for any
 94 | reason be judged legally invalid or ineffective under applicable law, such
 95 | partial invalidity or ineffectiveness shall not invalidate the remainder
 96 | of the License, and in such case Affirmer hereby affirms that he or she
 97 | will not (i) exercise any of his or her remaining Copyright and Related
 98 | Rights in the Work or (ii) assert any associated claims and causes of
 99 | action with respect to the Work, in either case contrary to Affirmer's
100 | express Statement of Purpose.
101 | 
102 | 4. Limitations and Disclaimers.
103 | 
104 |  a. No trademark or patent rights held by Affirmer are waived, abandoned,
105 |     surrendered, licensed or otherwise affected by this document.
106 |  b. Affirmer offers the Work as-is and makes no representations or
107 |     warranties of any kind concerning the Work, express, implied,
108 |     statutory or otherwise, including without limitation warranties of
109 |     title, merchantability, fitness for a particular purpose, non
110 |     infringement, or the absence of latent or other defects, accuracy, or
111 |     the present or absence of errors, whether or not discoverable, all to
112 |     the greatest extent permissible under applicable law.
113 |  c. Affirmer disclaims responsibility for clearing rights of other persons
114 |     that may apply to the Work or any use thereof, including without
115 |     limitation any person's Copyright and Related Rights in the Work.
116 |     Further, Affirmer disclaims responsibility for obtaining any necessary
117 |     consents, permissions or other rights required for any use of the
118 |     Work.
119 |  d. Affirmer understands and acknowledges that Creative Commons is not a
120 |     party to this document and has no duty or obligation with respect to
121 |     this CC0 or use of the Work.
122 | 


--------------------------------------------------------------------------------
/Notes/1-ExecutionContext.md:
--------------------------------------------------------------------------------
 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 where everything takes place. It has 2 components in it:
 6 | <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>.
 7 | <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>
 8 | 
 9 | ### JS is a synchronous single-threaded language. 
10 | <li> By single threaded, we mean JS can only run 1 command at a time
11 | <li> By synchronous single threaded, we mean it can run 1 command at a time, <em>in a specific order</em>
12 | 


--------------------------------------------------------------------------------
/Notes/10-Closures.md:
--------------------------------------------------------------------------------
 1 | # Episode 10 : Closures in JS
 2 | 
 3 | ### Important Interview Question
 4 | 
 5 | **Closure :** Function bundled together with its lexical environment/scope.
 6 | 
 7 | ```
 8 | JS is a weird language. You can pass functions as parameters to another function, assign a variable to an entire function, or even return a function.
 9 | eg:
10 | 
11 | function x() {
12 |   var a = 7;
13 |   function y() {
14 |   console.log(a);
15 | }
16 |   return y;   // instead of y();
17 | }
18 | var z = x();
19 | console.log(z);  // value of z is entire code of function y.
20 | 
21 | ```
22 | 
23 | When functions are returned from another fun, they still maintain their lexical
24 | scope.
25 | 
26 | - When y is returned, not only is the fun returned but the entire closure (fun
27 |   y + its lexical scope) is returned and put inside z. So when z is used
28 |   somewhere else in program, it still remembers var a inside x()
29 | - Closure is a very powerful concept of JS, just because this function remembers
30 |   things even if they are not in their lexical scope
31 | 
32 | ### Uses of Closure
33 | 
34 | Module Design Pattern, Currying, Functions like once(fun that can be run only
35 | once), memoize, maintaining state in async world, setTimeout, iterators...
36 | 


--------------------------------------------------------------------------------
/Notes/11-setTimeout-closures.md:
--------------------------------------------------------------------------------
 1 | # Episode 11 : setTimeout + Closures Interview Question 
 2 | 
 3 | #### Time, tide and Javascript wait for none
 4 | 
 5 | ```
 6 | function x() {
 7 |   var i = 1;
 8 |   setTimeout(function() {
 9 |   console.log(i);
10 |   }, 3000);
11 |   console.log("This is Hari");
12 |  }
13 |  x();
14 |  
15 |  ```
16 |  > This is Hari
17 |  
18 |  > 1 //after waiting 3 seconds (3000ms)
19 |  
20 |  We expect JS to wait 3 sec, print 1 and then go down and print the string. But JS prints string immediately, waits 3 sec and then prints 1.
21 |  
22 |  - The fun inside setTimeout forms a closure (remembers reference to i). So wherever fun goes it carries this ref along with it. 
23 |  - setTimeout takes this callback function & attaches timer of 3000ms and stores it. Goes to next line without waiting and prints string. 
24 |  - After 3000ms runs out, JS takes function, puts it into call stack and runs it. 
25 |  
26 |  #### Print 1 after 1 sec, 2 after 2 sec till 5 : Tricky interview question
27 |  
28 |  We assume this has a simple approach as below
29 |  
30 |  ```
31 |  function x() {
32 |   for(var i = 1; i<=5; i++){
33 |     setTimeout(function() {
34 |       console.log(i);
35 |      }, i*1000);
36 |     }
37 |     console.log("This is Hari");
38 |   }
39 |   x();
40 |   
41 |  ```
42 |  
43 |  > This is Hari
44 |  
45 |  > 6
46 |  
47 |  > 6
48 |  
49 |  > 6
50 |  
51 |  > 6
52 |  
53 |  > 6
54 |   
55 |  - This happens because of closures. When setTimeout stores the function somewhere and attaches timer to it, the fun remembers its reference to i, **not value of i**
56 |  - All 5 copies of fun point to same reference of i. 
57 |  - JS stores these 5 functions, prints string and then comes back to the functions. By then the timer has run fully. And due to looping, the i value became 6. And when the
58 |  callback fun runs the variable i = 6. So same 6 is printed in each log
59 |  - **To stop this from happening, use let instead of var** as let has black scope. For each iteration, the i is a new variable altogether(new copy of i). 
60 |  - Everytime setTimeout is run, the inside fun forms closure with new variable i
61 |  
62 |  #### Using let instead of var is the best option. But if asked to use var only..?
63 |  
64 |  ```
65 |  function x() {
66 |   for(var i = 1; i<=5; i++){
67 |     function close(i) {
68 |      setTimeout(function() {
69 |       console.log(i);
70 |      }, i*1000);
71 |      // put the setT fun inside new function close()
72 |     }
73 |     close(i); // everytime you call close(i) it creates new copy of i. Only this time, it is with var itself!
74 |    }
75 |     console.log("This is Hari");
76 |   }
77 |   x();
78 |   
79 |   ```
80 |  
81 | 


--------------------------------------------------------------------------------
/Notes/12-JSInterview-Closures.md:
--------------------------------------------------------------------------------
 1 | ## Only the important new concepts
 2 | 
 3 | - Closures are used in encapsulation and data hiding. 
 4 | 
 5 | ```
 6 | (without closures)
 7 | var count = 0;
 8 | 
 9 | function increment(){
10 |   count++;
11 | }
12 | 
13 | in this code, anyone can access count and change it. 
14 | 
15 | (with closures) -> put everything into a function
16 | 
17 | function counter() {
18 |   var count = 0;
19 | 
20 |   function increment(){
21 |     count++;
22 |   }
23 | }
24 | console.log(count); // this will give referenceError as count can't be accessed.
25 | 
26 | (inc with function using closure)
27 | 
28 | function counter() {
29 |   var count = 0;
30 |   return function increment(){
31 |     count++;
32 |     console.log(count);
33 |   }
34 | }
35 | var counter1 = counter(); //counter fun has closure with count var. 
36 | counter1(); // increments counter
37 | 
38 | Above code is not good and scalable for say, when you plan to implement decrement counter at a later stage. 
39 | To address this issue, we use constructors
40 | 
41 | Adding decrement counter and refactoring code:
42 | 
43 | function Counter() { //constructor function. Good coding would be to capitalize first letter of ctor fun. 
44 |   var count = 0;
45 |   this.incrementCounter = function(){ //anonymous function
46 |     count++;
47 |     console.log(count);
48 |   }
49 |    this.decrementCounter = function(){
50 |     count--;
51 |     console.log(count);
52 |   }
53 | }
54 | 
55 | var counter1 = new Counter();  // new keyword for ctor fun
56 | counter1.incrementCounter();
57 | counter1.incrementCounter();
58 | counter1.decrementCounter();
59 | 
60 | // returns 1 2 1
61 | 
62 | ```
63 | ### Disadvantages of closure
64 | - Overconsumption of memory when using closure as everytime as those closed over variables are not garbage collected till program expires.
65 | So when creating many closures, more memory is accumulated and this can create memory leaks if not handled.
66 | - **Garbage collector** : Program in JS engine or browser that frees up unused memory. In highlevel languages like C++ or JAVA, garbage collection is left to the 
67 | programmer, but in JS engine its done implicitly.
68 | 
69 | ```
70 | function a() {
71 |   var x = 0;
72 |   return function b() {
73 |     console.log(x);
74 |    }
75 |  }
76 |  
77 |  var y = a(); // y is a copy of b()
78 |  y(); 
79 |  
80 |  Once a() is called, its element x should be garbage collected ideally. But fun b has closure over var x. So mem of x cannot be freed.
81 |  Like this if more closures formed, it becomes an issue. To tacke this, JS engines like v8 and Chrome have smart garbage collection mechanisms.
82 |  Say we have var x = 0, z = 10 inabove code. When console log happens, x is printed as 0 but z is removed automatically.   
83 | 
84 | ```


--------------------------------------------------------------------------------
/Notes/14-Functions.md:
--------------------------------------------------------------------------------
 1 | # Episode 14 : First class and Anonymous functions
 2 | 
 3 | (there is no Episode 13 idk why lol)
 4 | 
 5 | #### Function statement : Just your normal function definition 
 6 | 
 7 | ```
 8 | function a() {
 9 |   console.log("a called");
10 | }
11 | a();
12 | 
13 | ```
14 | 
15 | #### Function Expression : Assigning a function to a variable. Function acts like a value
16 | 
17 | ```
18 | var b = function() {
19 |   console.log("b called");
20 | }
21 | b();
22 | 
23 | ```
24 | 
25 | **Difference btw function statement and expression is Hoisting**
26 | - You can put "a();" before "function a()" and it will still work. But putting "b();" before "var b = function()" throws a typeError.
27 | - Why? During mem creation phase a is created in memory and function assigned to a. But b is created like a variable (b:undefined) and until code reaches the function() 
28 | part, it is still undefined. So it cannot be called.
29 | 
30 | #### Function Declaration : Exactly same as function statement
31 | 
32 | #### Anonymous Function : A function without a name
33 | - They don't have their own identity. So an anony function without code inside it results in an error. 
34 | - Anony functions are used when functions are used as values eg. the code sample for function expression above
35 | 
36 | #### Named Function Expression : Same as Function Expression but function has a name instead of being anonymous
37 | ```
38 | var b = function xyz() {
39 |   console.log("b called");
40 | }
41 | b(); // prints "b called" properly
42 | xyz(); // Throws ReferenceError:xyz is not defined.
43 | 
44 | ```
45 | > xyz function is not created in global scope. So it can't be called.
46 | 
47 | #### Parameters vs Arguments 
48 | ```
49 | var b = function(param1, param2) {  // labels/identifiers that get the arg values 
50 |   console.log("b called");
51 | }
52 | b(arg1, arg2); // arguments - values passed inside function call
53 | 
54 | ```
55 | #### First Class Function aka First Class Citizens
56 | - You can pass functions inside a function as arguments(WOW!)
57 | 
58 | ```
59 | var b = function(param1) {
60 |   console.log(param1); // prints " f() {} "
61 | }
62 | b(function(){
63 |   
64 | });
65 | 
66 | this can also be done:
67 | 
68 | var b = function(param1) {
69 |   console.log(param1);
70 | }
71 | function xyz(){
72 | 
73 | }
74 | b(xyz); // same thing as prev code
75 | 
76 | you can return a function from a function:
77 | 
78 | var b = function(param1) {
79 |   return function() {
80 |   
81 |   }  
82 | }
83 | console.log(b()); //we log the entire fun within b. 
84 | 
85 | ```
86 | #### Arrow Functions (latest in ES6 (ECMAScript 2015) -> coming in future lecture
87 | 
88 | 


--------------------------------------------------------------------------------
/Notes/15-Callbacks-EventListeners.md:
--------------------------------------------------------------------------------
 1 | # Episode 15 : Callbacks and Event Listeners
 2 | 
 3 | **Callback Function :** Functions are first class citizens (see prev lecture) ie. take a fun A and pass it to another fun B. Here, A is a callback function
 4 | - JS is a synchronous and singlethreaded language. But due to callbacks, we can do async things in JS. 
 5 | 
 6 | > setTimeout(function () {}, 1000) -> here the anony function is a callback function as it is passed to setT and called sometime later in code after certain time (here 1000ms).
 7 | - This is how we do async things. JS is a synch language, but it doesn't wait 1 sec for setT to finish before going to code below it. It stores the function, attaches timer
 8 | and goes down the code. 
 9 | 
10 | ```
11 | setTimeout(function () {
12 |   console.log("timer");
13 |  }, 5000);
14 |  
15 | function x(y) {
16 |   console.log("x");
17 |   y();
18 | }
19 | 
20 | x(function y() {
21 |   console.log("y");
22 | });
23 | ```
24 | 
25 | > x
26 | 
27 | > y
28 | 
29 | > timer
30 | 
31 | - In the call stack, first x and y are present. After completion, they go away and stack is empty. Then after 5 seconds(from beginning) anonymous suddenly pops up in stack ie. setTimeout
32 | - All 3 functions are executed through call stack. If any operation blocks the call stack, its called **blocking the main thread**
33 | - Say if x() takes 30 sec to run, then JS has to wait for it to finish as it has only 1 call stack/1 main thread. *Never block main thread*. 
34 | - **Always use async for functions that take time eg. setTimeout**
35 | 
36 | **Event Listener** 
37 | 
38 | - When we create a button in HTML and attack a clickListener in JS :
39 | ```
40 | in index.html
41 | 
42 | <button id="clickMe">Click Me!</button>
43 | 
44 | in index.js
45 | 
46 | document.getElementById("clickMe").addEventListener("click", function xyz(){ //when event click occurs, this callback function is called into callstack
47 |     console.log("Button clicked");
48 | });
49 | ```
50 |  Suppose we want to increase count by 1 each time button clicked. 
51 |  - Use global variable (not good as anyone can change it)
52 |  
53 |  ```
54 |  let count = 0;
55 |  document.getElementById("clickMe").addEventListener("click", function xyz(){ 
56 |     console.log("Button clicked", ++count);
57 | });
58 |  ```
59 | - Use closures for data abstraction
60 | 
61 |  ```
62 |  function attachEventList() {  //creating new fun for closure
63 |     let count = 0;
64 |     document.getElementById("clickMe").addEventListener("click", function xyz(){ 
65 |     console.log("Button clicked", ++count);  //now callback fun forms closure with outer scope(count)
66 | });
67 | }
68 | attachEventList();
69 | ```
70 | 
71 | #### Garbage Collection and removeEventListeners 
72 | - Event listeners are heavy as they form closures. So even when call stack is empty, EventListener won't free up memory allocated to *count* as it doesn't know
73 | when it may need *count* again. 
74 | - **So we remove event listeners when we don't need them (garbage collected)**
75 | - onClick, onHover, onScroll all in a page can slow it down heavily. 
76 | 


--------------------------------------------------------------------------------
/Notes/16-Async-EventLoops.md:
--------------------------------------------------------------------------------
  1 | # Episode 16 : Asynchronous JS and Event Loops
  2 | 
  3 | > Note that call stack will execeute any execeution context which enters it. Time, tide and JS waits for none. TLDR : Call stack has no timer
  4 | 
  5 | **Browser has JS Engine which has Call Stack which has Global exec context, local exec context etc**
  6 | - But browser has many other *superpowers* - Local storage space, Timer, place to enter URL, Bluetooth access, Geolocation access and so on
  7 | - Now JS needs some way to connect the callstack with all these superpowers. This is done using **Web APIs**
  8 | 
  9 | ### WebAPIs
 10 | None of the below are part of Javascript! These are extra superpowers that browser has. Browser gives access to JS callstack to use these powers.
 11 | > setTimeout(), DOM APIs, fetch(), localstorage, console (yes, even console.log is not JS!!), location and so many more..
 12 | 
 13 | - setTimeout() : Timer function 
 14 | - DOM APIs : eg.Document.xxxx ; Used to access HTML <html><script><body>..... DOM tree. (Document Object Manipulation)
 15 | - fetch() : Used to make connection with external servers eg. Netflix servers etc.
 16 | 
 17 | We get all these inside call stack through *global object* ie. **window**
 18 | - Use window keyword like : window.setTimeout(), window.localstorage, window.console.log() to log something inside console. 
 19 | - As window is global obj, and all the above functions are present in global object, we don't explicity write *window* but it is implied
 20 | 
 21 | ### Workflow
 22 | 
 23 | ```
 24 | // First a GEC is created and put inside call stack. 
 25 | console.log("Start"); // this calls the console web api (through window) which in turn actually modifies values in console. 
 26 | 
 27 | setTimeout(function cb() {  //this calls the setT web api which gives access to timer feature. It stores the callback cb() and starts timer.  
 28 |   console.log("Callback");
 29 |  }, 5000);
 30 |  
 31 | console.log("End"); // calls console api and logs in console window. After this GEC pops from call stack. 
 32 | 
 33 | ```
 34 | - While all this is happening, the timer is constantly ticking. After it becomes 0, the callback cb() has to run. 
 35 | - Now we need this cb to go into call stack. Only then will it be executed. For this we need **event loop and Callback queue**
 36 | 
 37 | ### Event Loops and Callback Queue
 38 | - cb() cannot simply directly go to callstack to be execeuted. It goes through the callback queue when timer expires. 
 39 | - Event loop checks the callback queue, and if it has element puts it into call stack. It is a *gate keeper*. 
 40 | - Now cb() in callstack is run. Console API is used and log printed
 41 | 
 42 | Final console output:
 43 |  
 44 | > Start
 45 | 
 46 | > End
 47 | 
 48 | > Callback
 49 | 
 50 | ### Same happens for any other event as well (Click, Hover etc). This is the basic workflow.
 51 | 
 52 | ```
 53 | console.log("Start"); 
 54 | document. getElementById("btn").addEventListener("click", function cb() { // cb() registered inside webapi environment and event(click) attached to it. ie.
 55 | // REGISTERING CALLBACK AND ATTACHING EVENT TO IT. 
 56 |   console.log("Callback");
 57 | });
 58 |  
 59 | console.log("End"); // calls console api and logs in console window. After this GEC pops from call stack. 
 60 | 
 61 | ```
 62 | In above code, even after console prints "Start" and "End" and pops GEC out, **the eventListener stays in webapi env**(with hope that user may click it
 63 | some day) until explicitly removed, or the browser is closed.
 64 | 
 65 | ### Why need callback queue? 
 66 | - Why can't event loop directly take cb() and put it in callstack?  Suppose user clciks button x6 times. So 6 cb() are put inside callback queue.
 67 | - Event loop sees if call stack is empty/has space and whether callback queue is not empty(6 elements here). 
 68 | - Elements of callback queue popped off, put in callstack, executed and then popped off from call stack.
 69 | 
 70 | ### fetch() works a bit different than the rest
 71 | ```
 72 | console.log("Start"); // this calls the console web api (through window) which in turn actually modifies values in console. 
 73 | 
 74 | setTimeout(function cbT() { 
 75 |   console.log("CB Timeout");
 76 |  }, 5000);
 77 |  
 78 |  fetch("https://api.netflix.com").then(function cbF() {
 79 |   console.log("CB Netflix");
 80 |  });
 81 |  
 82 | console.log("End"); 
 83 | 
 84 | ```
 85 | - Same steps for everything before fetch() in above code. 
 86 | - fetch registers cbF into webapi environment along with existing cbT. 
 87 | - cbT is waiting for 5000ms to end so that it can be put inside callback queue. cbF is waiting for data to be returned from Netflix servers. 
 88 | - fetch requests data from Netflix servers, and get data back and now cbF ready to be executed. 
 89 | **We have something called a Microtask Queue**
 90 | - It is exactly same as Callback queue, but it has higher priority. Functions in Microtask Q are executed earlier than Callback Q. 
 91 | - cbF goes inside the Microtask Q and not callback Q. Once call stack is empty, Event loop gives chance for elements in **both** Microtask Queue and 
 92 | Callback Queue to enter Call Stack. 
 93 | 
 94 | - In console, first *Start* and *End* are printed in console. First cbF goes in callstack and "CB Netflix" is printed. cbF popped from callstack
 95 | - Next cbT is removed from callback Q, put in Call Stack, "CB Timeout" is printed, and cbT removed from callstack.
 96 | 
 97 | ### What enters the Microtask Queue ?
 98 | - All the callback functions that come through *promises* go in microtask Q. 
 99 | - **Mutation Observer :** Keeps on checking whether there is mutation in DOM tree or not, and if there, then it execeutes some callback function. 
100 | - Callback functions that come through *promises and mutation observer* go inside Microtask Queue. 
101 | - All the rest goes inside **Callback Queue aka. Task Queue**
102 | 
103 | - If the task in microtask Queue keeps creating new tasks in the queue, element in callback queue never gets chance to be run. This is called **starvation**
104 | 
105 | ### Some Important Questions 
106 | 
107 | 1. **When does the event loop actually start ? -** Event loop, as the name suggests, is a single-thread, loop that is *almost infinite*. It's always running and doing its job.
108 | 
109 | 2. **Are only asynchronous web api callbacks are registered in web api environment? -** YES, the synchronous callback functions like what we pass inside map, filter and reduce aren't registered in the Web API environment. It's just those async callback functions which go through all this.
110 | 
111 | 3. **Does the web API environment stores only the callback function and pushes the same callback to queue/microtask queue? -** Yes, the callback functions are stored, and a reference is scheduled in the queues. Moreover, in the case of event listeners(for example click handlers), the original callbacks stay in the web API environment forever, that's why it's adviced to explicitly remove the listeners when not in use so that the garbage collector does its job.
112 | 
113 | 4. **How does it matter if we delay for setTimeout would be 0ms. Then callback will move to queue without any wait ? -** No, there are trust issues with setTimeout() 😅. The callback function needs to wait until the Call Stack is empty. So the 0 ms callback might have to wait for 100ms also if the stack is busy.
114 | 


--------------------------------------------------------------------------------
/Notes/17-JSEngine-ChromeV8.md:
--------------------------------------------------------------------------------
 1 | # Episode 17 : JS Engine and Google v8 architecture
 2 | 
 3 | #### JS runs literally everywhere from smart watch to robots to browsers because of Javascript Runtime Environment (JRE)
 4 | 
 5 | - JRE consists of a JS Engine (❤️ of JRE), set of APIs to connect with outside environment, event loop, Callback queue, Microtask queue etc.
 6 | - JRE is a container that can run JS code.
 7 | 
 8 | - ECMAScript is a governing body of JS. It has set of rules followed by all JS engines like Chakra(Edge), Spidermonkey(Firefox), v8(Chrome)
 9 | - JS Engine is **not a machine**. Its software written in low level languages (eg. C++) that takes in hi-level code in JS and spits out low level machine
10 |   code
11 | 
12 | In all languages, code is compiled either with **interpreter** or with **compiler**. JS used to have only interpreter in old times, but now has **both**
13 | to compile JS code.
14 | 
15 | Interpreter : Takes code and executes line by line. Has no idea what will happen in next line. Very fast.
16 | Compiler : Code is compiled and an optimized version of same code is formed, and then executed. More efficient
17 | 
18 | - Code inside JRE passes through 3 steps : **Parsing, Compilation and Execution**
19 | 
20 | 1. **Parsing** - Code is broken down into tokens. In "let a = 7" -> let, a, =, 7 are all tokens. Also we have a **syntax parser** that takes code and converts it
21 |    into an **AST (Abstract Syntax Tree)** which is a JSON with all key values like type, start, end, body etc (looks like package.json but for a line of code in JS. Kinda
22 |    unimportant)(Check out astexplorer.net -> converts line of code into AST)
23 | 
24 | 2. **Compilation** - JS has something called **Just-in-time(JIT) Compilation - uses both interpreter & compiler**. Also compilation and execution both go hand in hand.
25 |    The AST from previous step goes to interpreter which converts hi-level code to byte code and moves to execeution. While interpreting, compiler also works hand in hand
26 |    to compile and form optimized code during runtime.
27 | 
28 | 3. **Execution** - Needs 2 components ie. Memory heap(place where all memory is stored) and Call Stack(same call stack from prev episodes). There is also a _garbage collector._
29 |    It uses an algo called **Mark and Sweep**.
30 | 
31 | Companies use different JS engines and each try to make theirs the best.
32 | 
33 | - v8 of Google has Interpreter called _Ignition_, a compiler called _Turbo Fan_ and garbage collector called _Orinoco_
34 | 


--------------------------------------------------------------------------------
/Notes/17-setTimeout().md:
--------------------------------------------------------------------------------
 1 | # Episode 17 : Trust Issues with setTimeout() 
 2 | 
 3 | (Episode number mixup. This is the actual 17th episode)
 4 | 
 5 | ```
 6 | console.log("Start");
 7 | 
 8 | setTimeout(function cb() {
 9 |   console.log("Callback");
10 |  }, 5000);
11 |  
12 |  console.log("End");
13 |  
14 | setTimeout sometimes does not exactly guarantee that the callback method will be called exactly after 5s. 
15 | Maybe 6,7 or even 10! It all depends on callstack
16 | ```
17 | 
18 | While execution of program 
19 | 
20 | - First GEC is created and pushed in callstack. 
21 | - Start is printed in console
22 | - When setT is seen, callback method is registered into webapi's env. And timer is attached to it and started. cb waits for its turn to be execeuted once timer expires.
23 | But JS waits for none. Goes to next line
24 | - End is printed in console. 
25 | - After "End" suppose we have 1 million lines of code that runs for 10 sec(say). So GEC won't pop out of stack. It runs all the code for 10 sec. 
26 | - But in the background, the timer runs for 5s. While callstack runs the 1M line of code, this timer has already expired and cb fun has been pushed to Callback queue.
27 | - Event loop keeps checking if callstack is empty or not. But here GEC is still in stack so cb can't be popped from callback Q and pushed to CallStack. 
28 | ** Though setT is only for 5s, it waits for 10s until callstack is empty before it can execute**(When GEC popped after 10sec, cb() is pushed into call stack and 
29 | **immediately executed** (Whatever is pushed to callstack is executed instantly)
30 | - This is called as the **Concurrency model of JS**. This is the logic behind setT's trust issues
31 | 
32 | ### The First rule of JavaScript
33 | - **Do not block the main thread** (as JS is a single threaded(only 1 callstack) language)
34 | 
35 | - This raises a question. *Why not add more call stacks and make it multithreaded?* 
36 | - JS is a synch single threaded language. And thats its beauty. With just 1 thread it runs all pieces of code there. It becomes kind of an interpreter lang,
37 | and runs code very fast inside browser (no need to wait for code to be compiled) (JIT - Just in time compilation). And there are still ways to do async operations as well. 
38 | 
39 | ### Now what if the timeout = 0sec
40 | ```
41 | console.log("Start");
42 | 
43 | setTimeout(function cb() {
44 |   console.log("Callback");
45 |  }, 0);
46 |  
47 |  console.log("End");
48 |  
49 | ```
50 | - Even though timer = 0s, the cb() has to go through the queue. Registers calback in webapi's env , moves to callback queue, and execute once callstack is empty
51 | 
52 | > Start
53 | 
54 | > End
55 | 
56 | > Callback
57 | 
58 | - This method of putting timer = 0, can be used to defer a less imp fun by a little so the more important fun (here printing "End") can take place 
59 | 


--------------------------------------------------------------------------------
/Notes/2-Execution-CallStack.md:
--------------------------------------------------------------------------------
 1 | # Episode 2 : Execution & Call Stack
 2 | 
 3 | Everytime you run a program, an execution context is created.
 4 | When a variable or function is encountered, it is stored in the memory area. 
 5 | 
 6 | ```
 7 | var n=2;
 8 | function square(num){
 9 |     var ans = num*num;
10 |     return ans;
11 | }
12 | 
13 | var square2 = square(n);
14 | var square4 = square(4);
15 | 
16 | ```
17 | Now first, for this entire code a <strong>Global</strong> execution context is created.
18 | 
19 | ### In the first phase (memory creation)
20 | - Memory is allocated to variables and functions.
21 | - For variable name(which is key) it assigns a value of <strong>undefined</strong>
22 | - For the function name(which is key) it assigns the entire function code as value.
23 | 
24 | ```
25 | n:undefined 
26 | square:{...entire-code...}
27 | square2:undefined 
28 | square4:undefined
29 | 
30 | ```
31 | 
32 | ### In the second phase (code execution)
33 | - The variable name is replaced with its actual assigned value from code. So now n:2 
34 | - Skips over function code as there is nothing to assign there. 
35 | - We encounter a function call in square2. So 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. 
36 | - 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. 
37 | - 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. 
38 |   After returning, local EC is removed form global EC and control goes back to global.
39 | - One more fun. call is met. Same thing happens here. 
40 | Once square4 value is replaced from undefined to 16, global EC will also be deleted. 
41 | 
42 | 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
43 | value returned, is popped. Similarly e2 EC(for square4) is pushed, and then popped and finally Global is also popped and stack is empty. 
44 | 
45 | > Call Stack maintains the order of execution of execution contexts
46 | #### Call stack aka Execution control stack, program stack, control stack, runtime stack ad machine stack
47 | 
48 | 
49 | 
50 | 
51 | 
52 | 


--------------------------------------------------------------------------------
/Notes/3-Hoisting.md:
--------------------------------------------------------------------------------
  1 | # Episode 3 : Hoisting
  2 | 
  3 | ```
  4 | // code example 1
  5 | 
  6 | var x = 7;
  7 | 
  8 | function getName(){
  9 |     console.log("Namaste JavaScript");
 10 | }
 11 | 
 12 | getName();
 13 | console.log(x);
 14 | 
 15 | ```
 16 | 
 17 | Output:
 18 | 
 19 | > Namaste JavaScript
 20 | 
 21 | > 7
 22 | 
 23 | ```
 24 | // code example 2
 25 | 
 26 | getName();      // in most languages, both lines which are above their declaration will give error. Not in JS though.
 27 | console.log(x);
 28 | 
 29 | var x = 7;
 30 | 
 31 | function getName(){
 32 |     console.log("Namaste JavaScript");
 33 | }
 34 | 
 35 | ```
 36 | 
 37 | Output:
 38 | 
 39 | > Namaste JavaScript
 40 | 
 41 | > undefined
 42 | 
 43 | ```
 44 | // code example 3
 45 | 
 46 | getName();
 47 | console.log(x);
 48 | 
 49 | function getName(){
 50 |     console.log("Namaste JavaScript");
 51 | }
 52 | 
 53 | ```
 54 | 
 55 | Output:
 56 | 
 57 | > Namaste JavaScript
 58 | 
 59 | > Error: x is not defined // note that not defined here and "undefined" in
 60 | > sample 2 are totally different.
 61 | 
 62 | - Not defined: We have not initialised the value for variable anywhere in the
 63 |   entire code and in memory space.
 64 | - Undefined: It is a placeholder that is assigned to a variable by the
 65 |   Javascript Engine until the variable is assigned with some other value.
 66 | 
 67 | **Hoisting** is a concept which enables us to extract values of variables and
 68 | functions even before initialising/assigning value without getting _error_
 69 | 
 70 | ```
 71 | 
 72 | // code example 4
 73 | 
 74 | function getName(){
 75 |     console.log("Namaste JavaScript");
 76 | }
 77 | 
 78 | console.log(getName)
 79 | 
 80 | 
 81 | ```
 82 | 
 83 | Output:
 84 | 
 85 | > f getName(){
 86 | 
 87 |       console.log("Namaste JavaScript);
 88 | 
 89 | }
 90 | 
 91 | ```
 92 | 
 93 | // code example 5
 94 | 
 95 | getName();
 96 | console.log(x);
 97 | console.log(getName)
 98 | 
 99 | var x = 7;
100 | 
101 | function getName(){
102 |     console.log("Namaste JavaScript");
103 | }
104 | 
105 | ```
106 | 
107 | Output:
108 | 
109 | > Namaste JavaScript
110 | 
111 | > undefined
112 | 
113 | > f getName(){
114 | 
115 |       console.log("Namaste JavaScript);
116 | 
117 | }
118 | 
119 | ```
120 | // code example 6
121 | 
122 | console.log(getName)
123 | 
124 | var getName = function () {
125 |     console.log("Namaste JavaScript");
126 | }
127 | 
128 | var getName = () => {  // use fat arrow function
129 |     console.log("Namaste JavaScript");
130 | }
131 | 
132 | ```
133 | 
134 | Output:
135 | 
136 | > undefined //it is because they behave as variable and not function.
137 | 
138 | ---
139 | 
140 | **REASON OF WEIRDNESS**
141 | 
142 | - The answer lies in the Global Exection Context. In the memory phase, the
143 |   variables will be initialized as _undefined_ and functions will get the whole
144 |   function code in their memory.
145 | 
146 | - This is the reason why we are getting these outputs.
147 | 


--------------------------------------------------------------------------------
/Notes/4-Fun-VarEnv.md:
--------------------------------------------------------------------------------
 1 | # Episode 4 : Functions and Variable Environments
 2 | 
 3 | ```
 4 | var x = 1;
 5 | a();
 6 | b();   // we are calling the functions before defining them. This will work properly, as seen in Hoisting (Ep3)
 7 | console.log(x);
 8 | 
 9 | function a() {
10 |   var x = 10;
11 |   console.log(x);
12 | }
13 | 
14 | 
15 | function b() {
16 |   var x = 100;
17 |   console.log(x);
18 | }
19 | 
20 | ```
21 | 
22 | Outputs:
23 | 
24 | > 10
25 | 
26 | > 100
27 | 
28 | > 1
29 | 
30 | ### Code Flow
31 | 
32 | - The Global Execution Context (GEC) is created (the big box with Memory and Code subparts). Also GEC is pushed into Call Stack
33 | > Call Stack : GEC
34 | - In first phase of GEC (memory phase), variable x:undefined and a and b have their entire function code as value initialized
35 | - In second phase of GEC (execution phase), when the fun is called, a new local EC is made. After x = 1 assigned to GEC x, a() is called. So local EC for a is made inside code part of GEC.
36 | > Call Stack: [GEC,a()]
37 | - 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
38 | commands to run, so a() local EC is removed from both GEC and from Call stack
39 | > Call Stack: GEC
40 | - Cursor goes back to b() function call. Same steps repeat.
41 | > Call Stack :[GEC, b()] -> GEC (after printing yet another totally different x value as 100 in console log)
42 | - Finally GEC is deleted and also removed from call stack. Program ends.
43 | 


--------------------------------------------------------------------------------
/Notes/5-Window-this.md:
--------------------------------------------------------------------------------
 1 | # Episode 5: Window and this keyword
 2 | 
 3 | ### Everywhere JS is run, it is done with a JS execution engine. For Chrome: v8
 4 | 
 5 | - Shortest JS program is nothing but an Empty JS file
 6 | - Even for this program, JS engine does a lot behind the scenes
 7 | - It creates the GEC, the "window" and the *this* variable
 8 | - Window is a big global object that has a lot of functions and variables. All of these can be accessed from anywhere in the program
 9 | - *this* points to *window*
10 | > this === window -> true (at global level)
11 | ```
12 | var a = 10;      // not inside any fun. So global object
13 | function b() {    // this fun not inside any function. So global.
14 |   var x = 5;    // not global
15 |  }
16 | console.log(window.a); //gives us "a" value
17 | console.log(this.a); //this points to window so it returns "a" value
18 | console.log(a); //also gives same "a" value. (if we dont put any . in front of variable, it **assumes variable is in global space**
19 | console.log(x); // x is not defined. (tries to find x inside global space, but it isn't there) 
20 | ```
21 | - Global space is anything in JS which isn't inside a function. All these global objects will be present inside the windows schema. But non globals ones won't be there (here, x)
22 | - When a GEC is made, *this* is also created with it (even for functional(local) EC). Global object provided by the browser engine is the window, so *this* points to window.
23 | 


--------------------------------------------------------------------------------
/Notes/6-Undef-NotDef.md:
--------------------------------------------------------------------------------
 1 | # Episode 6: Undefined vs Not Defined
 2 | 
 3 | - In first phase (mem alloc) JS assigns each variable to a placeholder called *undefined*
 4 | - *undefined* is when memory is allocated for the variable, but no value is assigned yet.
 5 | - If an object/variable is not even declared/found in mem alloc phase, and tried to access it then it is *Not defined*
 6 | 
 7 | > 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. 
 8 | 
 9 | ```
10 | console.log(x);
11 | var x = 25;
12 | 
13 | console.log(x);
14 | console.log(a);
15 | 
16 | ```
17 | >undefined <br/>
18 | >25 <br/>
19 | >Uncaught ReferenceError: a is not defined
20 | 
21 | 
22 | - 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 bool (a = true) or string
23 | (a = 'hello') later on. 
24 | - **Never** assign *undefined* to a variable manually. Let it happen on it's own accord.
25 | 


--------------------------------------------------------------------------------
/Notes/7-Scope-LexEnv.md:
--------------------------------------------------------------------------------
 1 | # Episode 7 : Scope and Lexical Environment
 2 | 
 3 | ```
 4 | This is why JS is confusing (Case-1)
 5 | 
 6 | function a() {
 7 |     console.log(b); // surprisingly instead of printing undefined it prints 10. 
 8 |     //So somehow this b could access the b outside the fun. 
 9 | }
10 | 
11 | var b = 10;
12 | a();
13 | 
14 | ---------------------
15 | 
16 | Another case: (Case-2)
17 | 
18 | function a() {
19 |   c();
20 |   function c() {
21 |   console.log(b); // when cursor comes here, it still prints out 10 somehow!!
22 |   }
23 |  }
24 |  var b = 10;
25 |  a();
26 |  
27 |  --------------------
28 |  
29 |  Another one (DJ KHALED!) (Case-3)
30 |  
31 |  function a() {
32 |   var b = 10;
33 |   c();
34 |   function c() {
35 |     console.log(b); //it prints the right value. How? See ans below Summary part
36 |   }
37 |  }
38 |  
39 |  a();
40 |  console.log(b); // now when cursor comes here, it prints NOT DEFINED!
41 | 
42 | ```
43 | 
44 | - This is the intuition behind **scope**
45 | - Scope is directly dependent on the lexical environment
46 | - **Lexical Environment** : local memory + lexical env of its parent
47 | - Whenever an EC is created, a Lexical environment(LE) is also created and is referenced in the local EC(in memory space)
48 | - Lexical means hierarchy. In the DJ KHALED (xD) code, function c is lexically inside function a. 
49 | - So in EC of c(), variables and fun in c (none) + reference of lexical env of parent a() is there
50 | - LE of a() in turn is its memory space + reference to LE of parent (Global EC)
51 | - LE of Global EC points to *null*
52 | 
53 |  ```
54 |     To summarize the above points:
55 |     
56 |     call_stack = [GEC, a(), c()]
57 | 
58 |     Now lets also assign the memory sections of each execution context in call_stack.
59 | 
60 |     c() = [[lexical environment pointer pointing to a()]]
61 | 
62 |     a() = [b:10, c:{}, [lexical environment pointer pointing to GEC]]
63 | 
64 |     GEC =  [a:{},[lexical_environment pointer pointing to null]]
65 | 
66 |  ```
67 |   ### For case -3 
68 |   - First JS engine searches for b in local mem of c(). Nothing is there. 
69 |   - So it goes to the reference of Lexical env of parent a(). Here b = 10 is here. So it takes this value, goes back to c() and console prints it.
70 |   - Had b not been in a(), then pointer would have gone to a()'s parent (Global EC and searched there). Had b not been there too, then it goes to LE of global's parent
71 |   which is null. Now JS engine stops and says b is NOT DEFINED. 
72 |   - **Lexical env of c = Local memory of c + LE of A + LE of Global**
73 |   - This process of going one by one to parent and checking is called **scope chain**
74 |  
75 |   
76 |   
77 | 
78 | 
79 | 
80 | 
81 | 
82 | 
83 | 
84 | 


--------------------------------------------------------------------------------
/Notes/8-letConst-deadzone-errors.md:
--------------------------------------------------------------------------------
  1 | # Episode 8 : let, const, temporal dead zone, types of errors
  2 | 
  3 | > let and const declarations are hoisted. But its different from var
  4 | 
  5 | ```
  6 | 
  7 | console.log(a); // ReferenceError: Cannot access 'a' before initialization
  8 | console.log(b); // prints undefined as expected
  9 | let a = 10;
 10 | console.log(a); // 10
 11 | var b = 15;
 12 | 
 13 | ```
 14 | It looks like let isn't hoisted, **but it is**
 15 | 
 16 | - Both a and b are actually initialized as *undefined* in hoisting stage. But var b is inside the storage space of GLOBAL, and a is in a separate memory(script), where it can be
 17 | accessed only after assigning some value to it first.
 18 | - ie. one can access 'a' only if it is assigned. Thus, it throws error.
 19 | - **Temporal Dead Zone** : Time since when the let variable was hoisted until it is initialized some value. 
 20 | - So any line till before "let a = 10" is the TDZ for a
 21 | - Since a is not accessible on global, its not accessible in *window/this* also
 22 | > window.b or this.b -> 15; But window.a or this.a ->undefined, just like window.x->undefined (x isn't declared anywhere)
 23 | 
 24 | ```
 25 | let a = 10;
 26 | let a = 100;  //this code is rejected upfront as SyntaxError. (duplicate declaration)
 27 | ------------------
 28 | let a = 10;
 29 | var a = 100; // this code also rejected upfront as SyntaxError.
 30 | (can't use same name in same scope)
 31 | 
 32 | ```
 33 | Let is a stricter version of var. Now, **const** is even more stricter than let.
 34 | 
 35 | -const holds all above properties of let. 
 36 | 
 37 | ```
 38 | let a;
 39 | a = 10;
 40 | console.log(a) // prints 10 properly. Note declaration and assigning of a is in different lines.
 41 | ------------------
 42 | const b;
 43 | b = 10;
 44 | console.log(b); // SyntaxError: Missing initializer in const declaration.
 45 | (This type of declaration won't work with const. const b = 10 only will work)
 46 | ------------------
 47 | const b = 100;
 48 | b = 1000;
 49 | //this gives us TypeError: Assignment to constant variable. 
 50 | 
 51 | ```
 52 | - Till now 3 types of errors have been covered: Syntax, Reference, and Type.
 53 | 
 54 | * Uncaught ReferenceError: x is not defined at ...
 55 | 
 56 |     * This Error signifies that x has never been in the scope of the program. This literally means that x was never defined/declared and is being tried to be accesed.
 57 | 
 58 | * Uncaught ReferenceError: cannot access 'a' before initialization
 59 | 
 60 |     * This Error signifies that 'a' cannot be accessed because it is declared as 'let' and since it is not assigned a value, it is its Temporal Dead Zone. Thus, this error occurs.
 61 | 
 62 | * Uncaught SyntaxError: Identifier 'a' has already been declared
 63 | 
 64 |     * This Error signifies that we are redeclaring a variable that is 'let' declared. No execution will take place.
 65 | 
 66 |         ```
 67 |         //code example 1.1
 68 |         let a=10;
 69 |         let a=100;
 70 |         ```
 71 |         ```
 72 |         //code example 1.2
 73 |         let a=10;
 74 |         var a=100;
 75 |         ```
 76 |     
 77 |         Will throw this Syntax error and no code will be run and be rejected affront. 
 78 |         'let' is a strict form of declaration and thus can be done only once.
 79 | * Uncaught SyntaxError: Missing initializer in const declaration
 80 |     * This Error signifies that we haven't initialized or assigned value to a const declaration.
 81 | 
 82 | * Uncaught TypeError: Assignment to constant variable
 83 |     * This Error signifies that we are reassigning to a const variable.
 84 | 
 85 | 
 86 | ### Type Error:
 87 | 
 88 | The Errors that occur due to conflicts with the declaration type. For example re-assigning const type declaration will throw this.
 89 | 
 90 | ### Syntax Error:
 91 | 
 92 | The Errors that occur due to wrong syntax that doesn't match with JS Engine syntactical rules. 
 93 | 
 94 | For example, if const is not initialized, it will throw syntax error as by syntax, it must initialize if it sees a const declaration.
 95 | 
 96 | Also, if variable that is assigned with 'let' declaration is tried to re-declared, then it throws Syntax Error.
 97 | 
 98 | ### Reference Error
 99 | 
100 | The Errors that occurs if no reference is available for access. Can occur when the variable is no where in scope or maybe it is in temporal dead zone.
101 | 
102 | 
103 | ### SOME GOOD PRACTICES:
104 | 
105 | * Try using const wherever possible.
106 | * If not, use let.
107 | * Avoid var.
108 | * Declare and initialize all variables with let to the top to avoid errors to shrink temporal dead zone window to zero.
109 | 
110 | PS: If in any interview when asked "Are let and const hoisted?" explain fully about temporal deadzone and all the above concepts too
111 | 
112 | 
113 | 


--------------------------------------------------------------------------------
/Notes/9-BlockScope-Shadowing.md:
--------------------------------------------------------------------------------
  1 | # Episode 9 : Block Scope and Shadowing
  2 | 
  3 | ### What is a block?
  4 | - Block aka *compound statement* is used to group JS statements together into 1 group. We group them within {...}
  5 | - The purpose is to group multiple statments at a place where JS expects only 1 statement.
  6 | 
  7 | ```
  8 | //code example 1
  9 | 
 10 | if(true)some statement
 11 | ```
 12 | 
 13 | But if we want to write more statements to execute after if condition; then:
 14 | 
 15 | ```
 16 | //code example 2
 17 | 
 18 | if(true){
 19 |     statement 1
 20 |     statement 2
 21 |     ...
 22 | }
 23 | ```
 24 | 
 25 | * The {} block treats all the statements as one statement.
 26 | * The if doesnt have any curly braces in syntax.
 27 | 
 28 | ### __BLOCK SCOPE__
 29 | 
 30 | * What are the variables and functions that can be accessed inside the block.
 31 | 
 32 | ```
 33 | //code example 3
 34 | 
 35 | {
 36 |     var a = 10;
 37 |     let b = 20;
 38 |     const c = 30;
 39 | }
 40 | 
 41 | console.log(a);
 42 | console.log(b);
 43 | ```
 44 | 
 45 | Outputs:
 46 | 
 47 | > 10
 48 | 
 49 | > Uncaught ReferenceError: b is not defined
 50 | 
 51 | * Behind the Scenes:
 52 | 
 53 |     * 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)
 54 |     * While, a is stored inside a GLOBAL scope. 
 55 | 
 56 | * 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.
 57 | But var a can be accessed anywhere as it is in global scope.
 58 | * Thus, we can't access them outside the Block.
 59 | 
 60 | ### __What is SHADOWING in JS?__
 61 | 
 62 | ```
 63 | //code example 4
 64 | 
 65 | var a = 100;
 66 | {
 67 |     var a = 10; //same name as global var
 68 |     let b = 20;
 69 |     const c = 30;
 70 |     console.log(a); // 10
 71 |     console.log(b); // 20
 72 |     console.log(c); // 30 
 73 | }
 74 | 
 75 | console.log(a); // 10 instead of the 100 we were expecting. So block "a" modified val of global "a" as well. 
 76 | // 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. 
 77 | ```
 78 | 
 79 | * If one has same named variable outside the block, the variable inside the block *shadows* the outside variable.
 80 | * So, a is reassigned to 10. Since both refers to same memory space i.e GLOBAL SPACE. **This happens only for var**
 81 | 
 82 | ### Instead of var let us use let
 83 | ```
 84 | //code example 5
 85 | 
 86 | let b = 100;
 87 | {
 88 |     var a = 10;
 89 |     let b = 20;
 90 |     const c = 30;
 91 |     console.log(b);
 92 | }
 93 | 
 94 | console.log(b);
 95 | ```
 96 | 
 97 | Outputs:
 98 | 
 99 | > 20
100 | 
101 | > 100  // this was what we were expecting in this first place. Both b's are in separate spaces (one in Block(20) and one in Script(another arbitrary mem space)(100))
102 | 
103 | * In the Scope, we have b in two places. The b outside of the block is in *Script* SCOPE (seperate memory space for let and const)
104 | * The b inside the block is in *Block* scope.
105 | * Thus, when in Block scope, 20 is printed and 100 when outside.
106 | * This concept is called "Shadowing".
107 | * It is also true for *const* declarations.
108 | 
109 | ### Same logic is true even for functions
110 | 
111 | ```
112 | const c = 100;
113 | function x() {
114 |   const c = 10;
115 |   console.log(c);
116 | }
117 | x();
118 | console.log(c);
119 | 
120 | ```
121 | Output:
122 | > 10
123 | 
124 | > 100
125 | 
126 | ### __What is Illegal Shadowing?__
127 | 
128 | ```
129 | // code example 6
130 | 
131 | let a = 20;
132 | {
133 |     var a = 20;
134 | }
135 | 
136 | ```
137 | 
138 | Outputs:
139 | 
140 | > Uncaught SyntaxError: Identifier 'a' has already been declared
141 | 
142 | * We cannot shadow let with var. But it is valid to shadow a let using a let.
143 | * However, we can shadow var with let.
144 | * All scope rules that work in function are same in arrow functions too.
145 | * Since var is function scoped, it is not a problem with the code below.
146 | 
147 | ```
148 | // code example 7
149 | 
150 | let a = 20;
151 | function x() {
152 |     var a = 20;
153 | }
154 | 
155 | ```
156 | 
157 | 
158 | 


--------------------------------------------------------------------------------
/Notes/README.md:
--------------------------------------------------------------------------------
   1 | # These are the complete notes, You can view any one of the chapters from the .md files above :D
   2 | 
   3 | # Episode 1 : Execution Context
   4 | 
   5 | ### Everything in JS happens inside the execution context.
   6 | 
   7 | Assume execution context to be a big box where everything takes place. 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 | ### JS is a synchronous single-threaded language.
  13 | 
  14 | <li> By single threaded, we mean JS can only run 1 command at a time
  15 | <li> By synchronous single threaded, we mean it can run 1 command at a time, <em>in a specific order</em>
  16 | 
  17 | # Episode 2 : Execution & Call Stack
  18 | 
  19 | Everytime you run a program, an execution context is created.
  20 | When a variable or function is encountered, it is stored in the memory area.
  21 | 
  22 | ```
  23 | var n=2;
  24 | function square(num){
  25 |     var ans = num*num;
  26 |     return ans;
  27 | }
  28 | 
  29 | var square2 = square(n);
  30 | var square4 = square(4);
  31 | 
  32 | ```
  33 | 
  34 | Now first, for this entire code a <strong>Global</strong> execution context is created.
  35 | 
  36 | ### In the first phase (memory creation)
  37 | 
  38 | - Memory is allocated to variables and functions.
  39 | - For variable name(which is key) it assigns a value of <strong>undefined</strong>
  40 | - For the function name(which is key) it assigns the entire function code as value.
  41 | 
  42 | ```
  43 | n:undefined
  44 | square:{...entire-code...}
  45 | square2:undefined
  46 | square4:undefined
  47 | 
  48 | ```
  49 | 
  50 | ### In the second phase (code execution)
  51 | 
  52 | - The variable name is replaced with its actual assigned value from code. So now n:2
  53 | - Skips over function code as there is nothing to assign there.
  54 | - We encounter a function call in square2. So 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.
  55 | - 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.
  56 | - 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.
  57 |   After returning, local EC is removed form global EC and control goes back to global.
  58 | - One more fun. call is met. Same thing happens here.
  59 |   Once square4 value is replaced from undefined to 16, global EC will also be deleted.
  60 | 
  61 | 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
  62 | value returned, is popped. Similarly e2 EC(for square4) is pushed, and then popped and finally Global is also popped and stack is empty.
  63 | 
  64 | > Call Stack maintains the order of execution of execution contexts
  65 | 
  66 | #### Call stack aka Execution control stack, program stack, control stack, runtime stack ad machine stack
  67 | 
  68 | # Episode 3 : Hoisting
  69 | 
  70 | ```
  71 | // code example 1
  72 | 
  73 | var x = 7;
  74 | 
  75 | function getName(){
  76 |     console.log("Namaste JavaScript");
  77 | }
  78 | 
  79 | getName();
  80 | console.log(x);
  81 | 
  82 | ```
  83 | 
  84 | Output:
  85 | 
  86 | > Namaste JavaScript
  87 | 
  88 | > 7
  89 | 
  90 | ```
  91 | // code example 2
  92 | 
  93 | getName();      // in most languages, both lines which are above their declaration will give error. Not in JS though.
  94 | console.log(x);
  95 | 
  96 | var x = 7;
  97 | 
  98 | function getName(){
  99 |     console.log("Namaste JavaScript");
 100 | }
 101 | 
 102 | ```
 103 | 
 104 | Output:
 105 | 
 106 | > Namaste JavaScript
 107 | 
 108 | > undefined
 109 | 
 110 | ```
 111 | // code example 3
 112 | 
 113 | getName();
 114 | console.log(x);
 115 | 
 116 | function getName(){
 117 |     console.log("Namaste JavaScript");
 118 | }
 119 | 
 120 | ```
 121 | 
 122 | Output:
 123 | 
 124 | > Namaste JavaScript
 125 | 
 126 | > Error: x is not defined // note that not defined here and "undefined" in sample 2 are totally different.
 127 | 
 128 | - Not defined: We have not initialised the value for variable anywhere in the entire code and in memory space.
 129 | - Undefined:
 130 | 
 131 | **Hoisting** is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting _error_
 132 | 
 133 | ```
 134 | 
 135 | // code example 4
 136 | 
 137 | function getName(){
 138 |     console.log("Namaste JavaScript");
 139 | }
 140 | 
 141 | console.log(getName)
 142 | 
 143 | 
 144 | ```
 145 | 
 146 | Output:
 147 | 
 148 | > f getName(){
 149 | 
 150 |       console.log("Namaste JavaScript);
 151 | 
 152 | }
 153 | 
 154 | ```
 155 | 
 156 | // code example 5
 157 | 
 158 | getName();
 159 | console.log(x);
 160 | console.log(getName)
 161 | 
 162 | function getName(){
 163 |     console.log("Namaste JavaScript");
 164 | }
 165 | 
 166 | ```
 167 | 
 168 | Output:
 169 | 
 170 | > Namaste JavaScript
 171 | 
 172 | > ReferenceError: x is not defined
 173 | 
 174 | > f getName(){
 175 | 
 176 |       console.log("Namaste JavaScript);
 177 | 
 178 | }
 179 | 
 180 | ```
 181 | // code example 6
 182 | 
 183 | console.log(getName)
 184 | 
 185 | var getName = function () {
 186 |     console.log("Namaste JavaScript");
 187 | }
 188 | 
 189 | var getName = () => {  // use fat arrow function
 190 |     console.log("Namaste JavaScript");
 191 | }
 192 | 
 193 | ```
 194 | 
 195 | Output:
 196 | 
 197 | > undefined //it is because they behave as variable and not function.
 198 | 
 199 | ---
 200 | 
 201 | **REASON OF WEIRDNESS**
 202 | 
 203 | - The answer lies in the Global Exection Context. In the memory phase, the variables will be initialized as _undefined_ and functions will get the whole function code in their memory.
 204 | 
 205 | - This is the reason why we are getting these outputs.
 206 | 
 207 | # Episode 4 : Functions and Variable Environments
 208 | 
 209 | ```
 210 | var x = 1;
 211 | a();
 212 | b();   // we are calling the functions before defining them. This will work properly, as seen in Hoisting (Ep3)
 213 | console.log(x);
 214 | 
 215 | function a() {
 216 |   var x = 10;
 217 |   console.log(x);
 218 | }
 219 | 
 220 | 
 221 | function b() {
 222 |   var x = 100;
 223 |   console.log(x);
 224 | }
 225 | 
 226 | ```
 227 | 
 228 | Outputs:
 229 | 
 230 | > 10
 231 | 
 232 | > 100
 233 | 
 234 | > 1
 235 | 
 236 | ### Code Flow
 237 | 
 238 | - The Global Execution Context (GEC) is created (the big box with Memory and Code subparts). Also GEC is pushed into Call Stack
 239 |   > Call Stack : GEC
 240 | - In first phase of GEC (memory phase), variable x:undefined and a and b have their entire function code as value initialized
 241 | - In second phase of GEC (execution phase), when the fun is called, a new local EC is made. After x = 1 assigned to GEC x, a() is called. So local EC for a is made inside code part of GEC.
 242 |   > Call Stack: [GEC,a()]
 243 | - 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
 244 |   commands to run, so a() local EC is removed from both GEC and from Call stack
 245 |   > Call Stack: GEC
 246 | - Cursor goes back to b() function call. Same steps repeat.
 247 |   > Call Stack :[GEC, b()] -> GEC (after printing yet another totally different x value as 100 in console log)
 248 | - Finally GEC is deleted and also removed from call stack. Program ends.
 249 | 
 250 | # Episode 5: Window and this keyword
 251 | 
 252 | ### Everywhere JS is run, it is done with a JS execution engine. For Chrome: v8
 253 | 
 254 | - Shortest JS program is nothing but an Empty JS file
 255 | - Even for this program, JS engine does a lot behind the scenes
 256 | - It creates the GEC, the "window" and the _this_ variable
 257 | - Window is a big global object that has a lot of functions and variables. All of these can be accessed from anywhere in the program
 258 | - _this_ points to _window_
 259 |   > this === window -> true (at global level)
 260 | 
 261 | ```
 262 | var a = 10;      // not inside any fun. So global object
 263 | function b() {    // this fun not inside any function. So global.
 264 |   var x = 5;    // not global
 265 |  }
 266 | console.log(window.a); //gives us "a" value
 267 | console.log(this.a); //this points to window so it returns "a" value
 268 | console.log(a); //also gives same "a" value. (if we dont put any . in front of variable, it **assumes variable is in global space**
 269 | console.log(x); // x is not defined. (tries to find x inside global space, but it isn't there)
 270 | ```
 271 | 
 272 | - Global space is anything in JS which isn't inside a function. All these global objects will be present inside the windows schema. But non globals ones won't be there (here, x)
 273 | - When a GEC is made, _this_ is also created with it (even for functional(local) EC). Global object provided by the browser engine is the window, so _this_ points to window.
 274 | 
 275 | # Episode 6: Undefined vs Not Defined
 276 | 
 277 | - In first phase (mem alloc) JS assigns each variable to a placeholder called _undefined_
 278 | - _undefined_ is when memory is allocated for the variable, but no value is assigned yet.
 279 | - If an object/variable is not even declared/found in mem alloc phase, and tried to access it then it is _Not defined_
 280 | 
 281 | > 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.
 282 | 
 283 | ```
 284 | console.log(x);
 285 | var x = 25;
 286 | 
 287 | console.log(x);
 288 | console.log(a);
 289 | 
 290 | ```
 291 | 
 292 | > undefined <br/>
 293 | > 25 <br/>
 294 | > Uncaught ReferenceError: a is not defined
 295 | 
 296 | - 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 bool (a = true) or string
 297 |   (a = 'hello') later on.
 298 | - **Never** assign _undefined_ to a variable manually. Let it happen on it's own accord.
 299 | 
 300 | # Episode 7 : Scope and Lexical Environment
 301 | 
 302 | ```
 303 | This is why JS is confusing (Case-1)
 304 | 
 305 | function a() {
 306 |     console.log(b); // surprisingly instead of printing undefined it prints 10.
 307 |     //So somehow this b could access the b outside the fun.
 308 | }
 309 | 
 310 | var b = 10;
 311 | a();
 312 | 
 313 | ---------------------
 314 | 
 315 | Another case: (Case-2)
 316 | 
 317 | function a() {
 318 |   c();
 319 |   function c() {
 320 |   console.log(b); // when cursor comes here, it still prints out 10 somehow!!
 321 |   }
 322 |  }
 323 |  var b = 10;
 324 |  a();
 325 | 
 326 |  --------------------
 327 | 
 328 |  Another one (DJ KHALED!) (Case-3)
 329 | 
 330 |  function a() {
 331 |   var b = 10;
 332 |   c();
 333 |   function c() {
 334 |     console.log(b); //it prints the right value. How? See ans below Summary part
 335 |   }
 336 |  }
 337 | 
 338 |  a();
 339 |  console.log(b); // now when cursor comes here, it prints NOT DEFINED!
 340 | 
 341 | ```
 342 | 
 343 | - This is the intuition behind **scope**
 344 | - Scope is directly dependent on the lexical environment
 345 | - **Lexical Environment** : local memory + lexical env of its parent
 346 | - Whenever an EC is created, a Lexical environment(LE) is also created and is referenced in the local EC(in memory space)
 347 | - Lexical means hierarchy. In the DJ KHALED (xD) code, function c is lexically inside function a.
 348 | - So in EC of c(), variables and fun in c (none) + reference of lexical env of parent a() is there
 349 | - LE of a() in turn is its memory space + reference to LE of parent (Global EC)
 350 | - LE of Global EC points to _null_
 351 | 
 352 | ```
 353 |    To summarize the above points:
 354 | 
 355 |    call_stack = [GEC, a(), c()]
 356 | 
 357 |    Now lets also assign the memory sections of each execution context in call_stack.
 358 | 
 359 |    c() = [[lexical environment pointer pointing to a()]]
 360 | 
 361 |    a() = [b:10, c:{}, [lexical environment pointer pointing to GEC]]
 362 | 
 363 |    GEC =  [a:{},[lexical_environment pointer pointing to null]]
 364 | 
 365 | ```
 366 | 
 367 | ### For case -3
 368 | 
 369 | - First JS engine searches for b in local mem of c(). Nothing is there.
 370 | - So it goes to the reference of Lexical env of parent a(). Here b = 10 is here. So it takes this value, goes back to c() and console prints it.
 371 | - Had b not been in a(), then pointer would have gone to a()'s parent (Global EC and searched there). Had b not been there too, then it goes to LE of global's parent
 372 |   which is null. Now JS engine stops and says b is NOT DEFINED.
 373 | - **Lexical env of c = Local memory of c + LE of A + LE of Global**
 374 | - This process of going one by one to parent and checking is called **scope chain**
 375 | 
 376 | # Episode 8 : let, const, temporal dead zone, types of errors
 377 | 
 378 | > let and const declarations are hoisted. But its different from var
 379 | 
 380 | ```
 381 | 
 382 | console.log(a); // ReferenceError: Cannot access 'a' before initialization
 383 | console.log(b); // prints undefined as expected
 384 | let a = 10;
 385 | console.log(a); // 10
 386 | var b = 15;
 387 | 
 388 | ```
 389 | 
 390 | It looks like let isn't hoisted, **but it is**
 391 | 
 392 | - Both a and b are actually initialized as _undefined_ in hoisting stage. But var b is inside the storage space of GLOBAL, and a is in a separate memory(script), where it can be
 393 |   accessed only after assigning some value to it first.
 394 | - ie. one can access 'a' only if it is assigned. Thus, it throws error.
 395 | - **Temporal Dead Zone** : Time since when the let variable was hoisted until it is initialized some value.
 396 | - So any line till before "let a = 10" is the TDZ for a
 397 | - Since a is not accessible on global, its not accessible in _window/this_ also
 398 |   > window.b or this.b -> 15; But window.a or this.a ->undefined, just like window.x->undefined (x isn't declared anywhere)
 399 | 
 400 | ```
 401 | let a = 10;
 402 | let a = 100;  //this code is rejected upfront as SyntaxError. (duplicate declaration)
 403 | ------------------
 404 | let a = 10;
 405 | var a = 100; // this code also rejected upfront as SyntaxError.
 406 | (can't use same name in same scope)
 407 | 
 408 | ```
 409 | 
 410 | Let is a stricter version of var. Now, **const** is even more stricter than let.
 411 | 
 412 | -const holds all above properties of let.
 413 | 
 414 | ```
 415 | let a;
 416 | a = 10;
 417 | console.log(a) // prints 10 properly. Note declaration and assigning of a is in different lines.
 418 | ------------------
 419 | const b;
 420 | b = 10;
 421 | console.log(b); // SyntaxError: Missing initializer in const declaration.
 422 | (This type of declaration won't work with const. const b = 10 only will work)
 423 | ------------------
 424 | const b = 100;
 425 | b = 1000;
 426 | //this gives us TypeError: Assignment to constant variable.
 427 | 
 428 | ```
 429 | 
 430 | - Till now 3 types of errors have been covered: Syntax, Reference, and Type.
 431 | 
 432 | * Uncaught ReferenceError: x is not defined at ...
 433 | 
 434 |   - This Error signifies that x has never been in the scope of the program. This literally means that x was never defined/declared and is being tried to be accesed.
 435 | 
 436 | * Uncaught ReferenceError: cannot access 'a' before initialization
 437 | 
 438 |   - This Error signifies that 'a' cannot be accessed because it is declared as 'let' and since it is not assigned a value, it is its Temporal Dead Zone. Thus, this error occurs.
 439 | 
 440 | * Uncaught SyntaxError: Identifier 'a' has already been declared
 441 | 
 442 |   - This Error signifies that we are redeclaring a variable that is 'let' declared. No execution will take place.
 443 | 
 444 |     ```
 445 |     //code example 1.1
 446 |     let a=10;
 447 |     let a=100;
 448 |     ```
 449 | 
 450 |     ```
 451 |     //code example 1.2
 452 |     let a=10;
 453 |     var a=100;
 454 |     ```
 455 | 
 456 |     Will throw this Syntax error and no code will be run and be rejected affront.
 457 |     'let' is a strict form of declaration and thus can be done only once.
 458 | 
 459 | * Uncaught SyntaxError: Missing initializer in const declaration
 460 | 
 461 |   - This Error signifies that we haven't initialized or assigned value to a const declaration.
 462 | 
 463 | * Uncaught TypeError: Assignment to constant variable
 464 |   - This Error signifies that we are reassigning to a const variable.
 465 | 
 466 | ### Type Error:
 467 | 
 468 | The Errors that occur due to conflicts with the declaration type. For example re-assigning const type declaration will throw this.
 469 | 
 470 | ### Syntax Error:
 471 | 
 472 | The Errors that occur due to wrong syntax that doesn't match with JS Engine syntactical rules.
 473 | 
 474 | For example, if const is not initialized, it will throw syntax error as by syntax, it must initialize if it sees a const declaration.
 475 | 
 476 | Also, if variable that is assigned with 'let' declaration is tried to re-declared, then it throws Syntax Error.
 477 | 
 478 | ### Reference Error
 479 | 
 480 | The Errors that occurs if no reference is available for access. Can occur when the variable is no where in scope or maybe it is in temporal dead zone.
 481 | 
 482 | ### SOME GOOD PRACTICES:
 483 | 
 484 | - Try using const wherever possible.
 485 | - If not, use let.
 486 | - Avoid var.
 487 | - Declare and initialize all variables with let to the top to avoid errors to shrink temporal dead zone window to zero.
 488 | 
 489 | PS: If in any interview when asked "Are let and const hoisted?" explain fully about temporal deadzone and all the above concepts too
 490 | 
 491 | # Episode 9 : Block Scope and Shadowing
 492 | 
 493 | ### What is a block?
 494 | 
 495 | - Block aka _compound statement_ is used to group JS statements together into 1 group. We group them within {...}
 496 | - The purpose is to group multiple statments at a place where JS expects only 1 statement.
 497 | 
 498 | ```
 499 | //code example 1
 500 | 
 501 | if(true)some statement
 502 | ```
 503 | 
 504 | But if we want to write more statements to execute after if condition; then:
 505 | 
 506 | ```
 507 | //code example 2
 508 | 
 509 | if(true){
 510 |     statement 1
 511 |     statement 2
 512 |     ...
 513 | }
 514 | ```
 515 | 
 516 | - The {} block treats all the statements as one statement.
 517 | - The if doesnt have any curly braces in syntax.
 518 | 
 519 | ### **BLOCK SCOPE**
 520 | 
 521 | - What are the variables and functions that can be accessed inside the block.
 522 | 
 523 | ```
 524 | //code example 3
 525 | 
 526 | {
 527 |     var a = 10;
 528 |     let b = 20;
 529 |     const c = 30;
 530 | }
 531 | 
 532 | console.log(a);
 533 | console.log(b);
 534 | ```
 535 | 
 536 | Outputs:
 537 | 
 538 | > 10
 539 | 
 540 | > Uncaught ReferenceError: b is not defined
 541 | 
 542 | - Behind the Scenes:
 543 | 
 544 |   - 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)
 545 |   - While, a is stored inside a GLOBAL scope.
 546 | 
 547 | - 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.
 548 |   But var a can be accessed anywhere as it is in global scope.
 549 | - Thus, we can't access them outside the Block.
 550 | 
 551 | ### **What is SHADOWING in JS?**
 552 | 
 553 | ```
 554 | //code example 4
 555 | 
 556 | var a = 100;
 557 | {
 558 |     var a = 10; //same name as global var
 559 |     let b = 20;
 560 |     const c = 30;
 561 |     console.log(a); // 10
 562 |     console.log(b); // 20
 563 |     console.log(c); // 30
 564 | }
 565 | 
 566 | console.log(a); // 10 instead of the 100 we were expecting. So block "a" modified val of global "a" as well.
 567 | // 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.
 568 | ```
 569 | 
 570 | - If one has same named variable outside the block, the variable inside the block _shadows_ the outside variable.
 571 | - So, a is reassigned to 10. Since both refers to same memory space i.e GLOBAL SPACE. **This happens only for var**
 572 | 
 573 | ### Instead of var let us use let
 574 | 
 575 | ```
 576 | //code example 5
 577 | 
 578 | let b = 100;
 579 | {
 580 |     var a = 10;
 581 |     let b = 20;
 582 |     const c = 30;
 583 |     console.log(b);
 584 | }
 585 | 
 586 | console.log(b);
 587 | ```
 588 | 
 589 | Outputs:
 590 | 
 591 | > 20
 592 | 
 593 | > 100 // this was what we were expecting in this first place. Both b's are in separate spaces (one in Block(20) and one in Script(another arbitrary mem space)(100))
 594 | 
 595 | - In the Scope, we have b in two places. The b outside of the block is in _Script_ SCOPE (seperate memory space for let and const)
 596 | - The b inside the block is in _Block_ scope.
 597 | - Thus, when in Block scope, 20 is printed and 100 when outside.
 598 | - This concept is called "Shadowing".
 599 | - It is also true for _const_ declarations.
 600 | 
 601 | ### Same logic is true even for functions
 602 | 
 603 | ```
 604 | const c = 100;
 605 | function x() {
 606 |   const c = 10;
 607 |   console.log(c);
 608 | }
 609 | x();
 610 | console.log(c);
 611 | 
 612 | ```
 613 | 
 614 | Output:
 615 | 
 616 | > 10
 617 | 
 618 | > 100
 619 | 
 620 | ### **What is Illegal Shadowing?**
 621 | 
 622 | ```
 623 | // code example 6
 624 | 
 625 | let a = 20;
 626 | {
 627 |     var a = 20;
 628 | }
 629 | 
 630 | ```
 631 | 
 632 | Outputs:
 633 | 
 634 | > Uncaught SyntaxError: Identifier 'a' has already been declared
 635 | 
 636 | - We cannot shadow let with var. But it is valid to shadow a let using a let.
 637 | - However, we can shadow var with let.
 638 | - All scope rules that work in function are same in arrow functions too.
 639 | - Since var is function scoped, it is not a problem with the code below.
 640 | 
 641 | ```
 642 | // code example 7
 643 | 
 644 | let a = 20;
 645 | function x() {
 646 |     var a = 20;
 647 | }
 648 | 
 649 | ```
 650 | 
 651 | # Episode 10 : Closures in JS
 652 | 
 653 | ### Important Interview Question
 654 | 
 655 | **Closure :** Function bundled together with its lexical environment/scope.
 656 | 
 657 | ```
 658 | JS is a weird language. You can pass functions as parameters to another function, assign a variable to an entire function, or even return a function.
 659 | eg:
 660 | 
 661 | function x() {
 662 |   var a = 7;
 663 |   function y() {
 664 |   console.log(a);
 665 | }
 666 |   return y;   // instead of y();
 667 | }
 668 | var z = x();
 669 | console.log(z);  // value of z is entire code of function y.
 670 | 
 671 | ```
 672 | 
 673 | When functions are returned from another fun, they still maintain their lexical scope.
 674 | 
 675 | - When y is returned, not only is the fun returned but the entire closure (fun y + its lexical scope) is returned and put inside z. So when z is used
 676 |   somewhere else in program, it still remembers var a inside x()
 677 | 
 678 | ### Uses of Closure
 679 | 
 680 | Module Design Pattern, Currying, Functions like once(fun that can be run only once), memoize, maintaining state in async world, setTimeout, iterators...
 681 | 
 682 | # Episode 11 : setTimeout + Closures Interview Question
 683 | 
 684 | #### Time, tide and Javascript wait for none
 685 | 
 686 | ```
 687 | function x() {
 688 |   var i = 1;
 689 |   setTimeout(function() {
 690 |   console.log(i);
 691 |   }, 3000);
 692 |   console.log("This is Hari");
 693 |  }
 694 |  x();
 695 | 
 696 | ```
 697 | 
 698 | > This is Hari
 699 | 
 700 | > 1 //after waiting 3 seconds (3000ms)
 701 | 
 702 | We expect JS to wait 3 sec, print 1 and then go down and print the string. But JS prints string immediately, waits 3 sec and then prints 1.
 703 | 
 704 | - The fun inside setTimeout forms a closure (remembers reference to i). So wherever fun goes it carries this ref along with it.
 705 | - setTimeout takes this callback function & attaches timer of 3000ms and stores it. Goes to next line without waiting and prints string.
 706 | - After 3000ms runs out, JS takes function, puts it into call stack and runs it.
 707 | 
 708 | #### Print 1 after 1 sec, 2 after 2 sec till 5 : Tricky interview question
 709 | 
 710 | We assume this has a simple approach as below
 711 | 
 712 | ```
 713 | function x() {
 714 |  for(var i = 1; i<=5; i++){
 715 |    setTimeout(function() {
 716 |      console.log(i);
 717 |     }, i*1000);
 718 |    }
 719 |    console.log("This is Hari");
 720 |  }
 721 |  x();
 722 | 
 723 | ```
 724 | 
 725 | > This is Hari
 726 | 
 727 | > 6
 728 | 
 729 | > 6
 730 | 
 731 | > 6
 732 | 
 733 | > 6
 734 | 
 735 | > 6
 736 | 
 737 | - This happens because of closures. When setTimeout stores the function somewhere and attaches timer to it, the fun remembers its reference to i, **not value of i**
 738 | - All 5 copies of fun point to same reference of i.
 739 | - JS stores these 5 functions, prints string and then comes back to the functions. By then the timer has run fully. And due to looping, the i value became 6. And when the
 740 |   callback fun runs the variable i = 6. So same 6 is printed in each log
 741 | - **To stop this from happening, use let instead of var** as let has black scope. For each iteration, the i is a new variable altogether(new copy of i).
 742 | - Everytime setTimeout is run, the inside fun forms closure with new variable i
 743 | 
 744 | #### Using let instead of var is the best option. But if asked to use var only..?
 745 | 
 746 | ```
 747 | function x() {
 748 |  for(var i = 1; i<=5; i++){
 749 |    function close(i) {
 750 |     setTimeout(function() {
 751 |      console.log(i);
 752 |     }, i*1000);
 753 |     // put the setT fun inside new function close()
 754 |    }
 755 |    close(i); // everytime you call close(i) it creates new copy of i. Only this time, it is with var itself!
 756 |   }
 757 |    console.log("This is Hari");
 758 |  }
 759 |  x();
 760 | 
 761 | ```
 762 | 
 763 | ## Only the important new concepts
 764 | 
 765 | - Closures are used in encapsulation and data hiding.
 766 | 
 767 | ```
 768 | (without closures)
 769 | var count = 0;
 770 | 
 771 | function increment(){
 772 |   count++;
 773 | }
 774 | 
 775 | in this code, anyone can access count and change it.
 776 | 
 777 | (with closures) -> put everything into a function
 778 | 
 779 | function counter() {
 780 |   var count = 0;
 781 | 
 782 |   function increment(){
 783 |     count++;
 784 |   }
 785 | }
 786 | console.log(count); // this will give referenceError as count can't be accessed.
 787 | 
 788 | (inc with function using closure)
 789 | 
 790 | function counter() {
 791 |   var count = 0;
 792 |   return function increment(){
 793 |     count++;
 794 |     console.log(count);
 795 |   }
 796 | }
 797 | var counter1 = counter(); //counter fun has closure with count var.
 798 | counter1(); // increments counter
 799 | 
 800 | Above code is not good and scalable for say, when you plan to implement decrement counter at a later stage.
 801 | To address this issue, we use constructors
 802 | 
 803 | Adding decrement counter and refactoring code:
 804 | 
 805 | function Counter() { //constructor function. Good coding would be to capitalize first letter of ctor fun.
 806 |   var count = 0;
 807 |   this.incrementCounter = function(){ //anonymous function
 808 |     count++;
 809 |     console.log(count);
 810 |   }
 811 |    this.decrementCounter = function(){
 812 |     count--;
 813 |     console.log(count);
 814 |   }
 815 | }
 816 | 
 817 | var counter1 = new Counter();  // new keyword for ctor fun
 818 | counter1.incrementCounter();
 819 | counter1.incrementCounter();
 820 | counter1.decrementCounter();
 821 | 
 822 | // returns 1 2 1
 823 | 
 824 | ```
 825 | 
 826 | ### Disadvantages of closure
 827 | 
 828 | - Overconsumption of memory when using closure as everytime as those closed over variables are not garbage collected till program expires.
 829 |   So when creating many closures, more memory is accumulated and this can create memory leaks if not handled.
 830 | - **Garbage collector** : Program in JS engine or browser that frees up unused memory. In highlevel languages like C++ or JAVA, garbage collection is left to the
 831 |   programmer, but in JS engine its done implicitly.
 832 | 
 833 | ```
 834 | function a() {
 835 |   var x = 0;
 836 |   return function b() {
 837 |     console.log(x);
 838 |    }
 839 |  }
 840 | 
 841 |  var y = a(); // y is a copy of b()
 842 |  y();
 843 | ```
 844 | 
 845 | Once a() is called, its element x should be garbage collected ideally. But fun b has closure over var x. So mem of x cannot be freed.
 846 | Like this if more closures formed, it becomes an issue. To tacke this, JS engines like v8 and Chrome have smart garbage collection mechanisms.
 847 | Say we have var x = 0, z = 10 inabove code. When console log happens, x is printed as 0 but z is removed automatically.
 848 | 
 849 | # Episode 14 : First class and Anonymous functions
 850 | 
 851 | (there is no Episode 13 idk why lol)
 852 | 
 853 | #### Function statement : Just your normal function definition
 854 | 
 855 | ```
 856 | function a() {
 857 |   console.log("a called");
 858 | }
 859 | a();
 860 | 
 861 | ```
 862 | 
 863 | #### Function Expression : Assigning a function to a variable. Function acts like a value
 864 | 
 865 | ```
 866 | var b = function() {
 867 |   console.log("b called");
 868 | }
 869 | b();
 870 | 
 871 | ```
 872 | 
 873 | **Difference btw function statement and expression is Hoisting**
 874 | 
 875 | - You can put "a();" before "function a()" and it will still work. But putting "b();" before "var b = function()" throws a typeError.
 876 | - Why? During mem creation phase a is created in memory and function assigned to a. But b is created like a variable (b:undefined) and until code reaches the function()
 877 |   part, it is still undefined. So it cannot be called.
 878 | 
 879 | #### Function Declaration : Exactly same as function statement
 880 | 
 881 | #### Anonymous Function : A function without a name
 882 | 
 883 | - They don't have their own identity. So an anony function without code inside it results in an error.
 884 | - Anony functions are used when functions are used as values eg. the code sample for function expression above
 885 | 
 886 | #### Named Function Expression : Same as Function Expression but function has a name instead of being anonymous
 887 | 
 888 | ```
 889 | var b = function xyz() {
 890 |   console.log("b called");
 891 | }
 892 | b(); // prints "b called" properly
 893 | xyz(); // Throws ReferenceError:xyz is not defined.
 894 | 
 895 | ```
 896 | 
 897 | > xyz function is not created in global scope. So it can't be called.
 898 | 
 899 | #### Parameters vs Arguments
 900 | 
 901 | ```
 902 | var b = function(param1, param2) {  // labels/identifiers that get the arg values
 903 |   console.log("b called");
 904 | }
 905 | b(arg1, arg2); // arguments - values passed inside function call
 906 | 
 907 | ```
 908 | 
 909 | #### First Class Function aka First Class Citizens
 910 | 
 911 | - You can pass functions inside a function as arguments(WOW!)
 912 | 
 913 | ```
 914 | var b = function(param1) {
 915 |   console.log(param1); // prints " f() {} "
 916 | }
 917 | b(function(){
 918 | 
 919 | });
 920 | 
 921 | this can also be done:
 922 | 
 923 | var b = function(param1) {
 924 |   console.log(param1);
 925 | }
 926 | function xyz(){
 927 | 
 928 | }
 929 | b(xyz); // same thing as prev code
 930 | 
 931 | you can return a function from a function:
 932 | 
 933 | var b = function(param1) {
 934 |   return function() {
 935 | 
 936 |   }
 937 | }
 938 | console.log(b()); //we log the entire fun within b.
 939 | 
 940 | ```
 941 | 
 942 | #### Arrow Functions (latest in ES6 (ECMAScript 2015) -> coming in future lecture
 943 | 
 944 | # Episode 15 : Callbacks and Event Listeners
 945 | 
 946 | **Callback Function :** Functions are first class citizens (see prev lecture) ie. take a fun A and pass it to another fun B. Here, A is a callback function
 947 | 
 948 | - JS is a synchronous and singlethreaded language. But due to callbacks, we can do async things in JS.
 949 | 
 950 | > setTimeout(function () {}, 1000) -> here the anony function is a callback function as it is passed to setT and called sometime later in code after certain time (here 1000ms).
 951 | 
 952 | - This is how we do async things. JS is a synch language, but it doesn't wait 1 sec for setT to finish before going to code below it. It stores the function, attaches timer
 953 |   and goes down the code.
 954 | 
 955 | ```
 956 | setTimeout(function () {
 957 |   console.log("timer");
 958 |  }, 5000);
 959 | 
 960 | function x(y) {
 961 |   console.log("x");
 962 |   y();
 963 | }
 964 | 
 965 | x(function y() {
 966 |   console.log("y");
 967 | });
 968 | ```
 969 | 
 970 | > x
 971 | 
 972 | > y
 973 | 
 974 | > timer
 975 | 
 976 | - In the call stack, first x and y are present. After completion, they go away and stack is empty. Then after 5 seconds(from beginning) anonymous suddenly pops up in stack ie. setTimeout
 977 | - All 3 functions are executed through call stack. If any operation blocks the call stack, its called **blocking the main thread**
 978 | - Say if x() takes 30 sec to run, then JS has to wait for it to finish as it has only 1 call stack/1 main thread. _Never block main thread_.
 979 | - **Always use async for functions that take time eg. setTimeout**
 980 | 
 981 | **Event Listener**
 982 | 
 983 | - When we create a button in HTML and attack a clickListener in JS :
 984 | 
 985 | ```
 986 | in index.html
 987 | 
 988 | <button id="clickMe">Click Me!</button>
 989 | 
 990 | in index.js
 991 | 
 992 | document.getElementById("clickMe").addEventListener("click", function xyz(){ //when event click occurs, this callback function is called into callstack
 993 |     console.log("Button clicked");
 994 | });
 995 | ```
 996 | 
 997 | Suppose we want to increase count by 1 each time button clicked.
 998 | 
 999 | - Use global variable (not good as anyone can change it)
1000 | 
1001 | ```
1002 | let count = 0;
1003 | document.getElementById("clickMe").addEventListener("click", function xyz(){
1004 |    console.log("Button clicked", ++count);
1005 | });
1006 | ```
1007 | 
1008 | - Use closures for data abstraction
1009 | 
1010 | ```
1011 | function attachEventList() {  //creating new fun for closure
1012 |    let count = 0;
1013 |    document.getElementById("clickMe").addEventListener("click", function xyz(){
1014 |    console.log("Button clicked", ++count);  //now callback fun forms closure with outer scope(count)
1015 | });
1016 | }
1017 | attachEventList();
1018 | ```
1019 | 
1020 | #### Garbage Collection and removeEventListeners
1021 | 
1022 | - Event listeners are heavy as they form closures. So even when call stack is empty, EventListener won't free up memory allocated to _count_ as it doesn't know
1023 |   when it may need _count_ again.
1024 | - **So we remove event listeners when we don't need them (garbage collected)**
1025 | - onClick, onHover, onScroll all in a page can slow it down heavily.
1026 | 
1027 | # Episode 16 : Asynchronous JS and Event Loops
1028 | 
1029 | > Note that call stack will execeute any execeution context which enters it. Time, tide and JS waits for none. TLDR : Call stack has no timer
1030 | 
1031 | **Browser has JS Engine which has Call Stack which has Global exec context, local exec context etc**
1032 | 
1033 | - But browser has many other _superpowers_ - Local storage space, Timer, place to enter URL, Bluetooth access, Geolocation access and so on
1034 | - Now JS needs some way to connect the callstack with all these superpowers. This is done using **Web APIs**
1035 | 
1036 | ### WebAPIs
1037 | 
1038 | None of the below are part of Javascript! These are extra superpowers that browser has. Browser gives access to JS callstack to use these powers.
1039 | 
1040 | > setTimeout(), DOM APIs, fetch(), localstorage, console (yes, even console.log is not JS!!), location and so many more..
1041 | 
1042 | - setTimeout() : Timer function
1043 | - DOM APIs : eg.Document.xxxx ; Used to access HTML <html><script><body>..... DOM tree. (Document Object Manipulation)
1044 | - fetch() : Used to make connection with external servers eg. Netflix servers etc.
1045 | 
1046 | We get all these inside call stack through _global object_ ie. **window**
1047 | 
1048 | - Use window keyword like : window.setTimeout(), window.localstorage, window.console.log() to log something inside console.
1049 | - As window is global obj, and all the above functions are present in global object, we don't explicity write _window_ but it is implied
1050 | 
1051 | ### Workflow
1052 | 
1053 | ```
1054 | // First a GEC is created and put inside call stack.
1055 | console.log("Start"); // this calls the console web api (through window) which in turn actually modifies values in console.
1056 | 
1057 | setTimeout(function cb() {  //this calls the setT web api which gives access to timer feature. It stores the callback cb() and starts timer.
1058 |   console.log("Callback");
1059 |  }, 5000);
1060 | 
1061 | console.log("End"); // calls console api and logs in console window. After this GEC pops from call stack.
1062 | 
1063 | ```
1064 | 
1065 | - While all this is happening, the timer is constantly ticking. After it becomes 0, the callback cb() has to run.
1066 | - Now we need this cb to go into call stack. Only then will it be executed. For this we need **event loop and Callback queue**
1067 | 
1068 | ### Event Loops and Callback Queue
1069 | 
1070 | - cb() cannot simply directly go to callstack to be execeuted. It goes through the callback queue when timer expires.
1071 | - Event loop checks the callback queue, and if it has element puts it into call stack. It is a _gate keeper_.
1072 | - Now cb() in callstack is run. Console API is used and log printed
1073 | 
1074 | Final console output:
1075 | 
1076 | > Start
1077 | 
1078 | > End
1079 | 
1080 | > Callback
1081 | 
1082 | ### Same happens for any other event as well (Click, Hover etc). This is the basic workflow.
1083 | 
1084 | ```
1085 | console.log("Start");
1086 | document. getElementById("btn").addEventListener("click", function cb() { // cb() registered inside webapi environment and event(click) attached to it. ie.
1087 | // REGISTERING CALLBACK AND ATTACHING EVENT TO IT.
1088 |   console.log("Callback");
1089 | });
1090 | 
1091 | console.log("End"); // calls console api and logs in console window. After this GEC pops from call stack.
1092 | 
1093 | ```
1094 | 
1095 | In above code, even after console prints "Start" and "End" and pops GEC out, **the eventListener stays in webapi env**(with hope that user may click it
1096 | some day) until explicitly removed, or the browser is closed.
1097 | 
1098 | ### Why need callback queue?
1099 | 
1100 | - Why can't event loop directly take cb() and put it in callstack? Suppose user clciks button x6 times. So 6 cb() are put inside callback queue.
1101 | - Event loop sees if call stack is empty/has space and whether callback queue is not empty(6 elements here).
1102 | - Elements of callback queue popped off, put in callstack, executed and then popped off from call stack.
1103 | 
1104 | ### fetch() works a bit different than the rest
1105 | 
1106 | ```
1107 | console.log("Start"); // this calls the console web api (through window) which in turn actually modifies values in console.
1108 | 
1109 | setTimeout(function cbT() {
1110 |   console.log("CB Timeout");
1111 |  }, 5000);
1112 | 
1113 |  fetch("https://api.netflix.com").then(function cbF() {
1114 |   console.log("CB Netflix");
1115 |  });
1116 | 
1117 | console.log("End");
1118 | 
1119 | ```
1120 | 
1121 | - Same steps for everything before fetch() in above code.
1122 | - fetch registers cbF into webapi environment along with existing cbT.
1123 | - cbT is waiting for 5000ms to end so that it can be put inside callback queue. cbF is waiting for data to be returned from Netflix servers.
1124 | - fetch requests data from Netflix servers, and get data back and now cbF ready to be executed.
1125 |   **We have something called a Microtask Queue**
1126 | - It is exactly same as Callback queue, but it has higher priority. Functions in Microtask Q are executed earlier than Callback Q.
1127 | - cbF goes inside the Microtask Q and not callback Q. Once call stack is empty, Event loop gives chance for elements in **both** Microtask Queue and
1128 |   Callback Queue to enter Call Stack.
1129 | 
1130 | - In console, first _Start_ and _End_ are printed in console. First cbF goes in callstack and "CB Netflix" is printed. cbF popped from callstack
1131 | - Next cbT is removed from callback Q, put in Call Stack, "CB Timeout" is printed, and cbT removed from callstack.
1132 | 
1133 | ### What enters the Microtask Queue ?
1134 | 
1135 | - All the callback functions that come through _promises_ go in microtask Q.
1136 | - **Mutation Observer :** Keeps on checking whether there is mutation in DOM tree or not, and if there, then it execeutes some callback function.
1137 | - Callback functions that come through _promises and mutation observer_ go inside Microtask Queue.
1138 | - All the rest goes inside **Callback Queue aka. Task Queue**
1139 | 
1140 | - If the task in microtask Queue keeps creating new tasks in the queue, element in callback queue never gets chance to be run. This is called **starvation**
1141 | 
1142 | ### Some Important Questions
1143 | 
1144 | 1. **When does the event loop actually start ? -** Event loop, as the name suggests, is a single-thread, loop that is _almost infinite_. It's always running and doing its job.
1145 | 
1146 | 2. **Are only asynchronous web api callbacks are registered in web api environment? -** YES, the synchronous callback functions like what we pass inside map, filter and reduce aren't registered in the Web API environment. It's just those async callback functions which go through all this.
1147 | 
1148 | 3. **Does the web API environment stores only the callback function and pushes the same callback to queue/microtask queue? -** Yes, the callback functions are stored, and a reference is scheduled in the queues. Moreover, in the case of event listeners(for example click handlers), the original callbacks stay in the web API environment forever, that's why it's adviced to explicitly remove the listeners when not in use so that the garbage collector does its job.
1149 | 
1150 | 4. **How does it matter if we delay for setTimeout would be 0ms. Then callback will move to queue without any wait ? -** No, there are trust issues with setTimeout() 😅. The callback function needs to wait until the Call Stack is empty. So the 0 ms callback might have to wait for 100ms also if the stack is busy.
1151 | 
1152 | # Episode 17 : JS Engine and Google v8 architecture
1153 | 
1154 | #### JS runs literally everywhere from smart watch to robots to browsers because of Javascript Runtime Environment (JRE)
1155 | 
1156 | - JRE consists of a JS Engine (❤️ of JRE), set of APIs to connect with outside environment, event loop, Callback queue, Microtask queue etc.
1157 | - JRE is a container that can run JS code.
1158 | 
1159 | - ECMAScript is a governing body of JS. It has set of rules followed by all JS engines like Chakra(Edge), Spidermonkey(Firefox), v8(Chrome)
1160 | - JS Engine is **not a machine**. Its software written in low level languages (eg. C++) that takes in hi-level code in JS and spits out low level machine
1161 |   code
1162 | 
1163 | In all languages, code is compiled either with **interpreter** or with **compiler**. JS used to have only interpreter in old times, but now has **both**
1164 | to compile JS code.
1165 | 
1166 | Interpreter : Takes code and executes line by line. Has no idea what will happen in next line. Very fast.
1167 | Compiler : Code is compiled and an optimized version of same code is formed, and then executed. More efficient
1168 | 
1169 | - Code inside JSE passes through 3 steps : **Parsing, Compilation and Execution**
1170 | 
1171 | 1. **Parsing** - Code is broken down into tokens. In "let a = 7" -> let, a, =, 7 are all tokens. Also we have a **syntax parser** that takes code and converts it
1172 |    into an **AST (Abstract Syntax Tree)** which is a JSON with all key values like type, start, end, body etc (looks like package.json but for a line of code in JS. Kinda
1173 |    unimportant)(Check out astexplorer.net -> converts line of code into AST)
1174 | 
1175 | 2. **Compilation** - JS has something called **Just-in-time(JIT) Compilation - uses both interpreter & compiler**. Also compilation and execution both go hand in hand.
1176 |    The AST from previous step goes to interpreter which converts hi-level code to byte code and moves to execeution. While interpreting, compiler also works hand in hand
1177 |    to compile and form optimized code during runtime.
1178 | 
1179 | 3. **Execution** - Needs 2 components ie. Memory heap(place where all memory is stored) and Call Stack(same call stack from prev episodes). There is also a _garbage collector._
1180 |    It uses an algo called **Mark and Sweep**.
1181 | 
1182 | Companies use different JS engines and each try to make theirs the best.
1183 | 
1184 | - v8 of Google has Interpreter called _Ignition_, a compiler called _Turbo Fan_ and garbage collector called _Orinoco_
1185 | 
1186 | # Episode 17 : Trust Issues with setTimeout()
1187 | 
1188 | (Episode number mixup. This is the actual 17th episode)
1189 | 
1190 | ```
1191 | console.log("Start");
1192 | 
1193 | setTimeout(function cb() {
1194 |   console.log("Callback");
1195 |  }, 5000);
1196 | 
1197 |  console.log("End");
1198 | 
1199 | setTimeout sometimes does not exactly guarantee that the callback method will be called exactly after 5s.
1200 | Maybe 6,7 or even 10! It all depends on callstack
1201 | ```
1202 | 
1203 | While execution of program
1204 | 
1205 | - First GEC is created and pushed in callstack.
1206 | - Start is printed in console
1207 | - When setT is seen, callback method is registered into webapi's env. And timer is attached to it and started. cb waits for its turn to be execeuted once timer expires.
1208 |   But JS waits for none. Goes to next line
1209 | - End is printed in console.
1210 | - After "End" suppose we have 1 million lines of code that runs for 10 sec(say). So GEC won't pop out of stack. It runs all the code for 10 sec.
1211 | - But in the background, the timer runs for 5s. While callstack runs the 1M line of code, this timer has already expired and cb fun has been pushed to Callback queue.
1212 | - Event loop keeps checking if callstack is empty or not. But here GEC is still in stack so cb can't be popped from callback Q and pushed to CallStack.
1213 |   ** Though setT is only for 5s, it waits for 10s until callstack is empty before it can execute**(When GEC popped after 10sec, cb() is pushed into call stack and
1214 |   **immediately executed** (Whatever is pushed to callstack is executed instantly)
1215 | - This is called as the **Concurrency model of JS**. This is the logic behind setT's trust issues
1216 | 
1217 | ### The First rule of JavaScript
1218 | 
1219 | - **Do not block the main thread** (as JS is a single threaded(only 1 callstack) language)
1220 | 
1221 | - This raises a question. _Why not add more call stacks and make it multithreaded?_
1222 | - JS is a synch single threaded language. And thats its beauty. With just 1 thread it runs all pieces of code there. It becomes kind of an interpreter lang,
1223 |   and runs code very fast inside browser (no need to wait for code to be compiled) (JIT - Just in time compilation). And there are still ways to do async operations as well.
1224 | 
1225 | ### Now what if the timeout = 0sec
1226 | 
1227 | ```
1228 | console.log("Start");
1229 | 
1230 | setTimeout(function cb() {
1231 |   console.log("Callback");
1232 |  }, 0);
1233 | 
1234 |  console.log("End");
1235 | 
1236 | ```
1237 | 
1238 | - Even though timer = 0s, the cb() has to go through the queue. Registers calback in webapi's env , moves to callback queue, and execute once callstack is empty
1239 | 
1240 | > Start
1241 | 
1242 | > End
1243 | 
1244 | > Callback
1245 | 
1246 | - This method of putting timer = 0, can be used to defer a less imp fun by a little so the more important fun (here printing "End") can take place
1247 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JavaScript-A-Z-Notes
 2 | 
 3 | <p align="center">
 4 |   
 5 | ![JavaScript-A-Z-Notes](https://socialify.git.ci/HariAcidReign/JavaScript-A-Z-Notes/image?description=1&font=Raleway&forks=1&logo=https%3A%2F%2Fwww.workinggears.com%2Fimages%2Fservices%2Fjs-ts.jpg&owner=1&stargazers=1&theme=Dark)
 6 | 
 7 | </p>
 8 | 
 9 | <p align = "center">  <strong>This is everything you need to know about the lanuguage of the future, Javascript! Open for Hacktoberfest ✨ </strong> </p>
10 | 
11 | ## 🎯 Purpose
12 | This is my attempt at sharing JS knowledge with everyone, even those who might not have the time to go through all the videos. Also, I will use this repo for quick reference to JS concepts when necessary. I made the mistake of writing notes on pen and paper while doing the Machine Learning course by AndrewNG and now its collecting 🕸️. Figured this would be a better way of documenting my journey 🔥
13 | 
14 | ## 💗 Contributions
15 | If you have notes of your own, and are interested in contributing to this repo, hit a PR! I'll review it and add it immediately 🤓
16 | 
17 | ## 📝 Resource Used 
18 | Namaste 🙏 JavaScript course by the legendary Akshay Saini
19 | 
20 | ## ⭐ Testimonial from the man himself!
21 | <img src = "https://user-images.githubusercontent.com/58134096/105517629-4c35af00-5cfd-11eb-8747-74c0fe733031.png" width = "600" height = "500" />
22 | 
23 | ## 😍 Shout-out from the dev community!
24 | 
25 | ### [Original Post](https://www.linkedin.com/posts/jayanta-kumar-roy-ba78a510a_javascript-coding-programming-activity-6815286103545921536-uzez) 
26 | 
27 | <img src = "https://user-images.githubusercontent.com/58134096/124376148-2b698080-dcc3-11eb-8cde-93973e7236f2.png" width = "600" height = "500" />
28 | 
29 | 


--------------------------------------------------------------------------------