Going functional with Vanilla JS

Going functional

Zkoušíme funkcionální programování

VanillaJS edition

Hit L to toggle language

Jazyk lze přepnout klávesou L

Ondřej Žára, @0ndras

VanillaJS

Library is good, built-in functionality is better
Knihovna dobrá, vestavěná funkce lepší
The language itself is sufficient in many cases
Jazyk jako takový v řadě případů bohatě stačí
ES 5.1, ES 2015 / ES 6

Functional programming

Funkcionální programování

FP definition is ambiguous
Definice není jednoznačná
Uses concepts that are almost one hundred (!) years old
Brzy mu bude sto (!) let
Functions closer to their mathematical definition
Koncept funkcí v matematickém významu

FP: Building stones

FP: Stavební kameny

Functions (thank you, cpt. Obvious!)
Funkce (thank you, cpt. Obvious!)
First-class functions (callback ≠ FP!)
First-class funkce (callback ≠ FP!)
Pure functions Čisté (pure) funkce
Immutable data
Neměnná (immutable) data
Recursion, functional iteration
Rekurze, funkcionální iterace

FP: Advantages of pure functions

FP: Výhody čistých funkcí

Buzzword showcase

Hitparáda buzzwordů

Determinism
Determinismus
Testability
Testovatelnost
Parallelization
Paralelizovatelnost
Portability (across projects)
Přenositelnost (napříč projekty)

FP: Enemies

FP: Nepřátelé

External state (this, global variables)
Externí stav (this, globální proměnné)
RNG
Side effects (console.log)
Vedlejší účinky (console.log)

FP: TCO

Total Cost of Ownership
Tjänstemännens Centralorganisation (Swedish Confederation of Professional Employees)
Tail Call Optimisation

FP: Tail Call Optimisation

function x() {
	...
	return y();
}

Tail call: if the last statement is a function call
Tail call: pokud je poslení příkaz ve funkci volání
Tail call optimisation: tail call without growing the call stack
Tail call optimisation: tail call bez nárůstu zásobníku volání
Recursion as expensive (cheap) as a loop
Rekurze se stejnou náročností, jako cyklus
Part of ES 2015 Součást ES 2015 (!)

FP: Philosophy

FP: Filozofie

Local variables are OK, but only as a tool to make code readable
Lokální proměnné jsou OK, ale jen jako nástroj pro zpřehlednění
Every function returns something (so we can chain them)
Každá funkce něco vrací (jinak by nešly skládat)
The only purpose of a function is to return a value
Jediným úkolem funkce je vrátit hodnotu

Functional programming in JS

Funkcionální programování v JS

The language offers many approaches (imperative, objective, functional)
Jazyk nabízí mnoho přístupů (imperativní, objektový, funkcionální)
We can mix them
Lze je míchat
Network ⇒ Data processing ⇒ DOM & Interaction
Douglas Crockford way: new (as a homework), (za domácí úkol), this, for loops

Bad example: loop elimination

Špatný příklad: eliminace cyklu

function add(numbers) {
	if (numbers.length > 2) {
		return numbers[0] + add(numbers.slice(1));
	} else {
		return numbers[0] + numbers[1];
	}
}

Bad example: evaluation

Špatný příklad: zhodnocení

Loop replaced with recursion
Rekurze místo cyklu
Weird, inexpressive
Příliš kostrbaté, neexpresivní
Going functional at all costs makes the code worse
Funkcionálnost za každou cenu je kontraproduktivní

Better example

Lepší příklad

function plus(x, y) { return x + y; }

function add(numbers) {
	return numbers.reduce(plus);
}

Better example: evaluation

Lepší příklad: zhodnocení

The language offers some useful built-in primitives
Jazyk nabízí užitečná vestavěná primitiva
No operator overloading in JS, but we can replace them with function calls and hide as an implementation detail
V JS nelze přetížit operátory, ale můžeme je nahradit funkcí a skrýt jako implementační detail

Built-in functional iteration

Vestavěná funkcionální iterace

You should be at least marginally familiar with these

O těchto bychom již měli mít alespoň základní ponětí

Array.prototype.{forEach, map, filter}
Array.prototype.{some, every}
Array.prototype.{reduce, reduceRight}

Real-life example

Příklad skutečného kódu

Address book: an array of people, every person has several e-mails. Who is on the blacklist?

Pole osob v adresáři, každá má několik e-mailů. Kdo je na blacklistu?

return people.filter(person =>
	person.emails.some(email =>
		blacklist.includes(email)
	)
})

Real-life example: evaluation

Příklad skutečného kódu: zhodnocení

The nesting can get deep fast, time to split into multiple functions
Jakmile zanořujeme příliš, je čas na rozdělení do více funkcí
ES 2015 Arrow functions add readability and support OOP
Anonymní funkce v ES 2015 pomohou čitelnosti a spolupráci s OOP

By the way: taking care of variadic functions!

Odbočka: pozor na variadické funkce!

const str = "rgb(1, 5, 10)";

let [r,g,b] = str.match(/\d+/g).map(parseInt); // 1, NaN, 2
/*
	parseInt("1",  0, arr);
	parseInt("5",  1, arr);
	parseInt("10", 2, arr);
*/

let [r,g,b] = str.match(/\d+/g).map(Number); // 1, 5, 10

What if we do not use Arrays to store data

Když jsou data jinde, než v poli

Object.keys, Object.values, Object.entries
Array.from to convert from querySelectorAll and similar
Array.from pro konverzi z querySelectorAll a podobných
ES 2015 Spread operator

FP has been in JS for ages

FP v JS od pradávna

[10, 1, 2].sort(); // [1, 10, 2] ‽

[10, 1, 2].sort( (a,b) => a-b ); // [1, 2, 10]

DATA.sort((a, b) => {
	return a.name.localeCompare(b.name)
});

FP has been in JS for ages

FP v JS od pradávna

"Hello %s!".format("world");

String.prototype.format = function(...args) {
	return this.replace(/%s/g, match => args.shift());
}

String.prototype.format = function(...args) {
	return args.reduce((str, arg) => str.replace(/%s/, arg), this);
}

Partial application

Částečné vyhodnocení (partial application)

add x y = x + y
add2 = add 2
add2 3 = 5

function add(x, y) { return x + y; }
var add2 = add(2); // ???

var add2 = partial(add, 2); // no built-in support

Partial application: bind

Částečné vyhodnocení: bind

function partial(func, ...args) {
	return func.bind(null, ...args);
}

var add2 = partial(add, 2);
add2(3); // 5

More real life FP

Další ukázky FP

// do not try .apply for large arrays
function min(array) {
	return array.reduce( (a, b) => Math.min(a, b) );
}

function minAge(array) {
	return array.reduce( (a, b) => a.age < b.age ? a : b );
}

More real life FP

Další ukázky FP

function clone(value) {
    if (value instanceof Array) {
        return value.map(clone);
    } else if (value instanceof Object) {
        return Object.entries(obj).reduce(merge, {});
    } else return value;
}

function merge(object, [key, value]) {
    let partial = { [key]: clone(value) };
    return Object.assign(object, partial);
}

Closing remarks

Poučení

Refactoring to FP can add readability, robustness and reusability
Přepis části kódu do FP může pomoci čitelnosti, robustnosti a znovupoužitelnosti
Try other approaches as well, compare and evaluate
Je dobré vyzkoušet i další přístupy a porovnat
No performance guarantees, benchmark when in doubt
Pozor na výkon, nutno testovat
Pure functional languages (Elm, Haskell) as a curiosity
Čistě funkcionální jazyky (Elm, Haskell) jako zajímavost

Questions and answers

Prostor pro otázky

Homework

Domácí úkol

function myNew(ctor, ...args) {
	let inst = Object.create(ctor.prototype);
	let result = ctor.apply(inst, args);
	return (typeof(result) == "object" ? result : inst);
}