professional-programming/training/front-end/01-modern-javascript.md

Table of Contents

• Modern JavaScript
  • Quirks
    • Undefined everywhere!
    • Printing and interacting with the console
    • Comparing scalar, arrays, and objects
      • Always use triple comparators (===) instead of double (==)
      • Comparing non-scalar
    • Object methods
      • Object.assign, spread operator
    • Array methods
      • Array.includes (ES7)
  • Object literals, assignment and destructuring
    • Objects
    • Array
  • let and const
    • Hoisting
  • Arrow functions
    • How this works in arrow functions
    • Best practices
  • Classes
    • Prototypal inheritance
  • Template literals
    • Template tags
  • Loops
    • for... of
  • Promises
    • Creating a promise
    • Consuming a promise
    • Chaining promises
  • Async functions
  • Modules
  • Other features
    • Optional chaining
  • References

Modern JavaScript

Note: run code quickly with https://codesandbox.io/s/

Quirks

Undefined everywhere!

There are no required arguments in 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

// Do not leave console.log in your code! There are linters such as eslint that will check for their absence
console.log("hello");

Comparing scalar, arrays, and objects

Always use triple comparators (===) instead of double (==)

// ???
console.assert("1" == 1);

// Better
console.assert(!("1" === 1));
console.assert("1" !== 1);

Comparing non-scalar

Applied on arrays and objects, == and === will check for object identity, which is almost never what you want.

console.assert({ a: 1 } != { a: 1 });
console.assert({ a: 1 } !== { a: 1 });

const obj = { a: 1 };
const obj2 = obj;
console.assert(obj == obj2);
console.assert(obj === obj2);

Use a library such as lodash to properly compare objects and array

import _ from "lodash";

console.assert(_.isEqual({ a: 1 }, { a: 1 }));
console.assert(_.isEqual([1, 2], [1, 2]));

Object methods

Object.assign, spread operator

Object.assign (ES 2015)

Array methods

Array.includes (ES7)

Object literals, assignment and destructuring

Objects

const toaster = { size: 2, color: "red", brand: "NoName" };

// Get one object key
const { size } = toaster;
console.assert(size === 2);

// Get the rest with ...rest
const { color, brand, ...rest } = toaster;
console.assert(_.isEqual(rest, { size: 2 }));

// Set default
const { size2 = 3 } = toaster;
console.assert(size2 === 3);

// Rename variables
const { size: size3 } = toaster;
console.assert(size3 === 2);

// Enhances object literals
const name = "Louis";
const person = { name };
console.assert(_.isEqual(person, { name: "Louis" }));

// Dynamic properties
const person2 = { ["first" + "Name"]: "Olympe" };
console.assert(_.isEqual(person2, { firstName: "Olympe" }));
// Btw, you can include quotes although nobody does this
console.assert(_.isEqual(person2, { firstName: "Olympe" }));

// Short form function
const es5Object = {
  say: function () {
    console.log("hello");
  },
};
es5Object.say();

const es6Object = {
  say() {
    console.log("hello");
  },
};
es6Object.say();

Array

const theArray = [1, 2, 3];
const [first, second] = theArray;
const [first1, second2, ...rest] = theArray;

console.assert(first === 1);
console.assert(second === 2);
console.assert(_.isEqualWith(rest, [3]));

let and const

const constantVar = "a";

// Raises "constantVar" is read-only
constantVar = "b";

let theVar = "a";
theVar = "a";

// Note: this will work ok
const constantObject = { a: 1 };
constantObject.a = 2;
constantObject.b = 3;

// Raises: "constantObject" is read-only
constantObject = { a: 1 };

// const and let are block scoped. A block is enclosed in {}
{
  const a = "a";
  console.log({ a });
}
// Raises: ReferenceError: a is not defined
console.log({ a });

Note: try to use const as much as you can.

• More constraints = safer code
• Some kind of "immutability" is good (since const objects can be modified, it is not true immutability)
• You can't define a const without providing its initial value
• Most people do this in modern JS

Never use var:

• var variables are initialized with undefined, while let and const vars are not initialized and will raise an error if used before definition.
• var is globally or function-scoped, depending on whether it is used inside a function.
• let and const are block-scoped
• let and const cannot be reused for the same variable name

Hoisting

See Hoisting on MDN

Arrow functions

The first advantage of arrow function is that they're shorter to write:

// You can define a function this way:
const myFunction = function () {
  console.log("hello world");
};

// With an arrow function, you save a few characters:
const myArrowFunction = () => {
  console.log("hello world");
};

// Some things, like params parentheses, and function code brackets, are optional
const myFunctionToBeShortened = function (a) {
  return a;
};

// Shorter arrow function
const myFunctionToBeShortenedArrowV1 = (a) => {
  return a;
};

// Shortest arrow function
// Remove single param parenthesis, remove function code bracket, remove return
const myFunctionToBeShortenedArrowV2 = (a) => a;
console.assert(myFunctionToBeShortenedArrowV2(1) === 1);

How this works in arrow functions

Best practices

• I usually keep the parameters parenthesis. If you add a parameter, you'll have to add them back.

Classes

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

const longString = `multi
line
string`;

const name = "Louis";
// Template interpolation
const hello = `Hello ${name}`;

Template tags

Loops

for... of

Note: prefer using some functional constructs such as map, reduce, etc.

Promises

Creating a promise

Consuming a promise

Chaining promises

Async functions

Modules

CommonJS syntax:

ES Module syntax:

• default export and imports
• renaming imports

Other features

Optional chaining

References

• ES5 to ESNext — here’s every feature added to JavaScript since 2015
• ES2015 / ES6: Basics of modern Javascript