From fb6594e65e583c9b834b8eaef4f4ad4db2fde49d Mon Sep 17 00:00:00 2001
From: Charles-Axel Dein <ca@d3in.org>
Date: Tue, 21 Jul 2020 12:34:19 +0200
Subject: [PATCH] Improve modern JS

---
 training/front-end/01-modern-javascript.md | 59 ++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/training/front-end/01-modern-javascript.md b/training/front-end/01-modern-javascript.md
index 2b561bc..7ae3441 100644
--- a/training/front-end/01-modern-javascript.md
+++ b/training/front-end/01-modern-javascript.md
@@ -4,6 +4,7 @@
 
 - [Modern JavaScript](#modern-javascript)
   - [Quirks](#quirks)
+    - [Undefined everywhere!](#undefined-everywhere)
     - [Printing and interacting with the console](#printing-and-interacting-with-the-console)
     - [Comparing scalar, arrays, and objects](#comparing-scalar-arrays-and-objects)
       - [Always use triple comparators (`===`) instead of double (`==`)](#always-use-triple-comparators--instead-of-double-)
@@ -16,6 +17,7 @@
     - [Objects](#objects)
     - [Array](#array)
   - [`let` and `const`](#let-and-const)
+    - [Hoisting](#hoisting)
   - [Arrow functions](#arrow-functions)
     - [How `this` works in arrow functions](#how-this-works-in-arrow-functions)
     - [Best practices](#best-practices)
@@ -43,6 +45,22 @@ Note: run code quickly with https://codesandbox.io/s/
 
 ## Quirks
 
+### Undefined everywhere!
+
+There are no required arguments in JavaScript:
+
+```javascript
+function hello(name) {
+  return name;
+  }
+
+  // No raise, will log "undefined"
+console.log(hello());
+
+// Here's how to compare to undefined
+console.assert(typeof undefined === 'undefined')
+```
+
 ### Printing and interacting with the console
 
 ```javascript
@@ -200,6 +218,10 @@ Never use `var`:
 - `let` and `const` are block-scoped
 - `let` and `const` cannot be reused for the same variable name
 
+### Hoisting
+
+See [Hoisting on MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
+
 ## Arrow functions
 
 The first advantage of arrow function is that they're shorter to write:
@@ -239,6 +261,43 @@ console.assert(myFunctionToBeShortenedArrowV2(1) === 1);
 
 ## Classes
 
+```javascript
+class Toaster {
+constructor(color) {
+this.color = color
+}
+
+dring() {
+return 'dring';
+}
+}
+
+// Don't forget new!
+// Raises: TypeError: Cannot call a class as a function
+// const toaster = Toaster('red');
+
+const toaster = new Toaster('red');
+console.log(toaster.dring())
+
+// Inheritance
+
+class BunToaster extends Toaster {
+  dring() {
+  return super.dring() + ' dring';
+  }
+  }
+
+const bunToaster = new BunToaster("red")
+console.assert(bunToaster.dring() === "dring dring")
+```
+
+Those are my opinions about other class features:
+
+- Avoid using `static` methods, use plain functions instead.
+- Avoid using more than one level of inheritance.
+- Avoid using getter and setters (`get` and `set`).
+- Avoid using classes altogether.
+
 ### Prototypal inheritance
 
 ## Template literals