The document discusses the concept of monads in JavaScript, including monad laws and practical applications using a cooking analogy. It details functions for handling ingredients like pepper and tomato, demonstrating how to slice and mix them while using the monadic structure to manage these operations. Additionally, it explores various ways to handle spices with conditional checks and transformations through the use of the Maybe monad.

1. Awesomely descriptive JavaScript
with Monads

2. Theory

3. Monad laws
return a >>= f ≡ f a
m >>= return ≡ m
(m >>= f) >>= g ≡ m >>= (x -> f x >>= g)

4. Monad laws

5. Practical theory

7. V E G E T A B L E
A
L
U
E

10. P => M<S>
f

11. =>
unit
P => M<P>

12. ( , ) =>
bind
( M<P> , P => M<S> ) => M<S>

13. ( M<P> , P => M<S> ) => M<S>M<P> P => M<S> M<S>
extract
value
bind
function
m(x)
x
x => m(y) m(y)
bind

14. Monad laws (JavaScript)
bind( unit(v) , f ) ≡ f(v)
bind( monad , unit ) ≡ monad
bind( bind( monad , f ) , g ) ≡
bind( monad, v => bind( f(v) , g ) )

15. monet.js

16. UNIT
Identity(x)
Maybe.Some(x)
Maybe.None()
Either.Left(e)
Either.Right(x)
List(x, Nil)
monad.bind(f)
monad.flatMap(f)
monad.chain(f)
BIND

17. Monad laws (monet.js / Identity)
Identity(v).flatMap(f) ≡ f(v)
id.flatMap(Identity) ≡ id
id.flatMap(f).flatMap( g ) ≡
id.flatMap(v => f(v).flatMap(g))

18. Practice: Identity

19. UNIT
Identity(x)
Maybe.Some(x)
Maybe.None()
Either.Left(e)
Either.Right(x)
List(x, Nil)
monad.bind(f)
monad.flatMap(f)
monad.chain(f)
BIND

20. var pepperInABowl = getBowlOf('pepper', 'red');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

22. const mixInABowl = getBowlOf('pepper')
.flatMap(slice)
.faltMap(silcedPepper => getBowlOf('tomato')
.flatMap(slice)
.faltMap(mixedTomato =>
mix(silcedPepper , mixedTomato)));

24. But HOW ?

25. interface Bowl<V> {
get(): V;
}
getBowlOf<V>(name: string): Bowl<V>;
slice<S>(vegetable: Vege): Bowl<S>;
mix<M>(...ingredients): Bowl<M>;

26. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

27. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

28. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

29. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

30. monet.js
Identity( … )

31. type Op<A, B> = (val:A) => Bowl<B>;
interface Bowl<V> {
get(): V;
flatMap<S>(f: Op<V, S>): Bowl<S>;
}

32. goo.gl/dh9DrZ

33. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

34. const slicedPepperInABowl =
getBowlOf('pepper').flatMap(slice);

35. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

36. const slicedPepperInABowl =
getBowlOf('pepper').flatMap(slice);
const slicedTomatoInABowl =
getBowlOf('tomato').flatMap(slice);

37. var pepperInABowl = getBowlOf('pepper');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

38. const slicedPepperInABowl =
getBowlOf('pepper').flatMap(slice);
const mixInABowl = getBowlOf('pepper')
.flatMap(slice)
.faltMap(silcedPepper =>
mix(silcedPepper , slicedPepperInABowl.get()));

39. const slicedPepperInABowl =
getBowlOf('pepper').flatMap(slice);
const mixInABowl = getBowlOf('pepper')
.flatMap(slice)
.flatMap(silcedPepper => slicedPepperInABowl
.flatMap(mixedTomato =>
mix(silcedPepper , mixedTomato)));

40. const mixInABowl = getBowlOf('pepper')
.flatMap(slice)
.faltMap(silcedPepper => getBowlOf('tomato')
.flatMap(slice)
.flatMap(mixedTomato =>
mix(silcedPepper , mixedTomato)));

41. var pepperInABowl = getBowlOf('pepper', 'red');
var pepper = pepperInABowl.get();
var slicedPepperInABowl = slice(pepper);
var tomatoInABowl = getBowlOf('tomato');
var tomato = tomatoInABowl.get();
var slicedTomatoInABowl = slice(tomato);
var slicedPepper = slicedPepperInABowl.get();
var slicedTomato = slicedTomatoInABowl.get();
var mixInABowl = mix(slicedPepper, slicedTomato);

42. Practice: Maybe

43. UNIT
Identity(x)
Maybe.Some(x)
Maybe.None()
Either.Left(e)
Either.Right(x)
List(x, Nil)
monad.bind(f)
monad.flatMap(f)
monad.chain(f)
BIND

45. let spiceMix;
const salt = getSpice('salt');
let coriander = getSpice('coriander');
if (coriander) {
coriander = crush(coriander);
}
if (coriander && salt && isPowdered(salt)) {
spiceMix = mixSpice(salt , coriander);
}
spiceMix = vegeta;

46. let spiceMix;
const salt = getSpice('salt');
let coriander = getSpice('coriander');
if (coriander) {
coriander = crush(coriander);
}
if (coriander && salt && isPowdered(salt)) {
spiceMix = mixSpice(salt , coriander);
}
spiceMix = vegeta;

47. const spiceMix = getSpice('salt').filter(isPowdered)
.flatMap(salt =>
getSpice('coriander').map(crush)
.flatMap(coriander =>
mixSpice(salt , coriadner)))
.orJust(vegeta);

48. But HOW ?

49. getSpice<V>(name: string): Maybe<V>;
crush(spice: S): S;
isPowdered(spice: S): boolean;

51. getSpice<V>(name: string): Maybe<V>;
crush(spice: S): S;
isPowdered(spice: S): boolean;

53. getSpice<V>(name: string): Maybe<V>;
crush(spice: S): S;
isPowdered(spice: S): boolean;

54. monet.js
Maybe

55. interface Maybe<T> {
flatMap<V>(fn: (val: T) => Maybe<V>): Maybe<V>;
map<V>(fn: (val: T) => V): Maybe<V>;
filter(fn: (val: T) => boolean): Maybe<T>;
orJust(val: T): T;
}

56. const silkySalt = getSpice('salt').filter(isPowdered);
const crushedCoriander = getSpice('coriander').map(crush);
const spiceMixMaybe = silkySalt.flatMap(salt =>
crushedCoriander.flatMap(coriander =>
mixSpice( salt , coriadner )));
const spiceMix = spiceMixMaybe.orJust(vegeta);

57. const crushedCoriander = getSpice('coriander').map(crush);
const spiceMixMaybe =
getSpice('salt').filter(isPowdered).flatMap(salt =>
crushedCoriander.flatMap(coriander =>
mixSpice( salt , coriadner )));
const spiceMix = spiceMixMaybe.orJust(vegeta);

58. const spiceMixMaybe =
getSpice('salt').filter(isPowdered).flatMap(salt =>
getSpice('coriander').map(crush).flatMap(coriander =>
mixSpice( salt , coriadner )));
const spiceMix = spiceMixMaybe.orJust(vegeta);

59. const spiceMixMaybe = getSpice('salt').filter(isPowdered)
.flatMap(salt =>
getSpice('coriander').map(crush)
.flatMap(coriander =>
mixSpice( salt , coriadner )));
const spiceMix = spiceMixMaybe.orJust(vegeta);

60. const spiceMix = getSpice('salt').filter(isPowdered)
.flatMap(salt =>
getSpice('coriander').map(crush)
.flatMap(coriander =>
mixSpice( salt , coriadner )));
.orJust(vegeta)

61. const spiceMix = getSpice('salt')
.filter(isPowdered)
.flatMap(salt =>
getSpice('coriander')
.map(crush)
.flatMap(coriander =>
mixSpice(salt , coriadner)))
.orJust(vegeta);

62. null

63. getSpice<V>(name: string): Maybe<V> {
let spice = locker.get(name);
if (spice != null) {
return Some(spice);
}
return None();
}

64. getSpice<V>(name: string): Maybe<V> {
const spice = locker.get(name);
if (spice != null) {
return Some(spice);
}
return None();
}

65. getSpice<V>(name: string): Maybe<V> {
const spice = locker.get(name);
if (spice != null) {
return … ?
}
return None();
}

66. monet.js
Some( … )

67. getSpice<V>(name: string): Maybe<V> {
const spice = locker.get(name);
if (spice != null) {
return Some(spice);
}
return None();
}

68. monet.js
None()

69. getSpice<V>(name: string): Maybe<V> {
const spice = locker.get(name);
if (spice != null) {
return Some(spice);
}
return None();
}

70. monet.js
.fromNull()

71. getSpice<V>(name: string): Maybe<V> {
return Maybe.fromNull(
locker.get(name)
);
}

73. goo.gl/cvGVeo

74. const saladBowl = mixInABowl
.flatMap(mixedVegetables =>
mix(mixedVegetables, spiceMix));

75. e a t i t

76. Monads
Identity
Maybe
Either
Validation
List
NEL
Reader
Free
IO
?

77. Monads
Identity
Maybe
Either
Validation
List
NEL
Reader
Free
IO
Promise

78. T H X

79. Jakub . Strojewski @gmail.com
u l f r y k