Add hoising example
This commit is contained in:
Charles-Axel Dein
parent
c767aa9ef9
commit
5df4c63dcd
@ -401,8 +401,7 @@ Articles:
|
||||
- [On the Spectrum of Abstraction](https://www.youtube.com/watch?v=mVVNJKv9esE) 🎞, Cheng Lou
|
||||
- [The “Bug-O” Notation](https://overreacted.io/the-bug-o-notation/), Dan Abramov
|
||||
|
||||
I maintain a [list of antipatterns](https://github.com/charlax/antipatterns) on another repo. This is a highly recommended read.
|
||||
|
||||
- [Antipatterns](./antipatterns)
|
||||
- [Inheritance vs. composition](http://learnpythonthehardway.org/book/ex44.html): a concrete example in Python. [Another slightly longer one here](http://python-textbok.readthedocs.io/en/latest/Object_Oriented_Programming.html). [One last one, in Python 3](http://blog.thedigitalcatonline.com/blog/2014/08/20/python-3-oop-part-3-delegation-composition-and-inheritance/#.V7SZ4tB96Rs).
|
||||
- [Composition Instead Of Inheritance](http://c2.com/cgi/wiki?CompositionInsteadOfInheritance)
|
||||
- [Complexity and Strategy](https://hackernoon.com/complexity-and-strategy-325cd7f59a92): interesting perspective on complexity and flexibility with really good examples (e.g. Google Apps Suite vs. Microsoft Office).
|
||||
|
||||
@ -12,10 +12,7 @@
|
||||
- [Casting](#casting)
|
||||
- [Always use triple comparators (`===`) instead of double (`==`)](#always-use-triple-comparators--instead-of-double-)
|
||||
- [Primitive types vs. reference types](#primitive-types-vs-reference-types)
|
||||
- [`Object` methods](#object-methods)
|
||||
- [`Object.assign`, spread operator](#objectassign-spread-operator)
|
||||
- [`Array` methods](#array-methods)
|
||||
- [`Array.includes` (ES7)](#arrayincludes-es7)
|
||||
- [`Object` and `Array` methods](#object-and-array-methods)
|
||||
- [Prototypes in JavaScript](#prototypes-in-javascript)
|
||||
- [Object literals, assignment and destructuring](#object-literals-assignment-and-destructuring)
|
||||
- [Objects](#objects)
|
||||
@ -26,7 +23,6 @@
|
||||
- [How `this` works in arrow functions](#how-this-works-in-arrow-functions)
|
||||
- [Best practices](#best-practices)
|
||||
- [Classes](#classes)
|
||||
- [Prototypal inheritance](#prototypal-inheritance)
|
||||
- [Template literals](#template-literals)
|
||||
- [Template tags](#template-tags)
|
||||
- [Loops](#loops)
|
||||
@ -198,21 +194,20 @@ console.assert(_.isEqual({ a: 1 }, { a: 1 }));
|
||||
console.assert(_.isEqual([1, 2], [1, 2]));
|
||||
```
|
||||
|
||||
### `Object` methods
|
||||
### `Object` and `Array` methods
|
||||
|
||||
#### `Object.assign`, spread operator
|
||||
```javascript
|
||||
// Use Object.assign (ES 2015) to copy objects
|
||||
|
||||
`Object.assign` (ES 2015)
|
||||
// Array.includes (ES7)
|
||||
|
||||
### `Array` methods
|
||||
|
||||
#### `Array.includes` (ES7)
|
||||
```
|
||||
|
||||
## Prototypes in JavaScript
|
||||
|
||||
JavaScript has a very powerful prototypal inheritance system that is very interesting to study.
|
||||
|
||||
The truth is, it is much less used nowadays, and you don't really need to know it to develop with React. So we will leave it aside for now.
|
||||
The truth is, it is much less used nowadays, and you don't really need to know it to develop with React. It also requires a bit of personal study to fully understand it. So we will leave it aside for now.
|
||||
|
||||
The book [JavaScript: The Good Parts](https://www.oreilly.com/library/view/javascript-the-good/9780596517748/) by Douglas Crockford (2008) is a great introduction to it. Here's a quote from the author:
|
||||
|
||||
@ -356,6 +351,24 @@ Never use `var`:
|
||||
|
||||
See [Hoisting on MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
|
||||
|
||||
```javascript
|
||||
console.log(typeof variable); // undefined
|
||||
// console.log(variable); // Raises: ReferenceError: variable is not defined
|
||||
|
||||
function hoist() {
|
||||
a = 20;
|
||||
var b = 100;
|
||||
}
|
||||
|
||||
hoist();
|
||||
|
||||
// 20, accessible as a global variable outside of hoist
|
||||
console.log(a);
|
||||
|
||||
// Raises: ReferenceError: b is not defined
|
||||
// console.log(b);
|
||||
```
|
||||
|
||||
## Arrow functions
|
||||
|
||||
The first advantage of arrow function is that they're shorter to write:
|
||||
@ -391,7 +404,7 @@ console.assert(myFunctionToBeShortenedArrowV2(1) === 1);
|
||||
|
||||
### Best practices
|
||||
|
||||
- I usually keep the parameters parenthesis. If you add a parameter, you'll have to add them back.
|
||||
I usually keep the parameters parenthesis. If you add a parameter and weren't including them, you'll have to add them back.
|
||||
|
||||
## Classes
|
||||
|
||||
@ -432,8 +445,6 @@ Those are my opinions about other class features:
|
||||
- Avoid using getter and setters (`get` and `set`).
|
||||
- Avoid using classes altogether.
|
||||
|
||||
### Prototypal inheritance
|
||||
|
||||
## Template literals
|
||||
|
||||
```javascript
|
||||
@ -583,12 +594,28 @@ export default createToaster;
|
||||
- What is the value of this expression: `"1" + "1"`?
|
||||
- What should I use? `let`, `var`, or `cost`?
|
||||
- How do you add support for modern JS features in older browsers?
|
||||
- How are variables scoped in JavaScript?
|
||||
- What should you watch for when comparing variables in JavaScript?
|
||||
- `const a = [1]; const b = [1];`: what does `b == b` evaluates to?
|
||||
- How do you write arrow functions?
|
||||
- `const {a} = {a: 1}`: what does `a` evaluate to?
|
||||
|
||||
Advanced:
|
||||
|
||||
- How does JavaScript "inherit" from each other?
|
||||
- If `const toaster = {name: 'Foo'}` and I want `const obj = {Foo: 1}`. How can I write this whatever the `toaster`'s `name`?
|
||||
|
||||
Other assessments:
|
||||
|
||||
- [37 Essential JavaScript Interview Questions and Answers](https://www.toptal.com/javascript/interview-questions)
|
||||
- [70 JavaScript Interview Questions](https://dev.to/macmacky/70-javascript-interview-questions-5gfi), DEV
|
||||
|
||||
## References
|
||||
|
||||
- [ES5 to ESNext — here’s every feature added to JavaScript since 2015](https://www.freecodecamp.org/news/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e/)
|
||||
- [ES2015 / ES6: Basics of modern Javascript](https://www.slideshare.net/WojciechDzikowski/es2015-es6-basics-of-modern-javascript)
|
||||
- [JavaScript](https://en.wikipedia.org/wiki/JavaScript), Wikipedia
|
||||
- [mbeaudru/modern-js-cheatsheet](https://github.com/mbeaudru/modern-js-cheatsheet)
|
||||
|
||||
Future changes:
|
||||
|
||||
|
||||
29
training/front-end/examples/hoisting.html
Normal file
29
training/front-end/examples/hoisting.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>Showing hoisting</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="body"></div>
|
||||
</body>
|
||||
<script>
|
||||
console.log(typeof variable); // undefined
|
||||
// console.log(variable); // Raises: ReferenceError: variable is not defined
|
||||
|
||||
function hoist() {
|
||||
a = 20;
|
||||
var b = 100;
|
||||
}
|
||||
|
||||
hoist();
|
||||
|
||||
// 20, accessible as a global variable outside of hoist
|
||||
console.log(a);
|
||||
|
||||
// Raises: ReferenceError: b is not defined
|
||||
// console.log(b);
|
||||
|
||||
document.getElementById("body").innerHTML = "Hello JavaScript!";
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user