daviddoji/professional-programming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve FE course

Browse Source
This commit is contained in:
Charles-Axel Dein 2020-07-24 15:01:11 +02:00
parent 5df4c63dcd
commit 9b1d73c63b
1 changed files with 73 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
training/front-end/01-modern-javascript.md
View File

@ -3,7 +3,9 @@
## Table of Contents
- [Modern JavaScript](#modern-javascript)
- [Prererequisites](#prererequisites)
- [Objectives of this course](#objectives-of-this-course)
- [Prerequisites](#prerequisites)
- [Check your knowledge of JS](#check-your-knowledge-of-js)
- [Introduction](#introduction)
- [Quirks](#quirks)
- [Make sure your target browser supports the feature!](#make-sure-your-target-browser-supports-the-feature)
@ -48,13 +50,25 @@ Note: run code quickly with https://codesandbox.io/s/
- JavaScript: https://codesandbox.io/s/front-end-training-014br
## Prererequisites
## Objectives of this course
- Review the syntax of modern JavaScript features
- Mention some JS best practices
## Prerequisites
This course assumes you already have experience with JavaScript. If you don't, start with this:
- [JavaScript First Steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps), MDN
- [Learn JavaScript](https://learnjavascript.online/)
### Check your knowledge of JS
- What are the 5 JS datatypes?
- `Number`, `String`, `Boolean`, `Object`, `Undefined`
- What does `1 / "a"` evaluate to?
- `NaN`
## Introduction
JavaScript is a programming language evolving very rapidly that can run in different environments:
@ -66,21 +80,21 @@ JavaScript is a programming language evolving very rapidly that can run in diffe
Key historical elements:
- September 1995: LiveScript is released in the Netscape Navigator Browser. It was developed by Brendan Eich.
- June 1997: Ecma International releases the first ECMAScript language *specification*. (note: the European Computer Manufacturers Association was founded in 1961 to standardize computer systems)
- June 1997: Ecma International releases the first ECMAScript language _specification_. (note: the European Computer Manufacturers Association was founded in 1961 to standardize computer systems)
- December 2009: the ECMAScript 5 standard is released.
From 2016 to today, a new version of ECMAScript is released each year. The language has reached maturity and supports many modern constructs.
Key features of JavaScript:
- It is imperative & inspired by C
- It is **imperative** & inspired by C
- `if`, `while`, `switch`, `while`, `do while`
- It is weakly typed: it has types (`String`, `Number`, etc.) but uses implicit cast (`"1" - "1" === 0`).
- It is dynamically typed: types are associated with values rather than expressions (a variable `x` can be associated with a `String`, then with a `Number`).
- It supports runtime evaluation with `eval`. `eval('1 === 1')` evaluates to `true`
- It supports object orientation with a very powerful prototype-based approach.
- While it is not necessarily considered a pure functional language, its functions are first-class citizen and it supports closures and anonymous functions. As a result, it can be used to go pretty far with functional programming patterns.
- It is very concise. Newer features such as arrow functions, object and array destructuring leads to very terse code with a very high signal to noise ration.
- It is **weakly typed**: it has types (`String`, `Number`, etc.) but uses implicit cast (`"1" - "1" === 0`).
- It is **dynamically typed**: types are associated with values rather than expressions (a variable `x` can be associated with a `String`, then with a `Number`).
- It supports **runtime evaluation** with `eval`. `eval('1 === 1')` evaluates to `true`
- It supports **object orientation** with a very powerful prototype-based approach.
- While it is not necessarily considered a pure functional language, its **functions are first-class citizen**. It supports closures and anonymous functions. As a result, it can be used to go pretty far with functional programming patterns.
- It is very **concise**. Newer features such as arrow functions, object and array destructuring leads to very terse code with a very high signal to noise ration.
## Quirks
@ -96,6 +110,7 @@ You can then use "polyfills" (or "shims") to support older browser. There are so
```javascript
var a;
// an uninitialized variable is undefined
console.assert(typeof a === "undefined");
// There are no required arguments in JavaScript
@ -109,15 +124,16 @@ console.log(hello());
// Here's how to compare to undefined
console.assert(typeof undefined === "undefined");
const anObject = {a: 1}
const anObject = { a: 1 };
// Accessing an absent object key also returns undefined
console.assert(typeof anObject.nonexistent === "undefined");
console.assert(typeof anObject.nonExistent === "undefined");
```
### Printing and interacting with the console
```javascript
// Do not leave console.log in your code! There are linters such as eslint that will check for their absence
// Do not leave console.log in your code!
// There are linters such as eslint that will check for their absence
console.log("hello");
// In this document, we use assert to show the actual value
@ -128,10 +144,10 @@ console.assert(true === true);
Rules for string conversion:
- `String` are left as is
- `Number` are converted to their string representation
- Elements of `Array` are converted to string, then joined with commas `,`
- Objects are converted to `[object Object]` where `Object` is the constructor of the object
- `String` are left as is.
- `Number` are converted to their string representation.
- Elements of `Array` are converted to string, then joined with commas `,`.
- Objects are converted to `[object Object]` where `Object` is the constructor of the object.
Can you guess how those will be converted?
@ -198,9 +214,14 @@ console.assert(_.isEqual([1, 2], [1, 2]));
```javascript
// Use Object.assign (ES 2015) to copy objects
const target = { a: 1, b: 1};
const source = { b: 2};
const merged = Object.assign(target, source);
console.assert(_.isEqual(merged, {a: 1, b:2});
// Array.includes (ES7)
const theArray = [1, 2]
console.assert(theArray.includes(1))
```
## Prototypes in JavaScript
@ -262,6 +283,8 @@ console.assert(_.isEqual(person2, { firstName: "Olympe" }));
console.assert(_.isEqual(person2, { firstName: "Olympe" }));
// Short form function
// Before:
const es5Object = {
say: function () {
console.log("hello");
@ -269,13 +292,18 @@ const es5Object = {
};
es5Object.say();
// After: (short form function)
const es6Object = {
say() {
console.log("hello");
},
};
es6Object.say();
```
Advanced (with prototype):
```javascript
// Prototype and super()
const firstObject = {
a: "a",
@ -317,7 +345,7 @@ constantVar = "b";
let theVar = "a";
theVar = "a";
// Note: this will work ok
// Note: const != immutable
const constantObject = { a: 1 };
constantObject.a = 2;
constantObject.b = 3;
@ -325,7 +353,7 @@ constantObject.b = 3;
// Raises: "constantObject" is read-only
constantObject = { a: 1 };
// const and let are block scoped. A block is enclosed in {}
// const and let are block scoped. A block is enclosed in {} (if, loops, functions, etc.)
{
const a = "a";
console.log({ a });
@ -347,6 +375,8 @@ Never use `var`:
- `let` and `const` are block-scoped
- `let` and `const` cannot be reused for the same variable name
Future of JavaScript: [tc39/proposal-record-tuple: ECMAScript proposal for the Record and Tuple value types](https://github.com/tc39/proposal-record-tuple)
### Hoisting
See [Hoisting on MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
@ -402,9 +432,19 @@ console.assert(myFunctionToBeShortenedArrowV2(1) === 1);
### How `this` works in arrow functions
TODO
### Best practices
I usually keep the parameters parenthesis. If you add a parameter and weren't including them, 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:
```javascript
const a1 = (arg) => {};
const a2 = (arg1, arg2) => {};
// vs.
const a3 = (arg) => {};
```
## Classes
@ -443,7 +483,7 @@ 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.
- Avoid using classes if you can.
## Template literals
@ -466,6 +506,9 @@ const hello2 = `Hello ${name === "Louis" ? name : "Noname"}`;
They are used in some libraries, like Apollo and Styled Components.
```javascript
// First arg is an array of string values, the rest is the expressions
// ["hello ", ""], 3
function templateTag(literals, ...expressions) {
console.assert(_.isEqual(literals, ["hello ", ""]));
console.assert(_.isEqual(expressions, [3]));
@ -586,12 +629,19 @@ export default createToaster;
### Optional chaining
```javascript
let nestedProp = obj.first && obj.first.second;
// with optional chaining:
let nestedProp = obj.first?.second;
```
## Self assessment
- How old is JavaScript?
- Is it a modern language?
- Can we say that JavaScript does not have types?
- What is the value of this expression: `"1" + "1"`?
- What is the value of this expression: `"1" + "1"`? `3 + 2 + "5"`?
- 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?