This is a presentation which was presented on Innovecs Tech Hangout in Kiev June 2017. Includes - Pure Functions - Currying - Function Composition - Functors - Monads

1. Functional JavaScript

2. Немного о себе

3. map, reduce, filter

5. Pure functions

6. let a = a => a;
let b = (a, b) => a + b;
let c = 4;
let d = d => c += d;
let e = (d) => { c += d; };
let f = (d) => { c += d; };
Pure Functions Impure Functions
Dependent Functions

7. Side Effects
• Modifying external variable or object property
• Logging to console
• Writing to console
• Writing to a file
• Triggering any external process
• Calling any other functions with side-effects

8. Immutability

9. Immutable.js
Vanilla JS
List([ 0, 1, 2, 3, 4 ]).insert(3, 6);
// List [ 0, 1, 2, 6, 3, 4 ]
let a = [0, 1, 2, 3, 4];
let b = [...a.slice(0, a.length - 2),
6,
...a.slice(a.length - 2)];
// b [0, 1, 2, 6, 3, 4]

10. Function composition

11. Зачем нужен return

12. gatesOfHellOpener(goatLeg, dragonBlood, trollBone) {
let potion = this.heatUpThePotion();
potion += goatLeg;
potion += dragonBlood;
potion += trollBone;
this.startTheRite(potion);
};
startTheRite(potion) {
let bunchOfWizards = this.summonAllWizards();
bunchOfWizards(potion);
};
Day-to-Day code

13. const startTheRite = (bunchOfWizards) => (potion) => bunchOfWizards(potion);
const fillThePotion =
(ingredients) => (potion) =>
ingredients.reduce((acc, el) => { return acc + el }, potion);
const ingredients = ['goatLeg', 'dragonBlood', 'trollBone'];
const bunchOfWizards = summonAllWizards();
const makePotion =
_.compose(fillThePotion(ingredients), initThePotion);
const gatesOfHellOpener =
_.compose(startTheRite(bunchOfWizards), makePotion);
gatesOfHellOpener();
Difficult stuff

14. Monad

15. Monad => Identity

16. const Maybe = function (val) {
this.__value = val;
};
Maybe

17. Maybe.of = function (val) {
return new Maybe(val);
};
Maybe.Of

18. Maybe.prototype.isNothing = function() {
return (this.__value === null ||
this.__value === undefined);
};
Maybe.isNothing

19. Maybe.prototype.map = function(f) {
if (this.isNothing()) {
return Maybe.of(null);
}
return Maybe.of(f(this.__value));
};
Maybe.map

23. const document = {
name: 'someDoc',
heading: {
text: 'Main Header',
style: {
font: {
size: 14
}
}
}
};

24. function processHeadingText(doc) {
if (doc.heading && doc.heading.text) {
return doc.heading.text;
}
}
function getHeadingStyle(doc) {
if (doc.heading &&
doc.heading.text &&
doc.heading.style) {
return doc.heading.style;
}
}
Without Maybe

25. function getHeadingText(doc) {
return Maybe.of(doc)
.map(R.prop('heading'))
.map(R.prop('text'));
}
function getHeadingStyle(doc) {
return Maybe.of(doc)
.map(R.prop('heading'))
.map(el => R.has('text', el) && el)
.map(R.prop('style'));
}
With Maybe

26. Maybe.prototype.orElse = function (def) {
if (this.isNothing()) {
return Maybe.of(def);
}
return this;
};
Maybe.orElse

27. getHeadingText(doc)
.orElse('');
getHeadingStyle(doc)
.orElse({
font: {
size: 14,
fontFamily: 'Helvetica'
}
});

28. const textAndStyle = Maybe.of([
getHeadingText(document),
getHeadingStyle(document)
]);
// Maybe([Maybe(text), Maybe(style)])

29. Maybe.prototype.join = function() {
return this.__value;
};
Maybe.join

30. function getHeadingText(doc) {
return Maybe.of(doc)
.map(R.prop('heading'))
.map(R.prop(‘text’))
.join();
}
function getHeadingStyle(doc) {
return Maybe.of(doc)
.map(R.prop('heading'))
.map(el => R.has('text', el) && el)
.map(R.prop(‘style'))
.join();
}
Maybe with Join

31. const textAndStyle = Maybe.of([
getHeadingText(document),
getHeadingStyle(document)
]);
// Maybe([text, style])

33. Functor

34. Functor

35. class Wrapper {
constructor(value) {
this.value = value;
}
map(f) {
return f(this.value);
}
fmap(f) {
return new Wrapper(f(this.value));
}
}
Usual Functor

36. const wrap = (value) => new Wrapper(value);
const wrappedValue = wrap(' Get Functional ‘);
const upperCased = wrappedValue.map(R.upper); // =>
' GET FUNCTIONAL ‘
const trimmed = wrappedValue.map(R.trim); // =>
'Get Functional’
Functor example

37. Must be Side-Effect Free
const a = wrappedValue.map(R.identity); // =>
‘ GET FUNCTIONAL '

38. const a = wrappedValue.fmap(R.upper).map(R.trim);
// 'GET FUNCTIONAL’
const b = wrappedValue.fmap(R.compose(R.upper,
R.trim)).map(R.identity); // it is the same
Must be Composable

39. [ ] map and filter => [ ]

40. Medium
https://medium.com/@mickeyboston
LinkedIn
s://www.linkedin.com/in/georgiy-shevtsov-58a113

41. That’s All