Thinking Functionally with JavaScript

Thinking Functionally
Functional Programming using JavaScript
Luis Atencio
@luijar
Blog: http://luisatencio.net

What is FP?
“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 leads to separation of concerns
• Avoid duplications
• Implement changes unobtrusively
• Create code that is extensible and configurable
• Foundation for Rx and reactive programming

Why Learn it now?
• Most newer languages are/have incorporated
functional features into them.
– Java (streams, function interfaces, lambda
expressions)
– Scala (hybrid FP + OO)
– F# (immutable structures, pipes)
• LINQ
– ES6 JavaScript -> ES7 JavaScript will have streams
– Clojure, Lisp, Scheme, Haskell, OCaml, Erlang, etc
• We live in a highly concurrent world

Paradigm shift
• Eliminate externally observable side effects
• Control (reduce or eliminate) mutations
• Write declaratively and point-free
• Everything is a value (even functions)
• Functions ALWAYS return values
• Recursion as looping mechanism (eliminate
loops)
5

The OO World
6
Data and behavior tightly
coupled
ClassA
data
behavior
ClassB
data
behavior
ClassC
data
behavior Unit testing is challenging
Unit of work: Classes

function doWork(objectA): objectB
The FP World
function doMoreWork(objectB): objectC
function displayResults(objectC)
Data and behavior loosely
coupled
Unit testing is (basically)
free
Unit of work: Function

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
a functional style.
Features that favor functional programming:
• const keyword
• Promises
• Lambda expressions + closures
• Generators and Iterators
• FP libraries (Ramda.js, Underscore.js, Lodash.js, etc)

Hello World!
document.getElementById('msg').innerHTML = '<h1>Hello World</h1>';
compose(addToDom('#msg'), h1)('Hello World');
vs

More functional Hello World!
compose (
addToDom('#msg'),
h2,
repeat(3))('Hello World');
Declarative & configurable

Even more functional Hello World!
compose (
addToDom('#msg'),
h2,
repeat(3),
escapeChars)('Hello World');
Extensible

Declarative Programming
• Describe WHAT a program does
• Not HOW to do it
SQL>
SELECT firstname, birthYear FROM Person
WHERE year > 1903 AND country = 'US'
GROUP BY firstname, birthYear
FP>
compose(select(firstname, birthYear),
from('Person'),
where(year => year === 1903),
where(country => country === 'US'),
groupBy(firstname, birthYear))(query);

First let’s look at the current
state of things
Imperative Programming

… after thinking functionally…
…and some magic…

var addToTable = compose(
appendToTable(’personTable'),
populateRow,
props(['ssn', 'firstname', lastname']),
findPerson,
normalize,
trim);
addToTable(personId);
16

First, you need to understand…
• The issue with side effects and mutations
• Singularity principle
• Currying and composition
• Functors and Monads

Side effects
doWork doMoreWork
sharedData = [...]
depends on updatechanges
coupling
1 2
order matters

personId = studentId.replace(/^s*|-|s*$/g,'');
}
if (person) {
var rowInfo =
$(`#${tableId}
}
else {
throw new Error(’Person Record not found!');
}
}
else {
return 0;
}
}
External
Dependencies
Complexity
IO

How do we deal with
mutations?

Lenses: object mutations
const person = new Person('Alonzo', 'Church');
const lastnameLens = lenseProp('lastName');
view(lastnameLens, person); //-> 'Church'
const newPerson = set(lastnameLens,
'Mourning', person);
newPerson.lastname; //-> 'Mourning’
person.lastname; //-> 'Church'
var person = {
firstname:'Alonzo’,
lastname: 'Church'
}

Singular Functions
• Singularity principle: functions are supposed
to perform only one task
• Simple functions typically have fewer
arguments (reduced arity) than complex
functions
• Simple functions are easy to test, but also
composeable and chainable

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:
( )

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

f a f(b, c)
Evaluating:
f a f(c)b
f a resultb c
returns:
(
(
(
)
)
)
Currying3

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

Composition
• Loosely couple a function’s return value
with another function’s arguments
(pipeline)
• Separates a program’s description from
evaluation
• The resulf of composing a function is
another function that can be composed
further

Composition2
f•g(x) = f(g(x))

Composition example
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

Composition is the backbone of
modularity in FP

personId = studentId.replace(/^s*|-|s*$/g, '');
}
if (person) {
var rowInfo =
$(`#${tableId}
}
else {
throw new Error('Person Record not found!');
}
}
...
Breaking monolithic functions

addToTable
cleanInput
checkLengthSsn
findPerson
populateRow
appendToTable
✔
✔
✔
Impure:
can’t be tested
reliably

Decompose => Compose
Become the building blocks of your program

Building blocks
const safeFindObject = curry(function (db, id) {
return Maybe.fromNullable(db.get(id));
});
const findPerson = safeFindObject(DB('people'));
const trim = (str) => str.replace(/^s*|s*$/g, '');
const normalize = (str) => str.replace(/-/g, '');

Building blocks2
const populateRow = function (columns) {
const cell_t = template('<td><%= a %></td>');
const row_t = template('<tr><%= a %></tr>');
const obj = function (a) {
return {'a': a};
};
const row = compose(
row_t, obj, join(''),
map(cell_t),
map(obj));
return row(columns);
};
const addToTable = curry(
function (elementId, rowInfo) {
$(`#${elementId} tr:last`)
.after(`<tr>${rowInfo}</tr>`);
return $(`#${elementId} tr`).length - 1;
});

const addToTable = compose(
appendToTable('personTable'),
populateRow,
props(['ssn','firstname’,'lastname']),
findPerson,
normalize,
trim);
addToTable(personId);
35
Functional programming

Containerizing
37
const Wrapper = function (val) {
this._val = val;
};
// Map
Wrapper.prototype.map = function (f) {
return f(this._val);
};
// Unit
const wrap = (val) => new Wrapper(val);
guarded
identity
map
identity returns
the same value
Wrapper

Containerizing2
const wrappedValue = wrap('Get Functional');
// extract the value
const value =
wrappedValue.map(toUpper).map(repeat(2)).map(identity);
value; //-> 'GET FUNCTIONAL GET FUNCTIONAL'

• 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
Functors: next level containers
39
// Functor
Wrapper.prototype.fmap = function (f) {
return wrap(f(this._val));
};

Functors2
40
const plus = curry((a, b) => a + b);
conts plus3 = plus(3);
const two = wrap(2);
const five = two.fmap(plus3); //-> Wrapper(5)
two.fmap(plus3).fmap(plus10); //-> Wrapper(15)
plus3
fmap
Wrapper
2
Wrapper
2
apply function
Wrapper
5
wrap

What can we do with containers?
41
Wrap a potentially null value or
a function that can cause the
program to fail

Software is unpredictable
42
Exception thrown
but contained
within the wrapper
Exception does not
affect any other
part of the system

Software must be robust
43
Function throws an
exception
Exception is propagated and gracefully
handled
program flow

Monads
44
Functor + Unit = Monad
…and some more

Monads2
45
• 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

So call me: Maybe
46
• Wall-off impurity
• Consolidate null-check logic
• Consolidated exception throwing
• Support compositionally of functions
• Centralize logic for providing default values

Maybe Monad
47
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.

Maybe: Just
48
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;
}
}

Maybe: Nothing
49
class 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;
}
}

Usage
50
Maybe.of(3).map(plus2);
//-> Maybe(5)
Maybe.of(3).chain(plus2);
//-> 5
Maybe.fromNullable(null).map(plus2);
//-> Nothing()

Remove nested code
51
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>
const getCountry = student => student
.map(prop('school'))
.map(prop('address'))
.map(prop('country'))
.getOrElse('Country does not
exist!');

Monads abstract data flow
+ Error Handling
52
trimxxx-xxx id normalize id findPerson
addToTable(personId)
nullpopulateRow
Left
null
Left
appendToTable
orElse console.log
skipped skipped
props
skipped
When an error occurs, Maybe safely propagates
the error through the components of your code

if(personId!= null) {
personId= personId (/^s*|-|s*$/g, '');
if(personId!== 9) {
}
var person= db.get(personId);
if (person) {
var rowInfo =
$(`#${tableId}
}
else {
throw new Error(’Person not found!');
}
}
else {
return 0;
}
}
From
imperative

To Functional
const addToTable = compose(
appendToTable('personTable'),
populateRow,
props(['ssn','firstname','lastname']),
findPerson,
normalize,
trim);
addToTable('444-44-4444'); //-> Maybe(Student)
addToTable('xxx-xx-xxxx'); //-> Maybe(null)
addToTable('xxx-xx-xxxx').orElse(
console.log('Error adding student');
);
55

Thinking this way will…
• Allow you create modular, testable, reliable,
and robust applications
• Decompose, decompose, decompose!
• Pure functions: help design for concurrency
• Enable other paradigms:
– Reactive programming
– Concurrent programming
– Immutable architectures?

My way of contributing and
teaching

Magazines
https://dzone.com/refcardz/functional-programming-with-javascript

Functional
Programming in
JavaScript
www.manning.com/atencio

Functional
PHP
https://leanpub.com/functional-php
Free!

https://legacy.joind.in/16810
Thanks!

Thinking Functionally with JavaScript

More Related Content

What's hot (20)

Similar to Thinking Functionally with JavaScript (20)

Recently uploaded (20)

Thinking Functionally with JavaScript

Editor's Notes