Cheat Sheets

It can be useful

String Methods

							"str".charAt(1) === "str"[1] === "t"
							"a".concat("b") === "a" + "b" === "ab"
							"str".startsWith("s") === true
							"str".endsWith("r") === true
							"str".includes("st") === true
							"toto".indexOf("t") === 0
							"toto".lastIndexOf("t") === 2
							"str".search(/t/) === 1
							"str1".match(/r(\d)/) => ["r1", "1"]
							"Hi Bob".replace(/Hi (\w+)/, "Hello $1") => "Hello Bob"
							"string".slice(0,3) === "str"
							"1,2,3".split(",") => ["1","2","3"]
							"STR".toLowerCase() === "str"
							"str".toUpperCase() === "STR"
							"  str  ".trim() == "str"
						

Array Methods

							[1,2].concat([3,4], 5, 6) // [1,2,3,4,5,6]
							[1,2,3].fill(4) // [4,4,4]
							[1,2,3].includes(2) // true
							[1,2,3].indexOf(2) // 1
							[1,2,3].join("-") // "1-2-3"
							[1,2,3,4].slice(1,3) // [2,3]
							
							[1,2,3,4].every((value, index, arr) => n > 2) // false
							[1,2,3,4].some((value, index, arr) => n > 2) // true
							[1,2,3,4].find((value, index, arr) => n > 2) // 3
							[1,2,3,4].findIndex((value, index, arr) => n > 2) // 2
							[1,2,3,4].filter((value, index, arr) => n > 2) // [3,4]
							[1,2,3,4].forEach((value, index, arr) => { ... })
							[1,2,3,4].map((val, index, arr) => val * 2) // [2,4,6,8]
							[1,2,3,4].reduce((accu, n) => accu + n, "test") // "test1234"
							[1,2,3,4].reduceRight((accu, n) => accu + n, "test") // "test4321"
							
							// /!\ Mutative methods, original array is modified!
							let arr = [3,2,1]
							arr.push(4,5) // returns new array.length (5), a = [3,2,1,4,5]
							arr.pop() // returns last item (5), a = [3,2,1,4]
							arr.unshift(6,5) // returns new array.length (6) ; a = [6,5,3,2,1,4]
							arr.shift() // returns first item (6) ; a = [5,3,2,1,4]
							arr.splice(1,2,7,8) // at index 1, remove 2 items, insert (7,8) ; [5,7,8,1,4]
							arr.sort((a,b) => a-b) // [1,4,5,7,8]
							arr.reverse() // [8,7,5,4,1]
						

Map

							let map = new Map([ ['key1', 'val1'], ['key2', 'val2'] ])
							let key = {}, value = {} // any type
							
							map.set(key, value)
							map.get(key) === value
							map.has(key) === true
							map.delete(key);
							map.size === 2
							
							let keys = [...map.keys()]
							let values = [...map.values()]
							let fusionMap = new Map([...map1, ...map2])
							
							for(let [key, val] of map){ }
							map.forEach((val, key, map) => { })
						

Set

							let mySet = new Set([ 1,2,3,4 ])
								▸ Set(4) {1, 2, 3, 4}

							mySet.add("any type")
							map.has(3) === true
							map.delete(3);
							map.size === 4;
							map.clear(); // remove all
							 
							for(let item of mySet){ }
							mySet.forEach(item => { })
							let items = [...mySet];
						

Introduction

Who manages JavaScript? How is the language evolving?
ECMAScript, TC39 and JavaScript versions

ECMAScript

• ECMA International is an organisation that creates standards for technologies
• ECMAScript is the name of the specification referenced ECMA-262 and describing a general purpose scripting language
• TC39 is the name of the technical committee that decides on developments in the ECMAScript specification. It is composed of delegates from major companies (including all browser providers) and invited experts.
• JavaScript is a versatile scripting language and the most popular implementation of ECMAScript
  (another popular implementation: ActionScript)

JavaScript Evolutions

TC39 is considering proposals for ECMAScript developments. Each proposal goes through 5 stages:

• 0: Strawman - suggestion of a need, call for ideas
• 1: Proposal - draft solution, first polyfills/demos
• 2: Draft - precisely describes the syntax/API
• 3: Candidate - signed by the whole committee, call for implementations
• 4: Finished - ready to be included in the next version of ES

Versions of ECMAScript

A long delay between initial draft and release implies many browser-specific implementations.

TC39 has decided to move to an annual release schedule from ES6, renamed ES2015

Since 2015, a new version of the ECMAScript specification is released every year: ES2016, ES2017...

ECMAScript browser implementation

As a result of the new annual rhythm:
an excellent, comprehensive and consistent support across all modern browsers

So-called "evergreen" browsers

A reintroduction to JS

Exercises 1 to 6

Exercises

Slides and exercises available on Github: https://github.com/worldline/JS-Training

Do the exercises from your browser at this address: https://codesandbox.io/s/github/worldline/JS-Training

Fork to create your personal version of the working repo. You can publish it on your personal Github account if you have one.

For each exercise, correct the source to validate the associated test

Types and Primitives

JavaScript defines 7 data types:

• null
• undefined
• boolean
• number
• string
• symbol (new in ES6)
• object
Primitives

The typeof operator returns the type of an object:

							typeof true === "boolean"
							typeof 12 === "number"
						

but be careful of these exceptions:

							typeof null === "object" // bug in the 1st version of ES
							typeof function(){} === "function"
						

null or undefined

• undefined : the variable is declared but not assigned
• null : the variable has been assigned to the null reference

null represents the intentional absence of value and often comes from an assignment by the developer

Objects

Functions, arrays and other data structures are all of type object.

Unlike primitives, objects:

• are compared by reference

							"test" === "test"
							▸ true
								
							{ item: "test" } === { item: "test" }
							▸ false
						

• have a list of properties that are key-value pairs: key (String, Symbol) ⇔ value (any)

							"item" in { item: "test" }
							▸ true
							
							Symbol.iterator in [1,2,3]
							▸ true
						

Objects: properties listing

							let obj = { a: 1, b: 2 }

							"a" in obj
							▸ true

							for(let key in obj) console.log(key, obj[key])
							▸ a 1
							▸ b 2

							Object.keys(obj)
								▸ ["a", "b"]
							Object.values(obj)
								▸ [1, 2]
							Object.entries(obj)
								▸ [ ["a", 1], ["b", 2] ]
						

Objects: properties assignment

							let obj = { key: "value" }
							obj.a = 1;
							obj["b"] = 2;
							Object.assign(obj, { c: 3, d: 4}, {d: 5});
								▸ {key: "value", a: 1, b: 2, c: 3, d: 5}

							Object.fromEntries([ ['a', 1], ['b', 2]]);
								▸ {a: 1, b: 2}
						

Property descriptors

Each property contains in addition to its value, a list of intrinsic parameters called descriptors:

• value: the value of the property
• enumerable: true if the property is listed with Object.keys or for..in
• writable: true if the value of the property can be modified
• configurable: true: if the descriptor can be modified
• get: optional function to use as getter
• set: optional function to use as setter

A default assignment is enumerable, modifiable and configurable, without specific accessors or mutators.

Define the descriptors

Object.defineProperty() allows you to assign a property by specifying its descriptors

								const obj = {}

								Object.defineProperty(obj, 'a', {
									value: 1,
									enumerable: true,
									writable: false
								});

								Object.defineProperties(obj, {
									b: { enumerable: true, value: 2 },
									c: { get: function(){ return 3 } },
								});
									
								▸ {a: 1, b: 2}			
							

Getters / Setters

Literal declaration for get / set descriptors:

							const user = {
								name: "Smith",
								first: "John",

								get fullName(){
									return this.first + " " + this.name.toUpperCase()
								},

								set fullName(value){
									this.first = value.split(" ")[0];
									this.name = value.split(" ")[1];
								}
							}
						

Scopes

Scope = perimeter from which variables can be accessed.

At the highest level, we are in the global scope, accessible everywhere.

Accessible from global scope (1) : foo
Accessible from function foo scope (2) : foo, a, b, bar
Accessible from function bar scope (3) : foo, a, b, bar, c

Block scopes

In addition to function scopes, some instructions create so-called block scopes

These are known as block instructions:

								if(){ ... }
								for(){ ... }
								while(){ ... }
							

A block scope can also be declared with { ... }
(not to be confused with a literal object declaration)

var, let or const?

• let and const appeared with ES2015
• they bind variables to block scope and not function scope like var, which is much more intuitive
• var is no longer used since

	Scope	Re-assignable
var	function	yes
let	block	yes
const	block	no

Closures

Scope of a function = local scope + parent scope = local variables + non-local variables

A function using non-local variables (defined in a parent scope) creates what is called a closure. A closure must remember its parent scope in order to execute correctly.

								function add(x) {
									return function(y) {
										return x + y;
									}
								}

								const add5 = add(5);
								add5(8)
								▸ 13
							

Using closures to make "private" variables

							function getCounter() {
								let value = 0;
								return {
									getValue(){ return value },
									increment() { value += 1 }
								}
							}
						

Outside the scope of the getCounter function, the value variable will never be accessible.

Only the getValue and increment closures allow access

Using closures

							for (var i = 1; i<=3; i++) {
								setTimeout( function timer(){
									console.log( i );
								}, i*1000 );
							}

							▸ 4
							▸ 4
							▸ 4
						

Functions and execution context

The execution context can be changed with the methods call, apply and bind

							function calculateScore(score1, score2) {
								return this.name + " score is " + (score1 + score2)
							}

							let alice = { name: "Alice" },
								bob = { name: "Bob" };

							calculateScore.call(alice, 7, 5)
							▸ "Alice score is 12"

							calculateScore.apply(bob, [4, 6])
							▸ "Bob score is 10"

							let getBobScore = calculateScore.bind(bob, 3, 5)
							getBobScore()
							▸ "Bob score is 8"
						

These methods are available on all functions.

Primitives wrappers

String(), Number(), Boolean() are the object equivalent constructors of the corresponding primitives, also called primitive wrappers

The switch between object and primitive is automatic:

									let str = "abc";

									str.length; // 3
									str.toUpperCase(); // "ABC"
								

									let Str = new String( "abc" ),
											str = Str.valueOf() // ou "" + Str
									let N = new Number( 42 ),
											n = N.valueOf() // +N

									console.log(Str, typeof Str) // "abc", "object"
									console.log(str, typeof str) // "abc", "string"
									console.log(N, typeof N) // 42, "object"
									console.log(n, typeof n) // 42, "number"
								

Type conversions (cast)

There are 3 types of automatic type conversions in JS:

										String(42)
										▸ "42"
									

										12 + "34"
										▸ "1234"
									

 + 

										Number("42")
										▸ 42
									

										+"42"
										▸ 42
									

- + * / %

> < <= >=

| & ^ ~

										Boolean(1)
										▸ true
									

										!!1
										▸ true
									

|| && !

== or === ?

== weak equality (with conversion)
=== strict equality (without conversion)

Logical operators

Operands are casted to booleans to evaluate the operator,
but it is the original values that are returned.

							let a = 42,
							b = "abc",
							c = null;
							
							a || b; 	// 42
							a && b;		// "abc"
							
							c || b;		// "abc"
							c && b;		// null
						

If a value is implicitely casted as Boolean as true, it is said to be truthy, otherwise falsey

Logical operators

The operators || and &&, the ternary conditions ?: and
if else statements execute only one operand here:

if(0) log('A'); else log('B');

undefined ? log('C') : log('D');

true && log('E'); false && log('F');

true || log('G'); false || log('H');

The && operator has priority over || which has priority over ?:

Upgrade to modern JS: ES2015+

Exercises 7 to 11

Syntactic sugar: key and value

							let foo = "foo", bar = "bar"

							const obj = { foo, bar } // equivalent to { foo: foo, bar: bar }

							obj
							▸ {foo: "foo", bar: "bar"}
						

Syntactic sugar: calculated keys

							let foo = "foo", bar = "bar"

							const obj = {
								[foo]: [bar],
								[foo+bar]: foo+bar
							} 
							
							/* equivalent to
							obj[foo] = [bar]
							obj[foo+bar] = foo + bar
							*/
						

							obj
							▾ {foo: Array(1), foobar: "foobar"}
								▸ foo: ["bar"]
									foobar: "foobar"
						

Default parameters

Assigns a default value if argument is undefined

							function f(a, b=1, c=2) { return a + b + c }

							f(1, 2, 3)
							▸ 6
							f(1)
							▸ 4
							f(1, undefined, undefined)
							▸ 4
							f(1, null, null)
							▸ 1
						

Also works with the arrow functions:

const doSomething = (params = {}) => {}

Operators Spread / Rest

Spread: converts an iterable object into an argument list

							const sum = (a,b,c) => a+b+c;

							sum(...[1,2,3])
							▸ 6

							sum(1, ...[2,3])
							▸ 6

							[1, ...[2,3], 4]
							▸ [1,2,3,4]
						

const cloneArray = arr => [...arr]

Operators Spread / Rest

Rest : converts a list of arguments into an Array

							const sum = (...args) => args.reduce((a,b) => a+b, 0);

							sum(1,2,3,4)
							▸ 10

							function addToList(list, ...args) { // rest
								list.push(...args) // spread
							}
						

Destructuring

Assigns variables according to an object / Array structure

							const userData = { first: "Joe", name: "Dalton", age: 27 };
							
							const { first, age, name: userName } = userData;
							// first = "Joe", age = 27, userName = "Dalton"

							const myObject = {
								foo: {
									bar: 42
								}
							}
							const { foo: { bar: magicNumber } } = myObject
							// magicNumber = 42

							const [first, second, , fourth] = [1,2,3,4];
							// first = 1, second = 2, fourth = 4
						

Template strings

Template Strings are a new literal String declaration introduced in ES2015.

It uses the backtick ` ` character.

This new literal declaration allows:

• interpolation of variables and expressions
• line breaks

Tagged Template strings

If a function reference precedes a template string literal, that function is invoked with the static and dynamic parts of the following string:

							function insertInUpperCase(strings, ...vars) {
								console.log({ strings, vars });

								return strings.reduce(
									(out, str, i) => `${out}${str}${(vars[i] || "").toUpperCase()}`,
									""
								)
							}
						

Modules: import and export

Two keywords: import and export

You can have named exports and default exports

							// default import
							import MyModule from './my-module.js' 

							// named imports
							import { a, b as moduleB } from 'module' 

							import React, { Component } from 'react'
						

							/* in my-module.js */
							export const a = "something"
							export function b(){ ... }
							export default const MyModule = { a, b }
						

Modules: dynamic import

When import is called as a function, the module is imported asynchronously.
This is very useful for downloading code on demand (lazy-loading) and optimizing the loading time of your applications.

						function loadMyModule(){
							import('./myModule.mjs').then(module => {
								const defaultExport = module.default
								const { myNamedExport, myOtherExport } = module;
							})
						}
						

Modules

https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

Modules: what about support?

Good support (~95%) in 2022: Chrome 61+, Edge 16+, Firefox 60+

But developers use ESM widely in their codebases that are transformed into bundles by bundlers like Webpack, Parcel, Rollup, esbuild...

Bundlers are tools that precompile your code and reduce the browser's work by producing optimized JS bundles from a set of modules during a build step.

Deal with Asynchrony

Exercises 12 to 14

Promises

• Promises are objects used to facilitate the coordination of asynchronous operations.
• A Promise represents the promise of a return value in the future. The delay is not necessarily predictable, this value can be available almost immediately or never arrive.
• A Promise is always in one of these 3 states:
  • pending: initial state, waiting
  • fulfilled: the promise has been resolved, the operation was successful
  • rejected: the promise was rejected due to an error

Callbacks vs Promises

doSomething(function(result){

	doAnotherThing(result, function(newResult){

		doFinalThing(newResult, function(finalResult){
			console.log(finalResult)
		}, failureCallback)

	}, failureCallback)

}, failureCallback)

doSomething()
.then(function(result){
	return doAnotherThing(result)
})
.then(function(newResult){
	return doFinalThing(newResult)
})
.then(function(finalResult){
	console.log(finalResult)
})
.catch(failureCallback)
							

Other methods of creation of Promises

• Promise.resolve(val)
• Promise.reject(err)

  create a promise immediately resolved/rejected with some value



• Promise.all([ promise1, promise2, promise3 ])

  create a promise resolved when all the promises passed as arguments are resolved

• Promise.race([ promise1, promise2, promise3 ])

  create a promise resolved when one of the promises passed as arguments is resolved

Chaining and parallelism

							const wait = promisify(setTimeout)

							Promise.race([
								fetch('/api/products').then(res => res.json()),
								wait(10000)
							]).then((results) => {
								if(results){ /* do something */ }
							})
						

							Promise.all([
								wait(1000),
								Promise.resolve(data),
								wait(2000)
							]) // how long before this promise is resolved ?
						

							Promise.race([
								cache ? Promise.resolve(cache) : Promise.race([]),
								fetch('/api/products').then(res => res.json())
							])
						

Exception management

f1()
.then(f2)
.catch(error => {
	// handle the exceptions from f1 or f2
})
.then(f3)
.catch(error => {
	// handle the exceptions coming exclusively from f3
})
						

then() and catch() can be chained in any order. It allows intermediate error handling in a promise chain.

async / await (ES2017)

Functions prefixed with the async operator can contain instructions prefixed with await.

await pauses the function execution waiting for the following promise to be resolved.

async function myFunction() {
	try {
		const result = await myPromise;
		// my Promise is resolved and the the resolved value is assigned to result
	} catch(err) {
		// myPromise is rejected with error "err"
	}

	// this line is reached only after resolve/reject of myPromise
	return result
}

async / await: pros and cons

Combines the advantage of asynchronism with the convenience of writing and reading synchronous code

Allows to unify the management of synchronous errors (exceptions) with the cases of rejection of promises

Does not encourage the developer to parallelize asynchronous operations, which can slow down the application

Observable

A pattern halfway between Promise and Pub/Sub:

• Promise that can be resolved in several stages
• Event emitter with a completion concept

A proposal exist to standardize Observables, currently in Stage 1 (Draft). However, it's easily implementable by yourself like Pub/Sub.

This is one of the foundations of ReactiveX and reactive programming.

Tasks, microtasks and event loop

Modern JS engines store asynchronous calls in two stacks:

• tasks, unstacked at the end of each event loop (examples: setTimeout, setInterval, fetch)
• microtasks, unstacked at the end of each task (examples: promise.then, process.nextTick)

Working with the event loop

setTimeout(() => console.log(1), 0)
Promise.resolve().then(() => console.log(2))
requestAnimationFrame(() => console.log(3))
requestIdleCallback(() => console.log(4))
console.log(5)
						

In what order are the logs displayed ?

5 - 2 - 1 - 4 - 3 variable depending on the CPU activity, but it's the most likely order

Object-oriented Programming

Exercises 15 to 19

Beware of misuse of language !

There are no classes in JavaScript, but the word is often misused to refer to a prototype and its associated constructor.

Unlike classes, there is no difference in nature between a prototype and an object. A prototype can therefore be manipulated like any other object: assigned by reference, passed as a parameter, exported as a module...

Beware of misuse of language !

An object does not inherit the properties of its prototype, but it delegates them to it: these are not its own properties

							const bob = Object.create({ name: "Anonymous" })
							bob.name = "Bob";

							console.log(bob.name)
							▸ "Bob"

							delete bob.name; // remove the own property
							console.log(bob.name) // we go back to the delegated property value
							▸ "Anonymous"
						

Constructors and operator new

In JavaScript, a function can be called as a constructor with the operator new

							function Constructor(){
								// init an object
							}

							Constructor() // called as regular function
							new Constructor() // called as constructor
						

Constructors and context

The new operator changes the way a function is invoked in several ways:

							function hello(){
								console.log(`this === ${this}`)
							}

							let result1 = hello() // this === [object Window]
							let result2 = new hello() // this === [object Object]
						

The created object is used as execution context of the constructor (this)

This object is also returned by default by the function, when there is no return instruction.

							typeof result1
							▸ "undefined"
							typeof result2
							▸ "object"
						

Constructor.prototype

							function Car(){} ⇔ const Car = new Function()
						

							Object.getPrototypeOf(Car) === Function.prototype
						

Constructors flaws

Constructors are a commonly used pattern in JS, but they have several flaws:

• The prototype constructors are not automatically invoked, you have to do it manually.
• A constructor property is assigned to created objects, which can break existing code if you use this property for other effects, for example: car.constructor = "Toyota"
• this keyword does not work the same depending on whether the function is called with operator new or not
• It is not possible to declare several constructors
• They are confusing for beginners with prototypes

The class operator (ES2015)

Syntaxic sugar for declaring a prototype with a constructor

class Person {
	constructor(firstname, lastname) {
		this.firstname = firstname
		this.lastname = lastname
	}

	sayMyName(){
		return `${this.firstname} ${this.lastname}`
	}
}

class User extends Person {
	constructor(firstname, lastname, role){
		super(firstname, lastname);
		this.role = role;
	}

	get isAdmin(){
		return this.role === "admin"
	}
}

const bill = new User("Bill", "Gates", "admin")
							

super

							super(...args); // call the prototype constructor

							super.method(); // call a method of the prototype
						

It is usable without the class operator:

							const user = {
								name: "Anonymous",
								getName(){ return this.name }
							}

							const joe = {
								name: "Joe",
								getName(){
									return `joe name: ${this.name} ; user name: ${super.name} : user getName: ${super.getName()}`
								}
							}

							Object.setPrototypeOf(joe, user)

							joe.getName()
							▸ joe name: Joe ; user name: Anonymous ; user getName: Joe
						

static

Defines a static property: a property of the constructor itself, not the prototype

class C {
	method(){ console.log("method") }

	static methodStatic(){ console.log("static method") }
}

(new C()).method() // method in C.prototype
C.methodStatic() // methodStatic in C
						

This is basically the same thing than directly assigning the property to the constructor, so not the most useful syntaxic sugar, but it was added for its familiarity for Java developers.

							C.methodStatic = function(){ ... }
						

Constructors flaws, with operator class

• The prototype constructors are not automatically invoked, you have to do it manually.
  still the case but simplified with super()
• A constructor property is assigned to constructed objects, which can break existing code if you use this property for other effects, for example: car.constructor = "Toyota"
  still the case but the assignation is explicit to prevent conflicts
• this keyword does not work the same depending on whether the function is called with operator new or not
  an exception is raised if constructor is not called with new
• It is not possible to declare several constructors
  still the case
• They are confusing for beginners with prototypes
  adds even more confusion with class-based OOP

Alternative to constructors

You don't need constructors to make prototype-based OOP. You can rather use:

• Factory functions

  
  function createUser({ first, name }){
  	const user = Object.create(userProto)
  	user.first = first
  	user.name = name
  	return user
  }
  								

• Object.create and Object.assign

  
  const john = Object.assign(Object.create(userProto), {
  	first: "John",
  	name: "Smith"
  })
  								

It fixes all the flaws previously stated, and you don't need these anymore:

new, instanceof, class, super, static

class vs Object.create: an example

class Foo {
	constructor(who){
		this.me = who
	}
	identify(){
		return `I am ${this.me}`
	}
}

class Bar extends Foo {
	speak(){
		return `Hello, ${this.identify()}`
	}
}

let b1 = new Bar("b1")
let b2 = new Bar("b2")

b1.speak();
b2.speak();
							

const Foo = {
	init(who){
		this.me = who
		return this
	},
	identify(){
		return `I am ${this.me}`
	}
}

const Bar = Object.create(Foo)
Bar.speak = function(){
	return `Hello, ${this.identify()}`
}

let b1 = Object.create(Bar).init("b1");
let b2 = Object.create(Bar).init("b2");

b1.speak();
b2.speak();
							

Delegation pattern, in short

• Lighter and simpler model
• Replace the notion of constructors by factory functions or initialization methods
• No longer needs new and instanceof operators
• Requires to get out of the mental model of class hierarchies

Object composition (a.k.a. Mixins)

Another pattern in JavaScript OOP consists of creating objects by composition.

This pattern is super simple because JS objects support dynamic assignation of new properties:

							const mixin = { ...objA, ...objB }
							// or
							const mixin = Object.assign({}, objA, objB)
						

The composition is ordered, applying arguments from left to right, so that in case of conflicts on one property name, the last one gets priority:

							let o = { ...{ x: 1 }, ...{ x: 2 }, ...{ x: 3 } }
							o
							▸ { x: 3 }
						

Composition or delegation ?

Favor object composition over class inheritance
(Gang of Four 1995:20)

In reality, there is no pattern always better than another:
they match with different ways of thinking.

The flaws of each pattern became clear when you start to excessively use it anywhere.

Take the time to think about your model, do not code by habit.

Symbol

New primitive type since ES2015

Represents a unique reference:

const symbol = Symbol();
const symbolFoo = Symbol('foo');

typeof symbol;
▸ "symbol"

symbolFoo.toString()
▸ "Symbol(foo)"

symbolFoo === Symbol('foo')
▸ false
						

Symbols can be used as property keys of an object:

const obj = { [symbolFoo]: "bar" };
Object.getOwnPropertySymbols(obj)
▸ [Symbol(foo)]
						

Symbols - Known symbols

Some symbols are built-in in ES2015.

They let you redefine some internal behaviors of the language for an object:

							const obj = {
								[Symbol.toPrimitive](){ return 42 }
							}

							+obj;
							▸ 42
						

Examples:

• Symbol.iterator: used when iterating (for loops, spread operator...)
• Symbol.hasInstance: used by instanceof operator
• Symbol.toPrimitive: used to cast in primitive
• Symbol.toStringTag: used by toString method

Iterable objects

Array, Set and Map are built-in iterable structures that do the job most of the cases.

But you can also create your own iterable objects for specific needs:
binary trees, linked lists, graphs...

An object is said iterable when its Symbol.iterator method returns an iterator.

An iterator is an object with a method next() that returns an object with 2 properties:

• done: boolean, true if the iteration is finished
• value: current value of iteration, undefined if done is true

const counter123 = {
	[Symbol.iterator]: function(){
		let numbers = [1, 2, 3]
		return {
			next(){
				return {
					done: numbers.length === 0,
					value: numbers.shift()
				}
			}
		}
	}
}
						

for(let n of counter123) console.log(n);
▸ 1
▸ 2
▸ 3

[...counter123]
▸ [1, 2, 3]
						

function* and generators

A generator is a special type of function used to simplify the creation of iterators. A generator is declared with operator function*, which allow the use of the yield operator inside.

							const counter123 = {
								[Symbol.iterator]: function*(){
									let numbers = [1, 2, 3];
									while(numbers.length) yield numbers.shift();
								}
							}

							[...counter123]
							▸ [1, 2, 3]
						

yield let you pause the execution of the generator function and returns an intermediate result. The execution will resume on next() call.

Iteration is finished at the end of function instructions, or when meeting a return instruction.

Proxy

Proxies, introduced in ES2015, let you intercept and customize any operations made on an object:

• enumerate and describe its properties
• define, assign, or delete some properties
• invoke it as function or constructor
• get or set its prototype
• ...

A Proxy does not change the original object: it returns a new object, the proxy.

By default, no operation is intercepted so the proxy is indistinguishable from the original object.

const obj = { foo: "bar" }
const proxy = new Proxy(obj, {
	get(obj, prop){		
		return `${prop} intercepted!`
	}
})

proxy.foo;
▸ foo intercepted!

obj.foo;
▸ bar
						

Proxy traps

new Proxy(object, {
	get(o, key){}, // read property value
	set(o, key, val){}, // write a new value for property
	deleteProperty(o, key){},
	apply(o, context, args){}, // invoke as function
	construct(o, args){}, // invoke as constructor
	ownKeys(o){}, // enumerate own properties
	has(o, key){}, // query if property exists
	defineProperty(o, key, desc){},
	getOwnPropertyDescriptor(o, key){},
	getPrototypeOf(o){}
	setPrototypeOf(o, proto){}
})
						

Reflect API

Reflect represents the capacity for reflection acquired by JS with the introduction of proxies.

The Reflect object contains a set of methods that reproduce the default behavior of the language for all the Proxy traps. You can see it as the default value of every Proxy trap.

							Reflect.get(o, key) ⇔ o[key]
							Reflect.set(o, key, val) ⇔ o[key] = val
							Reflect.has(o, key) ⇔ key in o
							Reflect.apply(o, context, args) ⇔ o.apply(context, args)
							...
						

You can easily break existing behaviors you didn't even know existed when playing with proxies. A good practice and safety measure is to always call the Reflect API when adding a proxy trap.

new Proxy(obj, {
	set(o, key, value){
		if(typeof value !== "string"){
			throw "Only strings are accepted as values for this object"
		} 
		return Reflect.set(o, key, value) // back to the default behavior
	}
})
						

Functional programming

Exercices 20 to 22

Function patterns: Recursivity

A recursive function invokes itself with other arguments until reaching a stop condition.

							const factorial = n => n < 2 ? 1 : n * factorial(n-1)

							const flatten = ([x, ...xs]) => x === undefined 
								? []
								: [ ...(Array.isArray(x) ? flatten(x) : [x]), ...flatten(xs) ]
						

Chainable API

A chainable method returns its own execution context (return this) or an object of the same type/prototype in order to be able to chain the calls to this method.

Example: Array.prototype chainable methods

[1, 2, 3, 4]
	.concat(5, 6, 7, 8)
	.map(n => n**2 + 1)
	.filter(isPrime)
	.slice(0, 5)
	.join(", ") + " are prime numbers"
▸ "2, 5, 17, 37 are prime numbers"
						

Chainable API are convenient to use because they reduce sequences of instructions to a single expression. They made the success of famous JS libraries like jQuery or lodash.

Function composition

Function composition consists of creating a composed function that sequentially calls several other functions, each with the return value of the previous one:

compose(f,g,h)(x) ⇔ h(g(f(x)))

Function composition can be a relevant solution when:

• a function is too long or takes too many parameters
• a variable is only used once for an intermediate calculation
• the developer is tempted to copy-paste some code

Compared to chainable API, function composition favors independent functions over methods, which avoids overloading objects with too many properties.

Currying

From Haskell Curry, a mathematician who laid the foundations of functional programming.

Currying means transforming a function that takes N arguments into a function taking the 1st argument only and returning another function taking the 2nd argument only, and so on until having collected the N arguments necessary to compute and return the final result:

f(a,b,c) ⇔ curry(f)(a)(b)(c)

Arrow functions make it easy to transform functions into curried ones:

							const sum = (a,b,c) => a + b + c
							const sum = a => b => c => a + b + c // curried version
						

A more flexible definition allows passing any number of arguments at each step:

curry(f)(a,b)(c) ⇔ curry(f)(a)(b,c) ⇔ curry(f)(a)(b)(c)

Currying: use cases

Currying is used to apply part of the arguments to decline a generic function into a more specialized version of it: this is called partial application.

const sum = a => b => a + b
const increment = sum(1);

increment(42)
▸ 43

const replace = curry((before, after, str) => str.replace(before, after))
const replaceSpacesBy = replace(/\s/g);
const trim = replaceSpacesBy("")

trim("     Hello !    ")
▸ "Hello!"
						

Functional refactoring in practice

How to refactor a code to obtain pure, atomic, generic and composable functions ?

Let's start from this code example:

import data from "users.json"
let results = [];

function printUsersOverAge18(){
	data.sort((a,b) => a.lastName < b.lastName ? -1 : 1)
	results = data.filter(user => user.age >= 18).slice(0, 5)

	const output = results.map(user => user.firstName).join("\n")
	document.querySelector("#results").textContent = output
}
						

Functional refactoring in practice

import data from "users.json"
let results = [];

function printUsersOverAge18(){
	data.sort((a,b) => a.lastName < b.lastName ? -1 : 1)
	results = data.filter(user => user.age >= 18).slice(0, 5)

	const output = results.map(user => user.firstName).join("\n")
	document.querySelector("#results").textContent = output
}
						

Functional refactoring in practice

import data from "users.json"

function printUsersOverAge18(data){
	data.sort((a,b) => a.lastName < b.lastName ? -1 : 1)
	const results = data.filter(user => user.age >= 18).slice(0, 5)

	const output = results.map(user => user.firstName).join("\n")
	document.querySelector("#results").textContent = output

	return results
}

const results = printUsersOverAge18(data)
						

Functional refactoring in practice

import data from "users.json"

function getUsersOverAge18(data){
	const sortedData = [...data].sort((a,b) => a.lastName < b.lastName ? -1 : 1)
	const results = sortedData.filter(user => user.age >= 18).slice(0, 5)

	const output = results.map(user => user.firstName).join("\n")
	return { results, output }
}

const { results, output } = getUsersOverAge18(data)
document.querySelector("#results").textContent = output
						

Functional refactoring in practice

import data from "users.json"
import { compose } from "utils/functions.js";

const sortByLastName = data => [...data].sort(
								(a,b) => a.lastName < b.lastName ? -1 : 1)

const filterAgeOver18 = data => data.filter(user => user.age >= 18)
const takeFive = data => data.slice(0, 5)
const getFirstNames = users => users.map(user => user.firstName)

const getUsersOverAge18 = compose(sortByLastName, filterAgeOver18, takeFive)

const results = getUsersOverAge18(data)
const output = getFirstNames(results).join("\n")

document.querySelector("#results").textContent = output
						

Functional refactoring in practice

import data from "users.json"
import { compose } from "utils/functions.js";

const sortBy = (key, data) => [...data].sort((a,b) => a[key]] < b[key] ? -1 : 1)
const filterBy = (key, test, data) => data.filter(({ [key]: val }) => test(val))
const take = (nb, data) => data.slice(0, nb)
const mapToProp = (key, data) => data.map(({ [key]: val }) => val)

const getUsersOverAge18 = compose(
	data => sortBy("lastName", data),
	data => filterBy("age", n => n >= 18, data),
	data => take(5, data)
);

const results = getUsersOverAge18(data)
const output = mapToProp("firstName", results).join("\n")
document.querySelector("#results").textContent = output
						

Functional refactoring in practice

import data from "users.json"
import { compose } from "utils/functions.js";

const sortBy = key => data => [...data].sort((a,b) => a[key]] < b[key] ? -1 : 1)
const filterBy = key => test => data => data.filter(({ [key]: val }) => test(val))
const take = nb => data => data.slice(0, nb)
const mapToProp = key => data => data.map(({ [key]: val }) => val)

const getUsersOverAge18 = compose(
	sortBy("lastName"),
	filterBy("age", n => n >= 18),
	take(5)
);

const results = getUsersOverAge18(data)
const output = mapToProp("firstName", results).join("\n")
document.querySelector("#results").textContent = output
						

Functional refactoring in practice

/* BEFORE */
import data from "users.json"
let results = [];

function printUsersOverAge18(){
	data.sort((a,b) => a.lastName < b.lastName ? -1 : 1)
	results = data.filter(user => user.age >= 18).slice(0, 5)

	const output = results.map(user => user.firstName).join("\n")
	document.querySelector("#results").textContent = output
}
							

/* AFTER */
import data from "users.json"
import { compose } from "utils/functions.js";
import { sortBy, filterBy, take, mapToProp } from "utils/array.js";

const getUsersOverAge18 = compose(
	sortBy("lastName"),
	filterBy("age", n => n >= 18),
	take(5)
);

const results = getUsersOverAge18(data)
const output = mapToProp("firstName", results).join("\n")
document.querySelector("#results").textContent = output
							

Functional refactoring in practice

To refactor a code and obtain pure atomic generic and composable functions:

1. Collecting ingredients
   Replace non-local variables with new arguments or return values
2. Slicing
   Extract and isolate side effects and mutations
3. Combine ingredients
   Compose into series of pure functions
4. Boil and simmer
   Extract arbitrary values to make it more generic
5. Add the spices
   Curry functions to reduce the arguments and simplify code
6. Set the table
   Reorganize your modules, externalize generic functions

Beyond JavaScript

Transpilers and JavaScript supersets

Babel transpiler

• Transpiler = source-to-source compiler operating on the same language, or two languages with the same level of abstraction
• Babel is the most popular JS transpiler. It was initially called 6to5 because it converted ES6 to ES5 to get broader browser support (Internet Explorer in particular)
• Example of ES2021 → ES5 transpilation:

  
  										[1, 2, 3].map(n => n ** 2);
  
  										var [a,,b] = [1, 2, 3]
  									

  
  										[1, 2, 3].map(function(n){
  											return Math.pow(n, 2)
  										});
  
  										var _ref = [1, 2, 3],
  											a = _ref[0],
  											b = _ref[2]
  									

• A Babel plugin exists for almost each TC39 proposal, to experiment new proposals
• Presets of Babel plugins exist for each major version of ECMAScript

@babel/preset-env

• Since Internet Explorer has retired and is no longer supported by Microsoft, we got in the evergreen era of web browsers, which make most of Babel transformations no longer required.
• A new Babel preset has been created to reduce the amount of Babel transformations to just what you need based on the list of browsers you want to support.

package.json:

								"browserslist": "> 1%; not dead"
							

Examples of browserslist queries:

• ie 6-8, Firefox >= 30, last 5 Chrome versions
• cover 95% in US, cover 99% in my stats
• extends browserslist-config-worldline
• defaults : 0.5%, last 2 versions, Firefox ESR, not dead

To transpile or not to transpile ?

Transpilation allows the developer to not think about the majority of browser support issues. It is no longer needed to remember which JS feature comes from which version and is supported in which browser.

Transpilation introduces a compilation step, many new dependencies, some risk factors, and a loss of proximity between the code the developer writes and the code that is actually run in production.

TypeScript

• TypeScript is a superset of JavaScript developed by Microsoft and published in 2012
• It has an official transpiler, tsc, but many other alternative transpilers exist: esbuild, bun, even a Babel preset.
• The key-feature of TypeScript is the static optional typing annotations
• Other cool features: interfaces, decorators, enums, abstract classes
• Gradually adoptable: with type definitions (*.d.ts files), TypeScript can catch mistakes even without any TS-specific syntax.
• Try it online on this playground

JSX

• JSX is another superset of JavaScript developed by Facebook, originally for the framework React
• JSX is now supported by other frameworks than React, such as Vue.js or Preact
• JSX is an abstraction for manipulating virtual DOM elements, which is usually done with templates and a custom templating syntax in other frameworks.