Functional es6

Sexier Javascript
With Lodash & ES6
By
Omry Nachman [omry@wix.com]

Agenda
Declarative Vs. Imperative
Functional Programming
Harness ES6 and Lodash
Functional best practices

Declarative
Programming
Declarative programming
focuses on the what
* * *
Imperative programming
focuses on the how

Imperative Code
function followers(person, data) {
var result = [];
for (var i=0 ; i<data.length ; i++) {
if (data[i].follows.indexOf(person._id) >= 0 ) {
result.push(data[i]);
}
}
return result;
}

Declarative Code
var followers = (person, data) => _.where(data, {follows: [person._id]})

“In mathematics, a function is a relation between a set
of inputs <domain> and a set of permissible outputs
<range> with the property that each input is related
to exactly one output.”
Wikipedia
http://en.wikipedia.org/wiki/Function_%28mathematics%29

Functions
f(x)=2x+3
round(x)
person => person’s mother

Not (Math)
Functions
person => person’s child
function add(x) {
this.sum += x;
return this.sum;
}
function getSum(){
return this.sum;
}

Math => Code
Advantages of pure (===math style) functions
Constant output per input => Cacheable, Parallelizable
Composable => Single responsibility, Reusability, Great
for DSLs
Known domain and range => Simplicity, Consistency
No side effects => Easy to test, Easy to reproduce

Enough Theory
Let’s look at some code patterns

Functional Approach
minFollowers = (min, data) => _.where(data,
person => followers(person, data) >= min)
maxFollowers = (max, data) => _.where(data,
person => followers(person, data) >= max)
rangeFollowers = (min, max, data) =>
maxFollowers(max, minFollowers(min, data))

Composition & Partial
_.compose(
_.partial(maxFollowers, max),
_.partial(minFollowers, min)
)

DSLs
Isn’t this syntax nice?
minFollowers = (min, data) =>
followersCount(isMoreThen(min), data)
maxFollowers = (max, data) =>
followersCount(lessThen(min), data)
followersCount(inRange(min, max), data)

DSLs
It requires this bootstrapping:
moreThen = min => (val => val >= min)
lessThen = max => (val => value <= max),
inRange = (min, max) => (val => val>= min && val <= max)
followersCount = (filter, data) => _.where(data,
person => filter(getFollowersOf(data, person._id))
So don’t get curried way…

Memoize
Pure functions can be memorised (cached) per input,
trading CPU for memory
// O(2^n)
var fib = n => (n<2) ? 1 : fib(n-2) + fib(n-1)
//O(n)
var fib = _.memoize(n => (n<2) ? 1 : fib(n-2) + fib(n-1))
By default, the first argument is the cache key,
but it can be customised

Immutability & Statelessness
No mutation, no side effects
setName = (obj, name) => {
obj.name = name;
}
withName = (obj, name) =>
_.merge(obj, {name: name})

Let’s Mess With Some Data
The functional way

Group Common Names
Say we want to create a histogram of people’s names
[{name:{first:’David’, last:’Jones’},…},
{name:{first:’David’, last:’Kulas’},…},
{name:{first:’Mia’, last:’Angelo’},…},
{name:{first:’Lucia’, last:’Stroman’},…}]
histogram = _(data).
groupBy(person => person.name.first).
mapValues(people => people.length).
transform(
(acc, count, name) =>
acc[count] = _.union(acc[count], [name])).
value();
{
1:[‘Lucia’, ‘Mia’]
2:[‘David]
}

Group Common *
histogram = (data, predicate) => _(data).
groupBy(predicate).
mapValues(people => people.length).
transform(
(acc, count, name) =>
acc[count] = _.union(acc[count], [name])).
value();
So now we can do
histogram(data, ’age’)
histogram(data, _.partialRight(followers, data))

Best Practices
*And Worst Practices

Good Idea
Access App State In One Place
var appState = {…} // hidden by closure, class or module
updateData = data => { // privileged method
appState.data = data
updateView(appState.data, appState.renderSettings, setView)
}
updateState = newPartialState => { // privileged method
appState = _merge(appState, newPartialState)
updateView(appState.data, appState.renderSettings, setView)
}
goGetData().then(updateData)
app.addEvenrListener(‘state-change’, updateState)

Bad Idea
Using functional style to
make your code obscured
var myFunc = isVery =>
obscured => (because, i) =>
(just, learned) => about =>
functional => programming (and,
arrow, notation) => but =>
maybe => iShould =>
breakeItDown.toSmaller.function
s

Functional es6

More Related Content

What's hot (20)

Similar to Functional es6 (20)

Recently uploaded (20)

Functional es6