Added JavaScript Engine, Google v8 architecture, and the behavior of setTimeout, including concurrency model and execution flow.

Author: avinashyadav16

19_JS_Engine_And_ChromeV8.md

@@ -0,0 +1,47 @@
+# CHAPTER 19: JS Engine and Google v8 architecture
+
+#### JS runs literally everywhere from smart watch to robots to browsers because of Javascript Runtime Environment (JRE)
+
+- JRE consists of a JS Engine (Heart of JRE), set of APIs to connect with outside environment, event loop, Callback queue, Microtask queue etc.
+- JRE is a container that can run JS code.
+
+- ECMAScript is a governing body of JS. It has set of rules followed by all JS engines like Chakra(Edge), Spidermonkey(Firefox), v8(Chrome)
+- 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 code.
+
+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** to compile JS code.
+
+Interpreter : Takes code and executes line by line. Has no idea what will happen in next line. Very fast.
+Compiler : Code is compiled and an optimized version of same code is formed, and then executed. More efficient
+
+- Code inside JRE passes through 3 steps : **Parsing, Compilation and Execution**
+
+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 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. Kind of unimportant) (Check out astexplorer.net -> converts line of code into AST)
+
+2. **Compilation** - JS has something called **Just-in-time(JIT) Compilation - uses both interpreter & compiler**. Also compilation and execution both go hand in hand. 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 to compile and form optimized code during runtime.
+
+**NOTE:**
+
+    Interpreter: Runs code line by line. => Fast
+    Compiler: compiles whole code at once. => Efficiency
+
+    JavaScript can be complied or interpreted language, everything depends on JS Engine.(So in the begi nning when Brendan Eich created JS, it was meant to be an interpreted language because the browser won't wait for the code to compile and then run. But now most of the modern browser/JS engine uses both compiler and interpreter. So, now it all depends on JS Engine whether it is purely interpreted or Just in compiled.)
+
+3. **Execution** - Needs 2 components ie. Memory heap(place where all memory is stored) and Call Stack. There is also a _garbage collector._ It uses an algo called **Mark and Sweep**.
+
+Companies use different JS engines and each try to make theirs the best.
+
+- v8 of Google has Interpreter called _Ignition_, a compiler called _Turbo Fan_ and garbage collector called _Orinoco_
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./18_Async_And_EventLoops.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./20_setTimeout().md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---

20_setTimeout().md

@@ -0,0 +1,70 @@
+# Chapter 20: Trust Issues with setTimeout()
+
+```javascript
+console.log("Start");
+
+setTimeout(function cb() {
+  console.log("Callback");
+}, 5000);
+
+console.log("End");
+```
+
+`setTimeout` sometimes does not exactly guarantee that the callback method will be called exactly after 5s.
+Maybe 6,7 or even 10! It all depends on callstack
+
+While execution of program
+
+- First GEC is created and pushed in callstack.
+- Start is printed in console
+- When `setTimeout` 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.
+- But JS waits for none. Goes to next line.
+- End is printed in console.
+- 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.
+- 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.
+- 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 Queue and pushed to CallStack.
+- **Though `setTimeout` 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 **immediately executed** (Whatever is pushed to callstack is executed instantly))
+- This is called as the **Concurrency model of JS**. This is the logic behind `setTimeout`'s trust issues
+
+### The First rule of JavaScript
+
+- **Do not block the main thread** (as JS is a single threaded(only 1 callstack) language)
+
+- This raises a question. _Why not add more call stacks and make it multithreaded?_
+- JS is a synchronous single threaded language. And thats its beauty. With just 1 thread it runs all pieces of code there. It becomes kind of an interpreter language, 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.
+
+### Now what if the timeout = 0sec
+
+```javascript
+console.log("Start");
+
+setTimeout(function cb() {
+  console.log("Callback");
+}, 0);
+
+console.log("End");
+```
+
+- 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
+
+  Start
+
+  End
+
+  Callback
+
+- 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
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./19_JS_Engine_And_ChromeV8.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./21_Higher_Order_Functions_And_Functional_Programming.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---