Improve modern JS

This commit is contained in:
Charles-Axel Dein 2020-07-21 12:34:19 +02:00
parent 3ec6c65586
commit fb6594e65e
1 changed files with 59 additions and 0 deletions

View File

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