How to apply some functional programming ideas in regular JavaScript. 1. Immutability 2. Simple functions 3. Not that simple functions 4. Combining OOP and FP 5. Functors 6. Monads

1. FUNCTIONAL PROGRAMMING
TECHNIQUES
IN
REGULAR JAVASCRIPT

2. ABOUT ME
Pavel Klimenkov
Senior Software Developer @ Geotab Inc.
Oakville, ON, Canada

3. WHAT THIS TALK IS ABOUT
• Pick few ideas from functional programming
• Simplify as much as possible
• Apply in JavaScript
• PROFIT!

4. WHAT THIS TALK IS ABOUT
• Pick few ideas from functional programming
• Simplify as much as possible
• Apply in JavaScript
• PROFIT!

5. WHAT THIS TALK IS ABOUT
• Pick few ideas from functional programming
• Simplify as much as possible
• Apply in JavaScript
• PROFIT!

6. WHAT THIS TALK IS ABOUT
• Pick few ideas from functional programming
• Simplify as much as possible
• Apply in JavaScript
• PROFIT!

7. WHAT THIS TALK ISN’T ABOUT
• OOP must die, FP will save the world
• Detailed FP manual
• “A monad is just a monoid in the category of endofunctors”

8. WHAT THIS TALK ISN’T ABOUT
• OOP must die, FP will save the world
• Detailed FP manual
• “A monad is just a monoid in the category of endofunctors”

9. WHAT THIS TALK ISN’T ABOUT
• OOP must die, FP will save the world
• Detailed FP manual
• “A monad is just a monoid in the category of endofunctors”

10. AGENDA
•Immutability
•Simple functions
•Not that simple functions
•Combining OOP and FP
•Functors
•Monads

11. WHAT IS FP?
It’s a declarative programming style where all functions have
no side effects and data is readonly.
BTW, SQL is also declarative

12. 1. IMMUTABILITY
Objects don’t change their state
Values are constants

13. IMMUTABILITY
• Use only read-only data
• If something needs to be changed - create new instance
instead

14. EXAMPLE
Convert GPS coordinates to screen points

15. EXAMPLE: SOURCE DATA

16. EXAMPLE: CONVERSION

17. EXAMPLE: MUTABLE DATA

18. EXAMPLE: IMMUTABLE DATA

19. EXAMPLE
Edit Entity

20. EXAMPLE: ENTITY CONSTRUCTOR

21. EXAMPLE: MUTABLE DATA

22. EXAMPLE: IMMUTABLE DATA

23. HOW TO REDUCE TEMPTATION
• Use const or let instead of var
• filter/map/reduce instead of for
• Object.freeze - to prevent object mutation

24. IMMUTABILITY: PROS
• Simpler code
• Less bugs
• Atomic object construction (object is either fully initialised, or doesn’t exist)
• Less temporal coupling (when order of initialisation matters)
• Simpler caching
• Thread safety*

25. IMMUTABILITY: CONS
• Higher CPU impact (more things to do)
• Higher memory impact (and more GC)
• Higher brain impact (OOP often comes with state)

26. 2. SIMPLE FUNCTIONS
First class functions
Pure functions

27. FIRST CLASS FUNCTIONS
Can be passed as arguments
Can be assigned as values

28. PURE FUNCTIONS
• No side-effects
• Depend on arguments only (deterministic)

29. EXAMPLE: SIDE-EFFECTS

30. EXAMPLE: NONDETERMINISTIC
FUNCTION

31. EXAMPLE: DETERMINISTIC
FUNCTION

32. SIMPLE FUNCTIONS: PROS
• No side-effects
• Less bugs
• Simpler testing
• Simpler code
• Absolute thread safety

33. SIMPLE FUNCTIONS: CONS
• No side-effects
• Our job is to create side-effects
• IO and Cache are side-effects

34. 3. NOT THAT SIMPLE
FUNCTIONS
Functions composition
Functions currying

35. FUNCTIONS COMPOSITION
Composition - gluing functions together

36. EXAMPLE: COMPOSITION

37. EXAMPLE: COMPOSITION

38. EXAMPLE: COMPOSITION
Two temporary arrays. Oh, the horror!

39. EXAMPLE: COMPOSITION
One temporary array. Harmony restored.

40. EXAMPLE: MORE COMPOSITION

41. EXAMPLE: MORE COMPOSITION

42. FUNCTIONS CURRYING
Currying - partial application of a function.

43. EXAMPLE: CURRYING

44. EXAMPLE: CURRYING

45. EXAMPLE: CURRYING

46. EXAMPLE: CURRYING

47. EXAMPLE: CURRYING

48. EXAMPLE: CURRYING

49. NOT THAT SIMPLE FUNCTIONS: PROS
• Flexibility in using and reusing functions
• Functions tend to be smaller
• Memoization (“Simple functions” PROS list was already too
long)

50. NOT THAT SIMPLE FUNCTIONS: CONS
• Sometimes code looks cryptic
• Might introduce negative performance impact

51. COMBINING OOP AND FP
Shell - OOP, IO, side-effects
Core - FP, logic, pure functions
Core
Shell

52. MAIN PRINCIPLES
• Imperative shell
• Deals with IO
• Thin layer

53. MAIN PRINCIPLES
• Functional core
• deals with immutable data and pure functions
• contains application logic

54. EXAMPLE: MOVING VEHICLES

55. EXAMPLE: MOVING VEHICLES
IO, shell

56. EXAMPLE: MOVING VEHICLES
Logic,
pure functions,
core

57. SHELL/CORE: PROS
• Main bugs will come from the shell, which is small
• Core is easy to test. Unit tests should be enough
• Shell is the one that needs integration tests (shell is small!)
• Command query responsibility segregation out of the box

58. SHELL/CORE: CONS
• Anything?

59. FUNCTORS
Smart containers for values

60. EXAMPLE: INCREMENTING A PICTURE

61. EXAMPLE: INCREMENTING A PICTURE

62. EXAMPLE: INCREMENTING A PICTURE

63. EXAMPLE: INCREMENTING A PICTURE

64. EXAMPLE: INCREMENTING A PICTURE
??? 3.png ???

65. FUNCTOR
• Is a container around some data,
• that knows how to apply functions to that data,
• keeping result in the container

66. FUNCTOR
• Container - array, async, nullable - anything
• Some data - numbers, objects, other functors - anything
• Functions are applied through map()

67. ARRAY IS A FUNCTOR!

68. PROMISE IS ALMOST A FUNCTOR!

69. BACK TO EXAMPLE
.png

70. USEFUL FUNCTORS
• Maybe
• Either
• IO
• Writer
• State

71. MAYBE - ALMOST LIKE NULLABLE

72. MAYBE - ALMOST LIKE NULLABLE*

73. MAYBE - ALMOST LIKE NULLABLE

74. MAYBE EXAMPLE

75. MAYBE EXAMPLE

76. EITHER = LEFT ♥ RIGHT

77. EITHER = LEFT ♥ RIGHT

78. EITHER = LEFT ♥ RIGHT

79. EITHER = LEFT ♥ RIGHT

80. EITHER = LEFT ♥ RIGHT

81. EITHER = LEFT ♥ RIGHT

82. EITHER ♥ RAILWAY ORIENTED
PROGRAMMING
Right
Left
f(x) g(x) h(x)
Picture and concept are shamelessly borrowed from here

83. TO BE HONEST…
Traditional Maybe = Just ♥ Nothing

84. OTHER FUNCTORS
• IO - for… IO
• Writer - for logs
• State - for… state

85. FUNCTORS: PROS
• Convenient control over computation
• Logic and context separation

86. FUNCTORS: CONS
• Steep learning curve
• Temptation to use functors for everything

87. SKIPPED CHAPTERS
• Applicatives
• Monoids

88. MONADS

89. MONADS ARE CURSED: EITHER YOU DON’T
GET THEM, OR YOU CANT EXPLAIN THEM

90. EXAMPLE: NESTED ARRAYS

91. EXAMPLE: NESTED MAYBE

92. EXAMPLE: NESTED MAYBE

93. MAYBE WILL BECOME A MONAD IF

94. MAYBE WILL BECOME A MONAD IF

95. MAYBE WILL BECOME A MONAD IF

96. NOW YOU KNOW KUNG FU MONADS
Whoa!

97. ARRAY WILL BECOME A MONAD IF
ECMAScript gets flatten or flatMap for arrays (soon)

98. BTW, PROMISE IS ALMOST A MONAD

100. SUMMARY
• Immutability - everything is read-only, less bugs
• Pure functions - no side-effects, less bugs
• Composition, currying - reusing functions
• Functors - separating context and logic
• Monads - smart functors

101. THANK YOU!
DotsAndBrackets.com
/pasha.klimenkov
/in/pavelklimenkov
slideshare.com/pashaklimenkov
Questions?