A Skeptics guide to functional style javascript

@jonathanfmills
Jonathan Mills
A Skeptics Guide to
Functional Style
JavaScript

Functional Style JavaScript
So Hot Right Now

Functions
are first class objects

OBJECTS
Functions are first class

What is
Functional Programming?

In computer
science, functional
programming is a
programming paradigm

a style of building the structure
and elements of computer
programs

that treats computation as the
evaluation of mathematical
functions

and avoids changing-state and
mutable data.

Nothing is immutable
in JavaScript

"The programmers in that segment like
functional programming because it makes
code clearer, better structured, and it
prevents many classes of errors."
Scala founder Martin Odersky

They quote the
following phrases...

Without clear reasons for them…

It’s the tooling that
does the work!

The bit flips
when you think about it this way
0 > 1-

You can’t avoid Side Effects

Not everything has to be
immutable

Functional style is about
using
less brain power
and
making things simpler

It is about
small,
composable
things

That is where I broke down, I think in systems…

Functional Style
thinks in the smallest possible items

You have to have both, it’s not either

let list = [1,2,3,4,5];
//Add 1 to each item...
for(let i = 0; i<list.length; i++){
list[i] = list[i] + 1;
}
console.log(list);
For loop example

let list = [1,2,3,4,5];
}
console.log(list); // [ 2, 3, 4, 5, 6 ]
For loop example

let list = [1,2,3,4,5];
}
console.log(list); // [ 2, 3, 4, 5, 6 ]
For loop example
Iteration Code

let list = [1,2,3,4,5];
}
console.log(list); // [ 2, 3, 4, 5, 6 ]
For loop example
Worker Code

let list = [1,2,3,4,5];
list.map(/*a function*/);
console.log(list);
map replaces for
Iteration Code

let list = [1,2,3,4,5];
}
console.log(list); // [ 2, 3, 4, 5, 6 ]
It’s the same thing
Iteration Code

let list = [1,2,3,4,5];
console.log(list);
Forget iteration code forever!!
Iteration Code

What are we doing to each item?

let list = [1,2,3,4,5];
console.log(list);
Forget iteration code forever!!
Worker Code

Pass a pure function to do the work

In computer programming, a function may be considered
a pure function if both of the following statements about
the function hold:
Pure Function

The function always evaluates the same result value
given the same argument value(s).
Pure Function

function add(a,b){return a+b}; //Pure
math.random(); //Not pure

Evaluation of the result does not cause any semantically
observable side effect or output, such as mutation of
mutable objects or output to I/O devices
Pure Function

let sum = 0;
function add(a){sum = sum + a}; // Not pure

Its not a ruleLess Brain PowerLess to track
Why pure?

let list = [1,2,3,4,5];
list.map(function(item){return item+1});
console.log(list);
Add you function in!
Worker Code

let list = [1,2,3,4,5];
list.map((item)=>{return item+1});
console.log(list);
Arrow functions!
Worker Code

let list = [1,2,3,4,5];
list.map(item=>item+1);
console.log(list);
Simpler!
Worker Code

let list = [1,2,3,4,5];
list.map(item=>item+1);
console.log(list);
This looks nice but can be unclear!

let list = [1,2,3,4,5];
let addOne = item=>item+1
list.map(addOne);
console.log(list);
No anonymous functions

let list = [1,2,3,4,5];
}
console.log(list); // [ 2, 3, 4, 5, 6 ]

let list = [1,2,3,4,5];
list.map(addOne);
console.log(list);

let list = [1,2,3,4,5];
list.map(addOne);
console.log(list); // [ 1, 2, 3, 4, 5]
Why am I forced to change list?

let list = [1,2,3,4,5];
const newList = list.map(addOne);
console.log(newList); // [ 2, 3, 4, 5, 6]
No changing…

let list = [1,2,3,4,5];
list = list.map(addOne);
console.log(newList); // [ 2, 3, 4, 5, 6]
Changing

Less brain power
Easier to validate
Obja === Objb
Enforces Options
Immutability

What about more complicated loops?

Filter items!
let list = [1,2,3,4,5];
let isEven = item=>{return !(item%2)}
list = list.filter(isEven);
console.log(list); // [ 2, 4 ]

let list = [1,2,3,4,5];
let sum = 0;
sum = list[i] + sum;
}
console.log(list); // 15
Not everything is self contained…..

let list = [1,2,3,4,5];
let sumList = (sum, item)=>{return sum + item};
const sum= list.reduce(sumList, 0);
console.log(sum);

let list = [1,2,3,4,5];
let addOne = item=>item+1;
let sumList = (sum,item)=>{return item + sum};
let val = list.map(addOne).reduce(sumList, 0);
console.log(val); // 20

Find Items
let list = ['jon','jack','Rachel','Susan','Sarah'];

Find Items
let getPerson = item=>item==='Rachel';
const item = list.find(getPerson);
console.log(item);

Find Items
let getPerson = item=>item==='Rachel';
const item = list.find(getPerson ('Rachel'));
console.log(item);

In mathematics and computer science, a higher-order
function (also functional, functional form or functor) is
a function that does at least one of the following: takes one
or more functions as arguments (i.e., procedural
parameters), returns a function as its result.
Higher Order Functions

Find Items
let getPerson = function(search){return item=>item===search;}
const item = list.find(getPerson('Rachel'));
console.log(item); // Rachel

Find Items
let getPerson = search=>item=>item===search;
const item = list.find(getPerson('Rachel'));

Find items!
let getPerson = search=>item=>item===search;
const item = list.findIndex(getPerson('Rachel'));
console.log(item); // 2

let sum = add(a,b);
Simple example

In mathematics and computer science, currying is the technique
of translating the evaluation of a function that takes multiple
arguments (or a tuple of arguments) into evaluating a sequence
of functions, each with a single argument.
Currying

let sum = add(a)(b);
Simple example

buttons = [
{ name: 'One', message: 'Button One' },
{ name: 'Two', message: 'Button Two' },
{ name: 'Three', message: 'Button Three' }
];
Bigger example

<button onClick={this.onClick} name={item.name}>
Bigger example

onClick = (event)=>{
//loop over buttons to get messages
}
Bigger example

onClick = (index, event)=>{
//I don’t have to loop over buttons to get messages
}
Bigger example

Find Items
let getOne = search=>item=>item===search;
const item = list.find(getOne('Rachel'));

getOnClick(index){
return function(event){message=buttons[index]}
}
Bigger example

<button onClick={this.getOnClick(index)} name={item.name}>
Bigger example

Once you understand Monads, you can no longer explain
them to someone who does not…
Crockford’s Law

In functional programming, a monad is a design pattern that defines how functions, actions,
inputs, and outputs can be used together to build generic types, with the following
organization:
1. Define a data type, and how values of that data type are combined.
2. Create functions that use the data type, and compose them together into actions,
following the rules defined in the first step.
Monad

Monads are things that get around the “no side effects”
rule…
Monad

function Identity(value) {
this.value = value;
}

this.value = value;
}
var x = new Identity(5);
console.log(x.value); // 5

Identity.prototype.bind = function(transform) {
return transform(this.value);
};

this.value = value;
}
};
x = x.bind((value)=> new Identity(value+2));
console.log(x.value); // 7

Monads are not required
in JavaScript…
we can have side effects…

this.value = value;
}
};
console.log(x.value); //8

this.value = value;
}
};
x.value = 5 // <- this
console.log(x.value); // ?

For JavaScript,
functional style a mindset..

A Skeptics guide to functional style javascript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to A Skeptics guide to functional style javascript

Similar to A Skeptics guide to functional style javascript (20)

Recently uploaded

Recently uploaded (20)

A Skeptics guide to functional style javascript

Editor's Notes