Improve modern JS
This commit is contained in:
parent
3ec6c65586
commit
fb6594e65e
@ -4,6 +4,7 @@
|
|||||||
|
|
||||||
- [Modern JavaScript](#modern-javascript)
|
- [Modern JavaScript](#modern-javascript)
|
||||||
- [Quirks](#quirks)
|
- [Quirks](#quirks)
|
||||||
|
- [Undefined everywhere!](#undefined-everywhere)
|
||||||
- [Printing and interacting with the console](#printing-and-interacting-with-the-console)
|
- [Printing and interacting with the console](#printing-and-interacting-with-the-console)
|
||||||
- [Comparing scalar, arrays, and objects](#comparing-scalar-arrays-and-objects)
|
- [Comparing scalar, arrays, and objects](#comparing-scalar-arrays-and-objects)
|
||||||
- [Always use triple comparators (`===`) instead of double (`==`)](#always-use-triple-comparators--instead-of-double-)
|
- [Always use triple comparators (`===`) instead of double (`==`)](#always-use-triple-comparators--instead-of-double-)
|
||||||
@ -16,6 +17,7 @@
|
|||||||
- [Objects](#objects)
|
- [Objects](#objects)
|
||||||
- [Array](#array)
|
- [Array](#array)
|
||||||
- [`let` and `const`](#let-and-const)
|
- [`let` and `const`](#let-and-const)
|
||||||
|
- [Hoisting](#hoisting)
|
||||||
- [Arrow functions](#arrow-functions)
|
- [Arrow functions](#arrow-functions)
|
||||||
- [How `this` works in arrow functions](#how-this-works-in-arrow-functions)
|
- [How `this` works in arrow functions](#how-this-works-in-arrow-functions)
|
||||||
- [Best practices](#best-practices)
|
- [Best practices](#best-practices)
|
||||||
@ -43,6 +45,22 @@ Note: run code quickly with https://codesandbox.io/s/
|
|||||||
|
|
||||||
## Quirks
|
## 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
|
### Printing and interacting with the console
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -200,6 +218,10 @@ Never use `var`:
|
|||||||
- `let` and `const` are block-scoped
|
- `let` and `const` are block-scoped
|
||||||
- `let` and `const` cannot be reused for the same variable name
|
- `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
|
## Arrow functions
|
||||||
|
|
||||||
The first advantage of arrow function is that they're shorter to write:
|
The first advantage of arrow function is that they're shorter to write:
|
||||||
@ -239,6 +261,43 @@ console.assert(myFunctionToBeShortenedArrowV2(1) === 1);
|
|||||||
|
|
||||||
## Classes
|
## 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
|
### Prototypal inheritance
|
||||||
|
|
||||||
## Template literals
|
## Template literals
|
||||||
|
Loading…
Reference in New Issue
Block a user