functional programming in javascript by luis atencio

Thinking FunctionallyFunctional Programming using JavaScript

Luis AtencioBlog: http://luisatencio.netTwitter: @luijar

http://luisatencio.net/

Functional Programming in JavaScriptwww.manning.com/atencio

Outline• Thinking functionally

– What and why– Paradigm shift– FP vs OO

• Get functional– Declarative programming– Side effects and referential transparency– Currying– Composition

• Lift your functional skills– Memoization– Monads

What is it?

“Functional programming refers to the declarative evaluation of pure functions to

create immutable programs by avoiding externally observable side effects.”

Why?

• Reduce complexity• Create code that is easier to trace, debug, and

test• Modularize code• Avoid duplications• Implement changes unobtrusively• Create code that is extensible and configurable• …

6

Paradigm shift

• Eliminate externally observable side effects• Control (reduce or eliminate) mutations• Write declaratively and point-free• Everything is a value (even functions)• Recursion as looping mechanism (eliminate

loops)• Functions ALWAYS return values

Is JavaScript functional?JavaScript is a dynamic, object-oriented programing language whose expressive power via closures and high-order functions makes it compelling for writing in an functional style

ES6 features that favor functional programming:• const keyword• Promises• Lambda expressions• Generators and Iterators

FP JavaScript EcosystemJavaScript has many libraries that implement many functional programming techniques:• Ramda.js http://ramdajs.com/0.17/index.html• Lodash.js https://lodash.com/• Underscore.js http://underscorejs.org/• Lazy.js -> http://danieltao.com/lazy.js/• Wu.js https://fitzgen.github.io/wu.js/• Fn.js http://eliperelman.com/fn.js/

9

Functional Programming in JS

• High-Order functions– Functions in JS can be used as parameters, assigned to

variables, and returned from other functions (lead to LSP)• Closures

<< outer scope (global) >>function makeInner(params) {

<< inner scope >> return function inner(params2) { << function body >> } var additionalVars;}

10

What about OO?

Battle of the Hello World!

document.getElementById(’msg').innerHTML = '<h1>Hello World</h1>';

compose(addToDom(’msg'), h1, echo('Hello World'));

vs

More functional Hello World!

compose ( addToDom(’msg'),

h2, repeat(3), echo('Hello World'));

configurable

Declarative Programming• Describe WHAT a program does• Not HOW to do it

SQL> SELECT p.firstname, p.birthYear FROM Person p WHERE p.birthYear > 1903 AND p.country = 'US' GROUP BY p.firstname, p.birthYear

Get FunctionalFunctional Techniques

… after thinking functionally…

17

To functionalvar addToTable = compose( appendToTable(’personTable'),

populateRow, props(['ssn', 'firstname', 'lastname']),

findPerson, normalize, trim);

Things to understand

• The issue of side effects• Referential Transparency• Singularity principle• Liskov Substitution Principle• Currying and composition• Functors and Monads

Side effects• Changing a variable, property or data structure globally• Changing the original value of a function’s argument• Processing user input• Throwing an exception, unless it’s caught within the same

function• Printing to the screen or logging• Querying the DOM or databases

Forget about stateful functions?

• Date.now()

• Math.random()

• Array.sort()

• console.log()

How do we deal with change?

• Simply don’t change any objects…. (right)• Use const (limited)• Create Value Objects (only in certain cases)• JavaScript’s Object.freeze (shallow)• Use Lenses (more elegant option!)

Lenses var person = new Person('Alonzo', 'Church'); var lastnameLens = lenseProp('lastName'); view(lastnameLens, person); //-> 'Church' var newPerson = set(lastnameLens, 'Mourning', person);newPerson.lastname; //-> 'Mourning’person.lastname; //-> 'Church'

var person = { firstname:'Alonzo’, lastname: 'Church'}

Understanding referential transparency

• Functions behave like mathematical functions var increment = (val) => val + 1; • Functions are relations that map a set of types to other types• Functions shall return the same output on same input

• Functions require all parameters needed to perform its work

N

N

N

N

Nincrement

domain range

Equational Reasoning

var input = [80, 90, 100];

divide(sum(input), size(input)); //-> 90

divide(270, 3); //-> 90

270 / 3 = 90

Input -> Program = [func1, func2, func3, ...] -> Output

Simple Functions• Singularity principle: functions are supposed

to do perform only one task• Simple functions typically have fewer

arguments (reduced arity) that complex functions

• Simple functions are easy to compose and chain

Bye Bye Loops• Loops introduce non-linear program flow• Loops mutate data (variable counter)• They can be modeled with functions

var acc = 0;for (let i = 0; i < nums.length; i++) { acc += nums[i];}

function sum(arr) { var list = _(arr); return list.isEmpty() ? 0 : return list.head() + sum(list.tail());}

Lazy Function Chains• Other alternatives to loops• Use high level constructs such as map, reduce, and

filter• Functional libraries implement clever techniques like– Pipelining– Method fusion

var fruits = ['Apple', 'apple', 'ORANGE', 'banana', 'bAnAnA']result = chain(fruits) .map(startCase) .uniq() .sort() .value(); //-> ['Apple', 'Banana','Orange']

Liskov Substitution Principle

• Functions that use references to base classes must be able to use objects of derived classes without knowing it

• Programming functionally with objects means separating the state from its behavior

• Beneficial for building function chains and pipelines• Practically, this means avoiding the use of this

fullname(person)

Person

get fullname()

Student

get school()

Person

Student

var person = new Person('Alonzo', 'Church', '444-44-4444');p.fullname(); //-> Alonzo Church

var fullname = (person) => [person.firstname, person.lastname].join(' ');

fullname(person); //-> Alonzo Church

Uses the this reference to access object’s data

Eliminates the use of this since object is supplied as parameter

FP separates methods into high-order function that can work on instances of base type Person, which must also work with Student

Currying• Some functions can’t be reduced to single arguments• Used to partially evaluate a function as a sequence of

steps by providing arguments one-at-a-time• Currying enables the composition of complex

functions

function f(a, b, c) { … }

f a f(a, undefined, undefined)

evaluating:

returns:

Currying2

function f(a, b, c) { … } curry(f) :: (a,b,c) -> f(a) -> f(b) -> f(c)

f(a, b, c) { return function (a) { return function (b) { return function (c) { … } } }

f a f(b, c)

evaluating:

f a f(c)b

f a resultb c

returns:

Currying3

var name = curry2(function (last, first) { return [last, first].join(',');}); name('Curry')('Haskell'); //-> 'Curry, Haskell’ name('Curry'); //-> Function

Composition• Deep-link a function’s

return value with another function’s arguments

• Separates a program’s description from evaluation

• Composition leads to point-free programs

A

A

A

B

B C

Cgf

f o g = f(g(x))

• The resulf of composing a function is another function that can be composed further

Composition2

f o g = f(g) = compose :: (B -> C) -> (A -> B) -> (A -> C)

var str = `A complex system that works is invariably found to have evolved from a simple system that worked `;

var explode = (str) => str.split(/\s+/); var count = (arr) => arr.length; var countWords = compose(count, explode); countWords(str); // -> 17

addToTable

cleanInputcheckLengthSsn

findPerson

populateRow

appendToTable

✔

✔

✔

Impure:can’t be tested

reliably

!Decompose = Compose

Become the building blocks of your program

Building blocksvar safeFindObject = curry(function (db, id) { return Maybe.fromNullable(find(db, id));});

var findPerson = safeFindObject(DB(’people'));

var trim = (str) => str.replace(/^\s*|\s*$/g, '');

var normalize = (str) => str.replace(/\-/g, '');

Building blocks2var populateRow = function (columns) { var cell_t = _.template('<td><%= a %></td>'); var row_t = _.template('<tr><%= a %></tr>'); var obj = function (a) { return {'a': a}; }; var row = compose(row_t, obj, R.join(''), map(cell_t), map(obj)); return row(columns);};

var addToTable = curry( function (elementId, rowInfo) { $(`#${elementId} tr:last`).after(`<tr>${rowInfo}</tr>`);

return $(`#${elementId} tr`).length - 1; });

39

Composedvar addToTable = compose( appendToTable(’personTable'),



40

Composedvar addToTable = compose( appendToTable(’personTable'),



Lift Functional SkillsFunctional Design Patterns

Memoization• Optimization technique used to avoid

unnecessary invocation of a computationally expensive function

• Based on the principle of referential transparency

• Only applies to pure functions• Implemented using a simple caching layer

43

Memoization2Function.prototype.memoized = function () { var key = JSON.stringify(arguments); this._cache = this._cache || {}; this._cache[key] = this._cache[key] || this.apply(this, arguments); return this._cache[key];};

Function.prototype.memoize = function () { var fn = this; if (fn.length === 0 || fn.length > 1) { return fn; } return function () { return fn.memoized.apply(fn, arguments); };};

44

var md5 = (function (str) { // algorithm details here... return digest; }).memoize();

var str = ’OO in the large, functional in the small’;md5(str); // 0.733 msmd5(str); // second time: 0.021 ms

Memoization3

md5

_cache'Get Functional!'

check cache

function key value

md5 Get Functional!

96d18935a41d37a54d60ce997675cc91

put

function key value

[empty]

contains

false

memoized

96d18935a41d37a54d60ce997675cc91

run function

96d18...96d18935a41d37a5...

'Get Functional!' check cache

contains

true

get

96d18...96d18935a41d37a54d60ce997675cc91

First call

Second call

46

Containerizingvar Wrapper = function (val) { this._val = val; }; // MapWrapper.prototype.map = function (f) { return f(this._val); }; // Unitvar wrap = (val) => new Wrapper(val);

guarded

identity

map

identity returnsthe same value

Wrapper

Containerizing2

var wrappedValue = wrap('Get Functional'); // extract the valuevar value = wrappedValue.map(toUpper).map(repeat(2)).map(identity);

value; //-> 'GET FUNCTIONAL GET FUNCTIONAL'

Functors: next level containers

48

// MapWrapper.prototype.map = function (f) { return f(this.val); };

// FunctorWrapper.prototype.fmap = function (f) { return wrap(f(this.val));};

• Data structure that can be mapped over

• Lift values into a container so that you can apply functions onto them, place the result back into the container

49

Functors2

var plus = curry((a, b) => a + b);var plus3 = plus(3);var two = wrap(2);var five = two.fmap(plus3); //-> Wrapper(5) two.fmap(plus3).fmap(plus10); //-> Wrapper(15)

plus3

fmapWrapper

2

Wrapper

2

apply function

Wrapper

5

wrap

50

Why do this?

Wrapping a potentially null value or a function that can cause the program to fail

51

Software is unpredictable

Exception thrown but contained within the wrapper

Exception does not affect any other part of the system

52

Software must be robust

Function throws an exception

Exception is propagated and gracefully handled

Program flow

53

Monads

Functor + Unit = Monad

…and some more

54

Monads2• Backbone of functional

programming• Treat data and operations

algebraically• Data type used for applying a

sequence of transformations on data (conveyor belt model)

• Abstract data flows• Used for error handling, IO,

Logging, etc

55

Error handling and Maybe• Wall-off impurity• Consolidate null-check logic• Consolidated exception throwing• Support compositionally of functions• Centralize logic for providing default values

56

Maybe Monad2

Just

object

Nothing

Maybe

Just(value): represents a container that wraps a defined value.

Nothing(): represents a container that has no value, or a failure that needs no additional information.

57

Maybe Monad3

class Maybe { static fromNullable(a) { return a !== null ? just(a) : nothing(); } static of(a) { return just(a); }}

class Just extends Maybe { map(f) { return of(f(this.value)); } getOrElse() { return this.value; }}

58

Maybe Monad4class Nothing extends Maybe { map(f) { return this; // noop } get value() { throw new TypeError(`Can't extract the value of a Nothing.`); } getOrElse(other) { return other; } }

Maybe Example

59

Maybe.of(3).map(plus2); //-> Maybe(5)

Maybe.of(3).chain(plus2); //-> 5

Maybe.fromNullable(null).map(plus2); //-> Nothing()

Maybe Example2

60

function getCountry(student) { var school = student.school(); if (school !== null ) {

var addr = school.address();

if (addr !== null ) {return

addr.country(); }}return 'Country does not

exist!';}

student; //-> Maybe<Student>

var getCountry = (student) => student .map(prop('school')) .map(prop('address')) .map(prop('country'))

.getOrElse('Country does not exist!');

61

Monads abstract data flow

cleanInputSSN SSN checkLengthSsn SSN findPerson

addToTable(SSN)

nullpopulateRow

Leftnull

LeftappedToTable

orElse errorLog

skipped skipped

props

skipped

When an error occurs, Maybe safely propagatesthe error through the components of your code

To recap…

64

To functionalvar addToTable = compose( appendToTable(’personTable'),



• Eliminate side effects!• Reduce complexity!• Code is more testable!• Declarative and easier to read!• Reduce number of bugs!