javascript engine

javascript

Avatar

dynamic programming

CSS3 wallpaper

Event propagation

debounce and throttle

Javascript

Van Truong

algorithm

`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

Let get started with the *Fibonacci sequence problem*, `F[n] = F[n-1] + F[n-2]`

- __*Bottom up*__

```js
const f = new Array(N+1);
f[0] = 0;
f[1] = 1;

for (let i = 2; i <= N; i++) {
  f[i] = f[i-1] + f[i-2];
}

return f[n]
```

- __*Top down*__ use `recursion` + `memoization` (cache)

```js
const f = new Array(N+1).fill(-1); // use -1 to mark as not calculated

function cal(int i) {
  if (i == 0) return 0;
  if (i == 1) return 1;

  if(f[i] != -1) return f[i];
  f[i] = cal(i-1) + cal(i-2);
  return f[i];
}

return cal(n);
```

### When to use DP ?

- Counting problems: count number of way to do something.
  - [Climbing Stairs](https://leetcode.com/problems/climbing-stairs/)

- Optimisation problems:
  - find min (`BFS` => `dijkstra` => `DP`)
  - find max
  - pattern: deciding to do something at one step may affect the ability to do something in the future.

__Example 1:__ [Longest Increasing Subsequence (LIS)](https://leetcode.com/problems/longest-increasing-subsequence/)

__Step 1__: Defining state:
- `f[i]` length of the longest increasing subsequence that __ended at__ `A[i]`

__Step 2__: Find the relation between problems and it subproblems
- `f[i] = max(f[j] + 1)` with the conditions `A[j] < A[i]` and `j < i`

__Step 3__: Base cases: `f[0] = 1`

```js
// Bottom up approach
var lengthOfLIS = function(nums) {
    const size = nums.length;
    const f = new Array(size).fill(1); // f[i] LIS that ended with nums[i]
    f[0] = 1;

    for(let i = 1; i < size; i++) {
        for(j = 0; j < i; j++) {
            if(nums[i] > nums[j]) {
                f[i] = Math.max(f[i], f[j] + 1);
            }
        }
    }

    let res = f[0];
    for(let i = 1; i < size; i++) {
        res = Math.max(res, f[i]);
    }

    return res;
};
```

```cpp
// Top-down approach

vector<int> fx(n, -1);
int lengthOfLIS(int i) { // to calculate f[i]
	if (fx[i] != -1) return fx[i]; // cache
	if (i == 0) return fx[i] = 1; // base
	int res = 1;
	for(int j = i-1; j >= 0; j–-) { // O(N)
		if (a[i] > a[j]) {
			res = max(res, lengthOfLIS(j) + 1);
		}
}
fx[i] = res;
return res;
}
```

__*Other examples*__:
- [House Robber](https://leetcode.com/problems/house-robber/)
- [Min Cost Climbing Stairs](https://leetcode.com/problems/min-cost-climbing-stairs/)

__Example 2:__ [Longest Common Subsequence (LCS)](https://leetcode.com/problems/longest-common-subsequence/)

__Step 1__: Defining state:
- `f[i][j]`: the len of longest common sequence when considering `s[0…i]` and `t[0..j]`

__Step 2__: Find the relation between problems and it subproblems

```py
if s[i] == t[j]:
	f[i][j] = f[i-1][j-1] + 1

if s[i] != t[j]:
	f[i][j] = max(f[i-1][j], f[i][j-1])
```

```js
// Solution for https://leetcode.com/problems/longest-common-subsequence/

var longestCommonSubsequence = function (text1, text2) {
  const N1 = text1.length;
  const N2 = text2.length;

  const fx = new Array(N1 + 1); // fx[i][j]: LCS text1[0..i-1] & text2[0..j-1]
  for (let i = 0; i < N1 + 1; i++) {
    fx[i] = new Array(N2 + 1).fill(0);
  }

  for (let i = 1; i < N1 + 1; i++) {
    for (let j = 1; j < N2 + 1; j++) {
      if (text1[i - 1] === text2[j - 1]) {
        fx[i][j] = fx[i - 1][j - 1] + 1;
      } else {
        fx[i][j] = Math.max(fx[i - 1][j], fx[i][j - 1]);
      }
    }
  }

  return fx[N1][N2];
};
```


Understand dynamic programming step by step

Dynamic Programming

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

## CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories:

- __Basic selectors__
  - Type selector: `input`, `div`, `h1`
  - Class selector: `.class`
  - ID selector: `#id`
  - Attribute selectors: `[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`
- __Grouping selectors__
  - `Selector list ","` list all matching
  - `Descendant combinator " "`: selects nodes that are descendants of the first element (all B inside A)
  - `Child combinator ">"`: selects nodes that are direct children of the first element
  - `General Sibling combinator "~"`: second element follows the first (though not necessarily immediately), and both share the same parent
  - `Adjacent sibling combinator "+"`: The `+` combinator matches the second element only if it __immediately__ follows the first element.
- __Pseudo-class selectors__ (select elements based on a certain state)
  - State examples `:enabled`, `disabled`, `:checked`
  - Tree-structural:
    - `nth-child`     
    - `:nth-last-child`
    - `:first-child`
    - `:last-child`
    - `:only-child`
    - `:nth-of-type`
    - `:nth-last-of-type`
    - `:first-of-type`
    - `:last-of-type`
    - `:only-of-type`
  - User action: `:hover`, `:active`, `:focus`
- __Pseudo-elements selectors__ lets you style a specific part of the selected element(s)
  - Examples: `::after`, `::before`, `::first-letter`, `::first-line`, `::marker`   

Here is the detail of all available selectors: [Appendix A - Selector Examples](#appendix-selector-examples)

__*Reference*__

- [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
- Reference W3School [Link](https://www.w3schools.com/cssref/css_selectors.asp)
- Online tool [Link](https://www.w3schools.com/cssref/trysel.asp)

## CSS Box model

`The CSS box model` as a whole applies to block boxes and defines how the different parts of a `box — margin`, `border`, `padding`, and `content` — work together to create a box that you can see on a page. Inline boxes use just some of the behavior defined in the box model.

Important note:
- `display: block`: The `width` and `height` properties are respected
- `display: inline`: The `width` and `height` will not apply

### Parts of a box

- __Content box__: The area where your content is displayed; size it using properties like `inline-size` and `block-size` or `width` and `height`.
- __Padding box__: The padding sits around the content as white space;
- __Border box__: The border box wraps the content and any padding;
- __Margin box__: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements;

![CSS box model](//images.ctfassets.net/tk7dn5bsmtgs/3Q6M4cl0OyOEqNVlr0Kj7D/62857a2317620338b33693f9e32e0238/box-model.png)

### The standard CSS box model

By default, `box-size: content-box`

```css
.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}
```

The actual space taken up by the box will be 410px wide (`350 + 25 + 25 + 5 + 5`) and 210px high (`150 + 25 + 25 + 5 + 5`). Note: we do not count margin when it comes to actual size of the box.

### The alternative CSS box model

The `content area width` is that `width` minus the width for the `padding` and `border` (see image below). No need to add up the border and padding to get the real size of the box.

> content width = width - padding - border

```css
.box {
  box-sizing: border-box;
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

/* Now, the actual space taken up by the box will be 350px in the inline direction and 150px in the block direction. */
```

To use the alternative box model for all of your elements (which is a common choice among developers), set the box-sizing property on the `<html>` element and set all other elements to inherit that value:

```css
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
```

__*Reference*__

- [The box model - mdn](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)

## CSS Units

- `font-size`: `rem`
- `width`: `%` in a combination with `max-width`, `ch`
- `height`: question yourself do I really need to set height, if yes => use a min-height
- `padding/margin`: `rem` or `em`
- media querries: `em`
- `px` only for little things like shadows, borders, ...
- use `vw/vh` for bigger layouts like background
- `ch` is relative to the width of the number 0 of the current font
  - used to size the width of a paragraph
  - For example `max-width: 40ch;` = maximum 40 characters per line.

## Specificity

__Specificity__ is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. When there are multiple CSS rules apply to the same element, Specificity will help us determine which one should be selected.

Let’s take a look at how the numbers are actually calculated:

![Specificity](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/specificity-calculationbase_rhrovi.png?w=570&ssl=1)

- If the element has inline styling, that automatically wins (1,0,0,0 points)
- For each ID value, apply 0,1,0,0 points
- For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points
- For each element reference, apply 0,0,0,1 point

__*Important Notes:*__

- When we'are having the same specificity value, the __last declared selector__ has precedence.
- Styles for a `directly targeted` element will always take precedence over `inherited styles`, regardless of the specificity of the inherited rule. Given the following CSS and HTML. The `h1` will be __purple__ because the `h1` selector targets the element specifically, while the green is inherited from the `#parent` declarations.

```css
#parent { color: green }
h1 { color: purple }
```

```html
<html>
  <body id="parent">
    <h1>Here is a title!</h1>
  </body>
</html>
```

- The universal selector `(*)` has no specificity value `(0,0,0,0)`
- `Pseudo-elements` (e.g. :first-line) get `0,0,0,1` unlike their `psuedo-class` brethren which get `0,0,1,0`
- The `pseudo-class :not()` adds no specificity by itself, only what’s inside it’s parentheses.
- The `!important` value appended a CSS property value is an __automatic win__. It overrides even inline styles from the markup. The only way an `!important` value can be overridden is with another `!important` rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.
- Using `!important` to override specificity is considered a __bad practice__ and should be avoided for this purpose. Instead of using `!important` to override foreign CSS (from external libraries, like Bootstrap or normalize.css), import the third-party scripts directly into cascade layers. If you must use `!important` in your CSS, comment your usage so future code maintainers know why the declaration was marked important and know not to override it.

__*Reference*__
- [CSS Specificity - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
- [Specifics on CSS Specificity - CSS Tricks](https://css-tricks.com/specifics-on-css-specificity/)

## How to center everything !

__*Horizontally*__
- `inline elements`: You can center inline elements horizontally, within a __block-level parent__ element, with just:   

```css
/* Applied to block-level parent, not the element itself */
.center {  text-align: center }
```
- `block-level element`: we can use `margin: 0 auto;`

__*Vertically*__
- `inline elements`: using table with vertical-align

```css
.center-table p {
  display: table-cell;
  vertical-align: middle;
}
```
> The `vertical-align` CSS property sets vertical alignment of an `inline`, `inline-block` or `table-cell` box.

- `block-level element`: we can vertically align a block by:
```css
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
```
> The CSS `left` property is based on the size of the __parent__ element.

> The `transform` property is based on the size of the __target__ element.

__*Both Horizontally & Vertically*__
```css
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
```css
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
```css
.center {
  display: grid;
  place-items: center;
}
```

__*Reference:*__
- [Centering in CSS: A Complete Guide - css tricks](https://css-tricks.com/centering-css-complete-guide/)

## Position

## Layout (flex, grid)

[CSS Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)

## Appendix Selector Examples

| Selector | Example | Example description |
|---|---|---|
| `.class` | .intro | Selects all elements with class="intro" |
| `.class1.class2` | .name1.name2 | Selects all elements __with both__ name1 and name2 set within its class attribute |
| `.class1 .class2` | .name1 .name2 | Selects all elements with name2 that is a descendant of an element with name1 |
| `#id` | #firstname | Selects the element with id="firstname" |
| `*` | `*` | Selects all elements |
| `element` | p | Selects all `<p>` elements |
| `element.class` | p.intro | Selects all `<p>` elements with class="intro" |
| `element,element` | div, p | Selects all `<div>` elements and all `<p>` elements |
| `element element` | div p | Selects all `<p>` elements inside `<div>` elements |
| `element>element` | div > p | Selects all `<p>` elements where the parent is a `<div>` element |
| `element+element` | div + p | Selects the first `<p>` element that is __placed immediately__ after `<div>` elements |
| `element1~element2` | p ~ ul | Selects every `<ul>` element that is __preceded__ by a `<p>` element |
| `[attribute]` | `[target]` | Selects all elements with a target attribute |
| `[attribute=value]` | `[target=_blank]` | Selects all elements with target="_blank" |
| `[attribute~=value]` | `[title~=flower]` | Selects all elements with a title attribute containing the word "flower" |
| `[attribute^=value]` | `a[href^="https"]` | Selects every `<a>` element whose href attribute value begins with "https" |
| `[attribute$=value]` | `a[href$=".pdf"]` | Selects every `<a>` element whose href attribute value ends with ".pdf" |
| `:active` | a:active | Selects the active link |
| `::after` | p::after | Insert something after the content of each `<p>` element |
| `::before` | p::before | Insert something before the content of each `<p>` element |
| `:checked` | input:checked | Selects every checked `<input>` element |
| `:default` | input:default | Selects the default `<input>` element |
| `:disabled` | input:disabled | Selects every disabled `<input>` element |
| `:empty` | p:empty | Selects every `<p>` element that has no children (including text nodes) |
| `:enabled` | input:enabled | Selects every enabled `<input>` element |
| `:first-child` | p:first-child | Selects every `<p>` element that is the first child of its parent |
| `::first-letter` | p::first-letter | Selects the first letter of every `<p>` element |
| `::first-line` | p::first-line | Selects the first line of every `<p>` element |
| `:first-of-type` | p:first-of-type | Selects every `<p>` element that is the first `<p>` element of its parent |
| `:focus` | input:focus | Selects the input element which has focus |
| `:fullscreen` | :fullscreen | Selects the element that is in full-screen mode |
| `:hover` | a:hover | Selects links on mouse over |
| `:in-range` | input:in-range | Selects input elements with a value within a specified range |
| `:indeterminate` | input:indeterminate | Selects input elements that are in an indeterminate state |
| `:invalid` | input:invalid | Selects all input elements with an invalid value |
| `:lang(language)` | p:lang(it) | Selects every `<p>` element with a lang attribute equal to "it" (Italian) |
| `:last-child` | p:last-child | Selects every `<p>` element that is the last child of its parent |
| `:last-of-type` | p:last-of-type | Selects every `<p>` element that is the last `<p>` element of its parent |
| `:link` | a:link | Selects all unvisited links |
| `::marker` | ::marker | Selects the markers of list items |
| `:not(selector)` | :not(p) | Selects every element that is not a `<p>` element |
| `:nth-child(n)` | p:nth-child(2) | Selects every `<p>` element that is the second child of its parent |
| `:nth-last-child(n)` | p:nth-last-child(2) | Selects every `<p>` element that is the second child of its parent, counting from the last child |
| `:nth-last-of-type(n)` | p:nth-last-of-type(2) | Selects every `<p>` element that is the second `<p>` element of its parent, counting from the last child |
| `:nth-of-type(n)` | p:nth-of-type(2) | Selects every `<p>` element that is the second `<p>` element of its parent |
| `:only-of-type` | p:only-of-type | Selects every `<p>` element that is the only `<p>` element of its parent |
| `:only-child` | p:only-child | Selects every `<p>` element that is the only child of its parent |
| `:optional` | input:optional | Selects input elements with no "required" attribute |
| `:out-of-range` | input:out-of-range | Selects input elements with a value outside a specified range |
| `::placeholder` | input::placeholder | Selects input elements with the "placeholder" attribute specified |
| `:read-only` | input:read-only | Selects input elements with the "readonly" attribute specified |
| `:read-write` | input:read-write | Selects input elements with the "readonly" attribute NOT specified |
| `:required` | input:required | Selects input elements with the "required" attribute specified |
| `:root` | :root | Selects the document's root element |
| `::selection` | ::selection | Selects the portion of an element that is selected by a user |
| `:target` | .news:target | Selects the current active .news element (clicked on a URL containing that anchor name) |
| `:valid` | input:valid | Selects all input elements with a valid value |
| `:visited` | a:visited | Selects all visited links |


Must-know knowledge about CSS to be a Frontend engineer.

CSS Fundamental Knowledge

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

## Function in JS

`Function declarations` are not part of the regular top-to-bottom flow of control. They are conceptually moved to the top of their scope and can be used by all the code in that scope. This is sometimes useful because it offers the freedom to order code in a way that seems meaningful, without worrying about having to define all functions before they are used.

We defined square with only one parameter. Yet when we call it with three, the language doesn’t complain. It ignores the extra arguments and computes the square of the first one.

JavaScript is extremely broad-minded about the number of arguments you pass to a function. ***If you pass too many, the extra ones are ignored. If you pass too few, the missing parameters get assigned the value undefined.***

Define function:

```js
// Approach 1
let handle = function() {}

// Approach 2
function handle() {}

// Approach 3: arrow function
const handle = () => {}
```

**Function Expression vs Function Declaration?**

Function declaration using `function` keyword, after that is function's name.

Function expression will start will `var`, `let`, `const` keyword, followed by function name.

```js
// Function Declaration
function sum(x, y) {
  return x + y;
};

// Function Expression: ES5
var sum = function(x, y) {
  return x + y;
};
// Function Expression: ES6+
const sum = (x, y) => { return x + y };
```

The main different is that *__Function declaration will be hoisting, while Function expression not__*. Hoisting is JavaScript's default behavior of moving declarations to the top, meaning that you can call function declaration anywhere in your code, but with function expression you must define it before using ([About hoisting](https://iamcoding.vercel.app/about-hoisting-in-javascript))

Function declarations have the body hoisted while the function expressions (written in the form of variable declarations) only has the variable declaration hoisted.

> For variable, JavaScript only hoists declarations, not initializations.

> For function, with `Function declaration` will be hoisting by default (__including function body__), `Function expression` will not be hoisted (`undefined` or depend on TDZ)

```js
// Function Declaration
console.log(foo); // [Function: foo]
foo(); // 'FOOOOO'
function foo() {
  console.log('FOOOOO');
}
console.log(foo); // [Function: foo]

// Function Expression
console.log(bar); // undefined
bar(); // Uncaught TypeError: bar is not a function
var bar = function () {
  console.log('BARRRR');
};
console.log(bar); // [Function: bar]
```

### "this" in JS function

`this` value inside a regular function is __*dynamic*__ and depends on the invocation - or context. But `this` inside the arrow function is ***bound lexically*** and equals to `this` of the outer function.  The value of `this` inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of `this` in the closest non-arrow parent function.

*__Rules__*

- 1. If the `new` keyword is used when calling the function, `this` inside the function is a brand new object.

```js
function ConstructorExample() {
    console.log(this);
    this.value = 10;
    console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }
```

- 2. If `apply`, `call`, or `bind` are used to call/create a function, `this` inside the function is the object that is passed in as the argument.

```js
function fn() { console.log(this) }
var obj = { value: 5 };
var boundFn = fn.bind(obj);
boundFn();     // -> { value: 5 }
fn.call(obj);  // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }
```

- 3. If a function is called as a method, such as `obj.method()` — `this` is the object that the function is a property of.

```js
var obj = {
    value: 5,
    printThis: function() {
        console.log(this);
    }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }
```

- 4. If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, `this` is the `global` object. In a browser, it is the `window` object. If in `strict mode` ('use strict'), this will be `undefined` instead of the global object.

```js
function fn() { console.log(this) }

// If called in browser:
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

// If in strict mode: return undefined
```

Note that this rule is the same as rule 3 — the difference is that a function that is not declared as a method automatically becomes a property of the global object, `window`. This is therefore an implicit method invocation. When we call `fn()`, it’s interpreted as `window.fn()`, so this is `window`

- 5. In an event, `this` refers to the element that received the event.

- 6. __If multiple of the above rules apply, the rule that is higher wins and will set the this value.__

- 7. If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it’s created. *__To determine `this`, go one line above the arrow function’s creation and see what the value of this is there. It will be the same in the arrow function.__*

```js
const obj = {
    value: 'abc',
    createArrowFn: function() {
        return () => console.log(this);
    }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }
```

Going back to the `3rd` rule, when we call `obj.createArrowFn()`, `this` inside `createArrowFn` will be `obj`, as we’re calling it with dot notation. `obj` therefore gets bound to this in `arrowFn`. If we were to create an arrow function in the global scope, this would be window.

Because a class's body has a this context, `arrow functions` as class fields close over the class's this context and the `this` inside the arrow function's body will correctly point to the instance (or the `class` itself, for static fields). However, because it is a `closure`, not the function's own binding, the value of this will not change based on the execution context.

```js
var cat = { // does not create a new scope: no 'this' context -> global
    lives: 9,
    jumpsArrow: () => { this.lives--; }, // this is global object
    jumps() { this.lives--; }, // this is depend, cat.jumps -> cat
}

// Class create `this` context !!! (vs obj)
class Hero {
    constructor(heroName) {
        this.heroName = heroName;
    }
    logNameArrow = () => {
        console.log(this.heroName) // this is the class itself, since class create new context here
    }
}
```

__About function callbacks__ related to `setTimeOut`, `setInterval`, `addEventListener`...

```js
// in ES5, .bind(this) is required to help pass the this context into the function. Otherwise, by default this would be undefined.

var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

// ES6: no need to bind anymore.
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};
```

### Examples

```js
var obj = {
    value: 'hi',
    printThis: function() { console.log(this) }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}
```

```js
var obj1 = {
    value: 'hi',
    print: function() { console.log(this) },
};
var obj2 = { value: 17 };

// If rules 2 and 3 both apply, rule 2 takes precedence.
obj1.print.call(obj2); // -> { value: 17 }

// If rules 1 and 3 both apply, rule 1 takes precendence.
new obj1.print(); // -> {}
```

```js
function myFunction() {  console.log(this) }
myFunction(); // Log global object (window)

const myObject = {
  method() { console.log(this) }
};
myObject.method(); // logs myObject

function myFunction() { console.log(this) }
const myContext = { value: 'A' };
myFunction.call(myContext);  // logs { value: 'A' }
myFunction.apply(myContext); // logs { value: 'A' }
new MyFunction(); // logs an instance of MyFunction

const shape = {
  radius: 10,
  diameter() { return this.radius * 2  },
  perimeter: () => 2 * Math.PI * this.radius,
};

console.log(shape.diameter()); // 20
console.log(shape.perimeter()); // NaN

// Class create `this` context !!! (vs obj)
class Hero {
    constructor(heroName) {
        this.heroName = heroName;
    }
    logName() {
        console.log(this.heroName)
    }
    logNameArrow = () => {
        console.log(this.heroName)
    }
}

const batman = new Hero('Batman');
const superman = new Hero('superman');
batman.logName(); // Log: Batman => Since `this` is now batman instance
batman.logNameArrow(); // Log: Batman => Since `this` is alway batman instance

setTimeout(batman.logName, 1000) // Log: undefined => Since `this` is now the outer function
setTimeout(batman.logName.bind(batman), 1000) // Log: batman => Since `this` is now set to batman
setTimeout(batman.logNameArrow, 1000) // Log: batman
setTimeout(batman.logNameArrow.bind(superman), 1000) // Log: batman, bind not work on arrow function
```

```js
// Example using a function expression
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: function() { console.log('Inside `bar`:', this.foo) },
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject
// => LOG: 21, 42

// Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject
// => LOG: 21, 21
```

### Regular vs Arrow function

There are differences between arrow functions and traditional functions, as well as some limitations:

- Arrow functions don't have their own bindings to `this`, `arguments` or `super`, and should not be used as methods.
- Arrow functions don't have access to the `new.target` keyword.
- Arrow functions aren't suitable for `call`, `apply` and `bind` methods, which generally rely on establishing a scope.
- Arrow functions cannot be used as `constructors` (no `new` operator, no `prototype` property)
- Arrow functions cannot use `yield`, within its body.

Here is the details

- `arguments` object inside the regular functions contains the list of arguments. The arrow function, on the opposite, doesn't define arguments (but you can easily access the arrow function arguments using a **rest parameter** `...args`). Arrow functions don't have their own this or arguments binding. Instead, those identifiers are resolved in the lexical scope like any other variable. That means that inside an arrow function, `this` and `arguments` refer to the values of `this` and `arguments` in the environment the arrow function is defined in (i.e. "outside" the arrow function):

- Last but not least, you can define methods using the arrow function syntax inside classes. **Fat arrow methods bind `this` value to the class instance**. Anyhow the fat arrow method is invoked, this always equals the class instance, ___which is useful when the methods are used as callbacks___.

- Another change in **strict mode** is that the this binding holds the value undefined in functions that are not called as methods. When making such a call outside of strict mode, this refers to the global scope object, which is an object whose properties are the global bindings. So if you accidentally call a method or constructor incorrectly in strict mode, JavaScript will produce an error as soon as it tries to read something from this, rather than happily writing to the global scope.

*__Rest Parameters__*

```js
function max(...numbers) {
  let result = -Infinity;
  for (let number of numbers) {
    if (number > result) result = number;
  }
  return result;
}
console.log(max(4, 1, 9, -2));
// → 9
```

### Bind vs Call, Apply

Use `.bind()` when you want that function to later be called with a **certain context**, useful in events. Use `.call()` or `.apply()` when you want to **invoke the function immediately**, and **modify the context**.

`Call/apply` call the function immediately, whereas `bind` returns a function that, when later executed, will have the correct context set for calling the original function. This way you can maintain context in async callbacks and events.

- **Call** invokes the function and allows you to pass in arguments one by one.
- **Apply** invokes the function and allows you to pass in arguments as an array.
- **Bind** returns a new function, allowing you to pass in a this array and any number of arguments.

```js
function MyObject(element) {
    this.elm = element;
    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};
```

A simple, naive implementation of bind would be like:

```js
Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};
```

## Reference
- [The simple rules to this in Javascript](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3)

Deeply understand about "this" pointer in different scenarios, compare arrow function vs regular function, closure, ...

All about Javascript functions


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

Posts