javascript engine

Promise Async Await

javascript

Avatar

Event propagation

promise

debounce and throttle

Javascript

Van Truong

## Promise

A `Promise` is a proxy for a value __not necessarily known__ when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: `instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future`.

A Promise is in one of these states:

- `pending`: initial state, neither fulfilled nor rejected.
- `fulfilled`: meaning that the operation was completed successfully.
- `rejected`: meaning that the operation failed.

A promise is said to be __*settled*__ if it is either `fulfilled` or `rejected`, but not pending.

## Static methods

### Promise.all(iterable)

Wait for __all promises to be fulfilled__, or for __any to be rejected__.

If the returned promise fulfills, it is fulfilled with an aggregating array of the values from the fulfilled promises, in the same order as defined in the iterable of multiple promises.

If it rejects, *it is rejected with the reason from the first promise in the iterable that was rejected.*

### Promise.allSettled(iterable)

Wait until __all promises have settled__ (each may `fulfill` or `reject`).

Returns a Promise that __always fulfills__ after all of the given promises is either fulfilled or rejected, with an array of objects that each describe the outcome of each promise.

`Promise.all()` will return array of resolve values only, while `Promise.allSettled()` return array of result that have detail value result of each promise (`value`, `status`, `reason`)

For example, `Promise.allSettled([Promise.reject(1),Promise.resolve(2)]).then(console.log);` will fulfills with value

```json
[
  { "status": "rejected", "reason": 1  },
  { "status": "fulfilled", "value": 2  },
]
```

### Promise.any(iterable)

Takes an iterable of Promise objects and, __as soon as one of the promises in the iterable fulfills__, returns a single promise that fulfills with the value from that promise. If no promises in the iterable fulfill (if all of the given promises are rejected), then the returned promise is `rejected` with an `AggregateError`

### Promise.race(iterable)

__Wait until any of the promises is fulfilled or rejected.__

If the returned promise fulfills, it is fulfilled with the value of the first promise in the iterable that fulfilled.

If it rejects, it is rejected with the reason from the first promise that was rejected.

### Promise.reject(reason)
Returns a new Promise object that is rejected with the given reason.

Returns a new `Promise` object that is resolved with the given value. If the value is a thenable (i.e. has a then method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise, the returned promise will be fulfilled with the value.

*Generally, if you don't know if a value is a promise or not*, `Promise.resolve(value)` it instead and work with the return value as a promise.

### Promise.resolve(value)

## Instance methods

- __*Promise.prototype.then()*__
  - The `then()` method returns a `Promise`. It takes up to two arguments: callback functions for the success and failure cases of the Promise.
  - The behavior of the handler function follows a specific set of rules. If a handler function:
    - returns a value, the promise returned by then gets resolved with the returned value as its value.
    - doesn't return anything, the promise returned by then gets resolved with an `undefined` value.
    - throws an error, the promise returned by then gets rejected with the thrown error as its value.
    - returns an already fulfilled promise, the promise returned by then gets fulfilled with that promise's value as its value.
    - returns an already rejected promise, the promise returned by then gets rejected with that promise's value as its value.
    - returns another __pending__ promise object, the resolution/rejection of the promise returned by then will be subsequent to the resolution/rejection of the promise returned by the handler. Also, *the resolved value of the promise returned by then will be the same as the resolved value of the promise returned by the handler.*

- __*Promise.prototype.catch()*__
    - The `catch()` method returns a __Promise__ and deals with rejected cases only. It behaves the same as calling `Promise.prototype.then(undefined, onRejected)` (in fact, calling `obj.catch(onRejected)` internally calls `obj.then(undefined, onRejected)`)

- __*Promise.prototype.finally()*__
  - The `finally()` method of a Promise schedules a function, the callback function, to be called when the promise is __settled__. The `finally()` method can be useful if you want to do some processing or cleanup once the promise is settled, regardless of its outcome.

## Chained Promises

The methods `Promise.prototype.then()`, `Promise.prototype.catch()`, and `Promise.prototype.finally()` are used to associate further action with a promise that becomes settled. As the `then()` and `catch()` methods return promises, they can be chained.

Let's practice with this challenge to have a better understanding about chained promises

> __Challenge__: Implement a class Chain that have 3 method: `eat`, `work`, `sleep(s)` that wait for `s` before doing next action. You can call the methods in any order

```js
// Problem: method chaining sequentially (with asynchronous function)
// Idea: 
// - Using Promise as a task queue
// - Only do next action if previous Promise finished 
// - In case of sleep, return a new Promise()

// Approach 1: Using class

class Chain {
    _chain;
    constructor() {
        this._chain = Promise.resolve(true);
    }

    eat = () => {
        this._chain = this._chain.then(() => {
            console.log('eat');
        })
        return this;
    }

    work = () => {
        this._chain = this._chain.then(() => {
            console.log('work');
        })
        return this;
    }

    sleep = (s) => {
        this._chain = this._chain.then(() => {
            console.log('start sleep');
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log('wake up');
                    resolve();
                }, s * 1000);
            })
        });

        return this;
    }

}

const chain = new Chain();
chain.eat().sleep(5).work().eat().work();
```

## Reference

- [Promise - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

All about Promise in Javascript


## Callback

In the beginning, there were __callbacks__. __*A callback is nothing special but a function that is executed at some later time.*__

Note the nesting of callbacks and the staircase of }) at the end. This is affectionately called as __Callback Hell__. Here is an example

![callback hell example](//images.ctfassets.net/tk7dn5bsmtgs/3dyZvbFTJKv5xKjsJziN91/b5ef6269f35f29b2ebe61d8a846c846e/callback_hell.png)

__Disadvantages:__
- The code becomes harder to read 
- Error handling is complicated

## Promise

To overcome this problem, JavaScript created `Promises`. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

Now, instead of nesting callbacks inward, we can chain them. Here’s an example —

![Promise chain example](//images.ctfassets.net/tk7dn5bsmtgs/5NmaKVIBafi8LyKLjel78g/60382b1f5f5b4161e9be5e7b706b1156/promise_chain.png)

The flow has become a familiar `top-to-bottom` rather than `left-to-right` as in callbacks, which is a plus. __However, Promises still suffer from some problems:__

- We still have to give a callback to every `.then`.
- Instead of using a normal `try/catch`, we have to use `.catch` for error handling.
- Looping over multiple promises in a sequence is challenging and non-intuitive.

Read more about Promise [here](https://iamcoding.vercel.app/all-about-promise-in-javascript)

## Async Functions

Introduced in ES2017(ES8), async functions make working with promises much easier.

- It is important to note the async functions work on top of promises.
- They allow asynchronous execution while maintaining a regular, `synchronous feel`.

### Semantics and Evaluation Rules

#### An async function always returns a promise.

The body of an async function is always wrapped in a `new Promise`.

```js
async function fn() {
  return 'hello';
}
fn().then(console.log)
// hello
```

The function `fn` returns `hello`. Because we have used `async`, the return value 'hello' is wrapped in a __promise__ (via Promise constructor).

Here’s an alternate representation without using async:

```js
function fn() {
  return Promise.resolve('hello');
}
fn().then(console.log);
// hello
```

#### Async functions pause at each `await` expression.

An `await` acts on an expression. When the expression is a promise, __the evaluation of the async function halts until the promise is resolved__. When the expression is a non-promise value, it is converted to a promise using `Promise.resolve` and then resolved.

```js
// utility function to cause delay
// and get random value
const delayAndGetRandom = (ms) => {
  return new Promise(resolve => setTimeout(
    () => {
      const val = Math.trunc(Math.random() * 100);
      resolve(val);
    }, ms
  ));
};
async function fn() {
  const a = await 9;
  const b = await delayAndGetRandom(1000);
  const c = await 5;
  await delayAndGetRandom(1000);

  return a + b * c;
}
// Execute fn
fn().then(console.log);
```

Let’s examine the function fn line by line:

- When `fn` is executed, the first line to be evaluated is `const a = await 9;`. It is internally transformed into `const a = await Promise.resolve(9);`.
- Since we are using `await`, `fn` __pauses until the variable__ a gets a value. In this case, the promise resolves it to 9.
- `delayAndGetRandom(1000)` causes fn to pause until the function `delayAndGetRandom` is resolved which is after 1 second. So, `fn` effectively pauses for 1 second.
- Also, `delayAndGetRandom` resolves with a random value. Whatever is passed in the resolve function, that is assigned to the variable b.
- `c` gets the value of 5 similarly and we delay for 1 second again using `await delayAndGetRandom(1000)`. We don’t use the resolved value in this case.
- Finally, we compute the result `a + b * c` which is wrapped in a Promise using `Promise.resolve`. This wrapped promise is returned.

## The challenge

> Let’s assume that we have a for loop that prints 0 to 10 at random intervals (0 to n seconds). We need to modify it using promises to print sequentially 0 to 10. For example, if 0 takes 6 seconds to print and 1 takes two seconds to print, then 1 should wait for 0 to print and so on.

```js
// Approach 1: Using promise
const wait = (i, ms) => new Promise(
    resolve => setTimeout(() => {
        console.log(i);
        resolve(i);
    }, ms)
);

let chain = Promise.resolve();

for (let i = 0; i < 10; i++) {
    chain = chain.then(() => {
        return wait(i, Math.random() * 1000);
    });
}

// Approach 2: Using async/await
async function printNumbersUsingAsync() {
  for (let i = 0; i < 10; i++) {
    await wait(i, Math.random() * 1000);
  }
}

printNumbersUsingAsync();
```

## Common mistakes

### Not using await

```js
async function foo() {
  try {
    canRejectOrReturn();
  } catch (e) {
    return 'caught';
  }
}
```

Note that we are not using `await` or `return`. __`foo` will always resolve with `undefined`__ without waiting for 1 second. However, the promise does start its execution. If there are side-effects, they will happen

### Async functions in callbacks

We often use `async` functions in `.map` or `.filter` as callbacks.

```js
const url = 'https://api.github.com/users';

const fetchPublicReposCount = async (username) => {
  const response = await fetch(`${url}/${username}`);
  const json = await response.json();
  return json['public_repos'];
}

const users = ['ArfatSalman', 'octocat', 'norvig'];

const counts = users.map(async username => {
  const count = await fetchPublicReposCount(username);
  return count;
});

// To read resolve values of counts. we can use Promise.all()
// or this syntax

const results = async() => {
  for await(const count of counts) {
    console.log(count);
  }
}

```

We might expect that counts variable will contain the numbers of repos. __However, as we have seen earlier, all async functions return promises.__ Hence, `counts is actually an array of promises`. We might need `Promise.all` to get the resolve values.

```js
// Another approach: define new async function and execute it
const getCounts = async () => {
  for (const name of users) {
    const count = await fetchPublicReposCount(name);
    console.log(count);
  }
}

getCounts();
```

## Reference

- [Deeply Understanding JavaScript Async and Await with Examples](https://blog.bitsrc.io/understanding-javascript-async-and-await-with-examples-a010b03926ea)
- [The Async Await Episode I Promised](https://www.youtube.com/watch?v=vn3tm0quoqE)
- [Promise - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

Understand how Javascript handle asynchronous code.

About Promise, Async and Await in Javascript

`debounce/throttle` can improve the performance of your site by reducing the number of times a particular action is taken.

## Debounce

Debouncing works by delaying our function call by a set period of time. __If nothing happens during that time then the function will run just like normal, but if something happens that causes the function to be called again during the delay then the delay will be restarted__. This means a debounced function will only run once after a certain delay since the last time it was triggered.

```js
function debounce(cb, delay = 250) {
  let timeout

  return (...args) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      cb(...args)
    }, delay)
  }
}
```

## Throttle

Like debounce, throttle is also used to limit the number of times a function is called, but, unlike debounce, __throttle will call the function passed to it every time the delay ends__ as long as the trigger for the function is still happening

The main difference you can see in throttle vs debounce is that __our callback is invoked immediately and not inside the timeout__.

Here is a simple implementation of `throttle`:

```js
function throttle(cb, delay = 250) {
  let shouldWait = false

  return (...args) => {
    if (shouldWait) return

    cb(...args)
    shouldWait = true
    setTimeout(() => {
      shouldWait = false
    }, delay)
  }
}
```

This means if our user types one character every 300 milliseconds and our delay is 1 second our throttle function will work like this.

```js
// Type S - Call throttled function with S
// Type a - Do nothing: 700ms left to wait
// Type m - Do nothing: 400ms left to wait
// Type a - Do nothing: 100ms left to wait
// Delay is over - Nothing happens
// Type n - Call throttled function with Saman
// No more typing
// Delay is over - Nothing happens
```

If you pay close attention you will notice that our second call to the throttled function doesn't run until 1,200 milliseconds later. That is 200 milliseconds after our delay. Now depending on your throttle needs this may be fine, but in most cases you want to queue up any action that occurs in your throttle so that as soon as your delay is over it will call the previous iteration of the function. Let's look at how to implement that.

```js
function throttle(cb, delay = 1000) {
  let shouldWait = false
  let waitingArgs

  const timeoutFunc = () => {
    if (waitingArgs == null) {
      shouldWait = false
    } else {
      cb(...waitingArgs)
      waitingArgs = null
      setTimeout(timeoutFunc, delay)
    }
  }

  return (...args) => {
    if (shouldWait) {
      waitingArgs = args
      return
    }

    cb(...args)
    shouldWait = true
    setTimeout(timeoutFunc, delay)
  }
}
```

__*Explaination:*__

- If user type normally, for example 1 character each 1 second, it will work the same with the basic approach. Our target here is in case of multiple events fire in that 1s interval, we will `call the function immediately` and then __after 1s, we will fire the callback with all waiting arguments__.
- Here is the thinking flows for the above solution:
  - We have 2 variables, `shouldWait` to determine we should wait or not, default is `false`, since `throttle` will call the callback immediately. Second is `waitingArgs` store the arguments of last call in that `1s` interval, we will use it call 1 more time after the interval finished
  - If `shouldWait` then update `waitingArgs`
  - If not, callback with current arguments (firs time or first fire of next interval)
  - update `shouldWait` to true
  - Set a timeout here, after 1s:
    - If `waitingArgs == null`, meaning that there is only one call in that interval then set __*shouldWait = false*__
    - If `watingArgs` exists (meaning there are multiple fires in that interval), we call callback once again immediately, `shouldWait` still true, after 1s ⇒ set `waitingArgs = null` ⇒ __*shouldWait = false*__ ⇒ process next.

- __It would be easier for you to understand when using this codepen as a playground:__ [codepen](https://codepen.io/tadashii1417-the-decoder/pen/ExERjxj?editors=1010)

### Throttling Examples

The user is scrolling down your infinite-scrolling page. You need to check how far from the bottom the user is. If the user is near the bottom, we should request via Ajax more content and append it to the page.

Here our beloved `_.debounce` wouldn’t be helpful. It only would trigger only when the user stops scrolling.. and __we need to start fetching the content before the user reaches the bottom__.

With `_.throttle` we can warranty that we are checking constantly how far we are from the bottom.

- __*Codepen example*__ [Link](https://codepen.io/dcorb/pen/eJLMxa)

## Take-away notes

- Both `debounce`, `throttle` used to limit the number of times a function is called ⇒ better performance
- `debounce`: Grouping a sudden burst of events (like keystrokes) into a single one.
  - __Use case__: when user input, if no more input after 1s, validate or fetch API ...
- `throttle`: callback function will be called __immediately__ and __every time the delay ends__ as long as the trigger for the function is still happening (interval). 
  - Guaranteeing a constant flow of executions every X milliseconds. Like checking every 200ms your scroll position to trigger a CSS animation.
  - __Use case 1__: when user `resize window` or `mouse movement`, there are tremendous amount of event call, we want to __react immediately to that event every `n` second__ to improve UX. We do not use `debounce` here since we will have to wait until user stop fire event, then react ⇒ not really good UX here, but it still depend on specific situation.
  - __Use case 2__: `Infinite scrolling`

## Reference

- [Debouncing and Throttling Explained Through Examples](https://css-tricks.com/debouncing-throttling-explained-examples/)
- [How to implement debounce and throttle - web dev simplified](https://blog.webdevsimplified.com/2022-03/debounce-vs-throttle/)
- [Debounce va Throttle trong JS](https://techmaster.vn/posts/36575/debounce-va-throttle-trong-javascript-cai-thien-hieu-suat-ung-dung-cua-ban)

Understand what is debounce, throttle functions do and how to implement it from scratch.

Debounce and Throttle in Javascript

The standard DOM Events describes 3 phases of `event propagation`:

- `Capturing phase` – the event goes down to the element.
- `Target phase` – the event reached the target element.
- `Bubbling phase` – the event bubbles up from the element.

![Event Propagation](https://javascript.info/article/bubbling-and-capturing/eventflow.svg)

For a click on `<td>` the event first goes through the ancestors chain down to the element (`capturing phase`), then it reaches the target and triggers there (`target phase`), and then it goes up (`bubbling phase`), __calling handlers on its way.__

We only talked about bubbling, because the capturing phase is rarely used.

## Bubbling

> __When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.__

![Event Bubbling](https://javascript.info/article/bubbling-and-capturing/event-order-bubbling.svg)

```js
<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>
```

if we click on `<p>`, then we’ll see 3 alerts: `p` → `div` → `form`.The process is called `bubbling`, because events `bubble` from the inner element up through parents like a bubble in the water.

__*event.target*__

A handler on a parent element can always get the details about where it actually happened. __The most deeply nested element__ that caused the event is called a target element, accessible as `event.target`.

Note the differences from `this` (=`event.currentTarget`):

For instance, if we have a single handler `form.onclick`, then it can “catch” all clicks inside the form. No matter where the click happened, it bubbles up to `<form>` and runs the handler.

In `form.onclick` handler:
- `this` (=`event.currentTarget`) is the `<form>` element, because the handler runs on it.
- `event.target` is the __actual element__ inside the form that was clicked.
- It’s possible that `event.target` could equal `this` – it happens when the click is made directly on the `<form>` element.

> `event.stopPropagation()` stop the bubbling

> If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute, to stop all of them: `event.stopImmediatePropagation()` 

## Event Delegation

`Capturing` and `bubbling` allow us to implement one of the most powerful event handling patterns called `event delegation`.

The idea is that if __we have a lot of elements handled in a similar way__, then instead of assigning a handler to each of them – *we put a single handler on their common ancestor*.

In the handler we get `event.target` to see where the event actually happened and handle it.

Here is the algorithm:
- Put a single handler on the container.
- In the handler – check the source element `event.target`.
- If the event happened inside an element that interests us, then handle the event.

```js
document.getElementById('id').addEventListener('click', (event) => {
  if(event.target.tagName === 'li') {
    // do something ...
  }
});
```

*Benifits:*
- Simplifies initialization and saves memory: no need to add many handlers.
- Less code: when adding or removing elements, no need to add/remove handlers.

*The delegation has its limitations of course:*
- First, the event must be `bubbling`. __Some events do not bubble__. Also, low-level handlers should not use `event.stopPropagation()`.
- Second, the delegation may add CPU load, because the container-level handler reacts on events in any place of the container, no matter whether they interest us or not. But usually the load is negligible, so we don’t take it into account.

## Reference

- [Bubbling and Capturing - javascript.info](https://javascript.info/bubbling-and-capturing)
- [Event delegation - javascript.info](https://javascript.info/event-delegation)


Understand how event capture and bubble and event delegation.

Javascript Event Propagation

## About `var`, `let`, `const`

Variables declared by `let` have their scope in the block for which they are declared, as well as in any contained sub-blocks. In this way, `let` works very much like `var`. The main difference is that the scope of a `var` variable is the entire enclosing function:

```js
function varTest() {
  var x = 1;
  {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
```

At the top level of programs and functions, `let`, unlike `var`, does not create a property on the global object. For example:

```js
var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined
```

> __`let`, `const` block scope__

> __`var` function scope__

JavaScript has the following kinds of scopes:

- `Global scope`: The default scope for all code running in script mode.
- `Module scope`: The scope for code running in module mode.
- `Function scope`: The scope created with a function.

In addition, variables declared with `let` or `const` can belong to an additional scope:

- `Block scope`: The scope created with a pair of curly braces (a block).

### Temporal dead zone (TDZ)

A `let` or `const` variable is said to be in a `temporal dead zone (TDZ)` from the *start of the block* until code execution reaches the line where the variable is declared.

While inside the TDZ, the variable has not been initialized with a value, and any attempt to access it will result in a `ReferenceError`.

__The term `temporal` is used because the zone depends on the order of execution (time) rather than the order in which the code is written (position)__. For example, the code below works because, even though the function that uses the let variable appears before the variable is declared, the function is called outside the TDZ.

```js
{
    // TDZ starts at beginning of scope
    const func = () => console.log(letVar); // OK

    // Within the TDZ letVar access throws `ReferenceError`

    let letVar = 3; // End of TDZ (for letVar)
    func(); // Called outside TDZ!
}
```

## Conclusion

- `var` have function scope, `let` & `const` have block scope
  - If we define again a variable in the same scope using `var`, it is ok, but with `let` & `const` it will throw an error.
- All variables define with `var`, `let`, `const` get hoisted, but with `let` & `const` we have to consider about `Temporary Dead Zone`
- Value of `var`, `let` can be updated but `const` can't and it have to define the value right from the beginning.


var, let, const in JS

## Primitive Types

- String
- Number (BigInt)
- Boolean
- undefined: typeof undefined
- null: typeof Object
- Symbol
Symbol is a built-in object whose constructor returns a symbol primitive — also called a Symbol value or just a Symbol — that’s guaranteed to be unique. Symbols are often used to add unique property keys to an object that won’t collide with keys any other code might add to the object, and which are hidden from any mechanisms other code will typically use to access the object.
Symbol('foo') === Symbol('foo') // False

Note: NaN is the only value that doesn't equal to itself

## Falsy values

|Value|Description|
|---|---|
|false|The keyword false|
|0|The Number zero (also 0.0, 0x0))|
|-0|The Number negative zero (so, also -0.0, etc., and -0x0).|
|0n|The BigInt zero (so, also 0x0n). Note that there is no BigInt negative zero — the negation of 0n is 0n.|
|"", '', ``|Empty string value|
|null|the absence of any value.|
|undefined| the primitive value.|
|NaN|not a number.|
|document.all|Objects are falsy if and only if they have the [[IsHTMLDDA]] internal slot.That slot only exists in document.all|

## Var, let, const

- Read here: [var, let, const in JS](https://iamcoding.vercel.app/var-let-const-in-js)

## Functions
- Read here: [All about Javascript functions](https://iamcoding.vercel.app/about-this-pointer-in-javscript)


Javascript from basic to advanced topics.

Javascript fundamentals

Personally I would recommend you to watch this [awesome video](https://www.youtube.com/watch?v=8aGhZQkoFbQ) to get a grasp about `Event Loop`

## ___JavaScript Runtime Environment (JRE)___

Javascript runs inside an environment called `JavaScript Runtime Environment`. JRE is responsible for making JavaScript asynchronous. It is the reason JavaScript is able to add event listeners and make HTTP requests asynchronously.

JRE is just like a container which consists of the following components:

- `JS Engine` (Callstack + Heap)
- `Web API`
- `Message queue` or Callback queue
- `Event Table`
- `Event loop`

![javascript engine](//images.ctfassets.net/tk7dn5bsmtgs/1DfkwhLXpuvsapwTArFqgM/91797af8f589e6578e071de15d7964d9/js-engine.webp)

___Callstack___

Execution context stack (ECS) is a stack data structure which follows the Last In First Out (LIFO) principle. ECS stores the execution context for each function. ___Execution context___ is defined as an object which stores `local variables`, `functions` and `objects`. 

Primitive values like `int`, `bool` etc are stored inside the execution context object while __function definitions and objects are not stored inside the execution context object, they are stored inside the heap__. Execution context object just has the reference or memory address of where these function definitions and objects are stored.

By default, at the bottom of the ECS, we have a `global execution context` which deals with all the code in the global scope. Each function has its own execution context called functional execution context which gets inserted on the top of ECS as and when the function is called in the code. If the same function is called twice like in recursion, it will have two different functional execution context in the ECS.

When the execution of the function is completed, JS engine itself removes it from the ECS and starts executing the function on the top of the stack.

> As JavaScript engine has only one ECS, it can execute only one thing at a time which is at the top of the ECS. This is what makes JavaScript single threaded.

- ___Heap___

`Heap` is a large unstructured data structure which stores all the dynamic data like `function definitions`, `objects`, `arrays` etc. Execution context stack just contains their reference or in other words stores their memory addresses where these function definitions, objects and arrays are stored. The memory occupied in the heap continues to exist even after the JavaScript code execution has completed. They are removed by the JavaScript Garbage Collector.

___Web API___

`Web APIs` are not part of the JS engine but they are part of the JavaScript Runtime Environment which is provided by the browser. JavaScript just provides us with a mechanism to access these API’s. As Web APIs are browser specific, they may vary from browser to browser. There may be cases where some Web APIs may be present in one browser but not in other.

Examples:

- __DOM API for manipulating the DOM__. `document.getElementById,addEventListerner`, `document.querySelectorAll`, etc. are part of the DOM API provided by the browser which we can access using JavaScript.
- `AJAX` calls or `XMLHttpRequest`. 
- Timer functions like `setTimeout` and `setInterval` are also provided by the browser.

__*Event Table*__

When JavaScript engine finds any Web API method, it sends that method to an `event table`, where it waits till an event occurs. 
- In the case of AJAX calls, the JS engine will send the AJAX calls to the event table and will continue the execution of code after the Ajax call. AJAX call will wait in the event table until the response from the AJAX call is returned. 
- In case of timer function like `setTimeout`, it waits until the timer count becomes zero.

__*Message Queue (Callback Queue, Event Queue)*__

`Message Queue` is a queue data structure which follows __First In First Out__ principle. It stores all the messages which are moved from the event table to the event queue. Each message has an associated function. Callback queue maintains the order in which the message or methods were added in the queue.

`Web API` callbacks are moved from the `Event table` to the `Event queue` when an event occurs. For example, when AJAX calls are completed and the response is returned, it is moved from the event table to the event queue. Similarly, when the setTimout method waiting time becomes zero it is moved from the event queue to the event table.

> Inside the Message queue, the tasks are broadly classified into two categories, namely `micro-tasks` and `macro-tasks` (or just __task queue__).

> `Micro-task queue` has a higher priority, meaning that `Macro-task` will be added to the Callstack when all `Micro-task` finished

- __*Microtask*__: `Promise callback`, `process.nextTick()`, `async func`, `queueMicroTask`
- __*Macrotask*__: `setTimeout`, `setInterval`, `setImmediate`

__*Event Loop*__

Methods are executed neither in the event table nor in the event queue. They are executed by the `JavaScript engine`, only if it is present in the ECS. So, for the execution of any method, we need to move that method from the `callback queue` to the execution context stack. This is what the event loop does! __Event loop continuously checks if the execution context stack is empty and if there are any messages in the event queue.__ It will move the method from the callback queue to ECS *only when the execution context stack is empty.*

## Examples

It would be easier for you to visualize the execution flow of each below code block by using [JS Visualizer](https://www.jsv9000.app/).

### Using setTimeout and Promise

```js
console.log('start');
setTimeout(() => {console.log('timeout')}, 0);
Promise.resolve('promise').then(res => console.log(res));
console.log('end';

// Result
// start => end => promise => timeout
```

- On the first line, the function will be added to callstack and execute immedidately
- The second line, timeout is 0, therefore Web API will move it directly to macro-task-queue
- The third line, the callback will be added to micro-task queue
- The fourth line, will be added to callstack and then execute immediately
- At this point, callstack is now empty. We will move task from microtask queue to callstack => print out `promise`
- Lastly, move task from macroqueue to callstack

### Async / Await

- By adding `async` to a function, meaning that it will return `Promise.resolve(...)`, whatever the function return
- `await` to pause the execution of the function

![async await in event loop](//images.ctfassets.net/tk7dn5bsmtgs/moApZ78slmzndpWc3O3le/48d6c022e9f0f87d0d72e35b0bb03b79/async-event-loop.gif)

- 1, First, the engine encounters a `console.log`. It gets popped onto the call stack, after which `Before function!` gets logged.

- 2, Then, we invoke the async function `myFunc()`, after which the function body myFunc runs. On the very first line within the function body, we call another `console.log`, this time with the string In function!. The `console.log` gets added to the call stack, logs the value, and gets popped off.

- 3, The function body keeps on being executed, which gets us to the second line. Finally, we see a `await` keyword! 🎉 The first thing that happens is that the value that gets awaited gets executed: the function `one` in this case. It gets popped onto the call stack, and eventually returns a resolved promise. Once the promise has resolved and one returned a value, the engine encounters the `await` keyword.

- 4, When encountering an `await` keyword, the `async` function gets `suspended`. ✋🏼 The execution of the function body gets paused, and the rest of the async function gets to run in a microtask instead of a regular task!

- 5, Now that the `async function myFunc` is suspended as it encountered the await keyword, the engine jumps out of the `async function` and continues executing the code in the execution context in which the async function got called: the global execution context in this case! 🏃🏽‍♀️

- 6, Finally, there are no more tasks to run in the global execution context! The event loop checks to see if there are any `microtasks` queued up: and there are! The async myFunc function is queued up after resolving the valued of one. `myFunc` gets popped back onto the call stack, and continues running where it previously left off.
The variable res finally gets its value, namely the value of the resolved promise that one returned! We invoke `console.log` with the value of res: the string One! in this case. One! gets logged to the console and gets popped off the call stack! 😊

Finally, all done! Did you notice how async functions are different compared to a promise then? __The await keyword suspends the async function__, whereas the Promise body would've kept on being executed if we would've used then!

## Reference

- [Internals Javascript Engine](https://blog.bitsrc.io/javascript-internals-javascript-engine-run-time-environment-settimeout-web-api-eeed263b1617)
- [Event loop in Javascript](https://towardsdev.com/event-loop-in-javascript-672c07618dc9)

Explain about different components of Javascript runtime environment

Javascript Runtime Environment and Event Loop


__Hoisting__ refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Hoisting allows functions to be safely used in code before they are declared. The behavior of hoisting is different, and there are 3 cases only:

- Function
- Variable 
- Class

## Function hoisting

- With `function declaration`, JS will hoist the function (including body). Therefore, you can call a function even the function is not define yet.

```js
catName("Tiger"); // My cat's name is Tiger
function catName(name) { console.log("My cat's name is " + name)}
```

- With `function expression` is not hoisted by default, just return `undefined` with we access it before declaration.

## Variable hoisting

`Hoisting` works with variables too, so you can use a variable in code before it is declared and/or initialized. However JavaScript only __hoists declarations, not initializations!__

- __*var hoisting*__ The declaration will be hoisted and the default value is `undefined`

```js
console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
var num = 6; // Initialization and declaration.
console.log(num); // Returns 6 after the line with initialization is executed.
```

- __*let*__ and __*const*__ are also hoisted but, unlike var, are not initialized with a default value. An `ReferenceError exception` will be thrown if a variable declared with let or const is read before it is initialized.

## Class hoisting

- `class declaration` are hoisted, which means that JavaScript has a reference to the class. However the class is not initialized by default, so any code that uses it before the line in which it is initialized is executed will throw a `ReferenceError`.

- `class expression` are not hoisted

## Reference

- [Hoisting MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)

Understand about hoisting and how it behave in different cases.

TAGGED POSTS Javascript