Introduction to functional programming in Javascript.

1. Introduction to Functional
Programming in JavaScript
Boris Burdiliak @ WebUP

2. Boris Burdiliak
@borisburdiliak
github.com/bburdiliak
linkedin.com/in/borisburdiliak/

5. Agenda
● are features of JS suitable for FP
● pure functions
● functional toolbox
● how to improve your code now

6. General Programming Principles
● DRY
● YAGNI
● KISS
● loose coupling
● high cohesion
● the principle of least surprise
● single responsibility

7. Headaches
● mutable state
● unrestricted side effects
● unprincipled design

8. Javascript - important features for FP
HAS
Anonymous functions and concise
lambda syntax
Closures
Higher-order functions
First class functions
DOES NOT HAVE
Purity
Immutability
Recursion

9. Concise lambda syntax
lambda expressions are abstractions which enable a function to be passed around like
data (value)
ES6 fat arrow
(x, y) => x * y

10. Closures
A closure is the combination of a function bundled together (enclosed) with
references to its surrounding state (the lexical environment).

11. Higher order functions
functions as
● function parameters
● return value of a function

12. First Class Functions
constants
assignment to variables
values of keys of an object
array items
function parameters
return value of a function

14. First Class Functions - use their power
layers of indirection with no added value
const fullname = user => `${user.firstName} ${user.lastName}`
const fullnames = users.map(user => fullname(user))
const fullnames = users.map(fullname)

15. First Class Functions
const getUsers = callback => ajaxCall(json => callback(json));

16. First Class Functions
// ignorant
const getUsers = callback => ajaxCall(json => callback(json));
const getUsers = callback => ajaxCall(callback);

17. First Class Functions
// ignorant
const getUsers = callback => ajaxCall(json => callback(json));
const getUsers = callback => ajaxCall(callback);
// enlightened
const getUsers = ajaxCall;

18. First Class Functions - help with
layers of indirection with no added value
> amount of redundant code to maintain and search through
name and reference arguments

19. First Class Functions - Naming
// specific to our current blog
const validArticles = articles =>
articles.filter(article => article !== null && article !== undefined)
// vastly more relevant for future projects
const compact = xs => xs.filter(x => x !== null && x !== undefined)

20. Pure Functions
A pure function is a function where the return value is only determined by its input
values, without observable side effects.

21. Pure Functions - Example
let G = 6.67408
const force = (m1, m2, r) => G * m1 * m2 / (r * r)

22. Pure Functions - Example
let G = 6.67408
const force = (m1, m2, r) => G * m1 * m2 / (r * r)
❌

23. Pure Functions - Example
const trace = (title, text) => console.log(title, text)

24. Pure Functions - Example
const trace = (title, text) => console.log(title, text)
❌

25. Pure Functions - Example
const max = (m1, m2) => m1 > m2 ? m1 : m2

26. Pure Functions - Example
const max = (m1, m2) => m1 > m2 ? m1 : m2
✅

27. Pure Functions - Example
const oneDayLater = () => {
const today = moment();
return moment(today).add(1, 'days');
}

28. Pure Functions - Example
const oneDayLater = () => {
const today = moment();
return moment(today).add(1, 'days');
}
❌

29. Pure Functions - Example
const cached = memoize((a) => a*2)

30. Pure Functions - Example
const cached = memoize((a) => a*2)
❌✅

31. Pure Functions - Example
const signUp = (attrs) => {
const user = saveUser(attrs);
welcomeUser(user);
};

32. Pure Functions - Example
const signUp = (attrs) => {
const user = saveUser(attrs);
welcomeUser(user);
};
❌

33. Pure Functions - Example
const signUp = (Db, Email, attrs) => {
const user = saveUser(Db, attrs);
welcomeUser(Email, user);
};

34. Pure Functions - Example
const signUp = (Db, Email, attrs) => {
const user = saveUser(Db, attrs);
welcomeUser(Email, user);
};
❌

35. Side Effects
changing the file system
inserting a record into a database
making an http call
mutations
printing to the screen / logging
obtaining user input
querying the DOM
accessing system state

37. Pure Functions - Example
const signUp = (Db, Email, attrs) => () => {
const user = saveUser(Db, attrs);
welcomeUser(Email, user);
};
❌✅

38. Benefits of Pure Functions

39. Cacheable
const memoize = (f) => {
const cache = {};
return (...args) => {
const argStr = JSON.stringify(args);
cache[argStr] = cache[argStr] || f(...args);
return cache[argStr];
};
};
const computation = memoize(costlyComputation)

40. Self-documenting
explicit function dependencies
just from its signature, we know what it will use
forced to "inject" dependencies - more flexible - parametrized

41. Portable
pure functions
serialize
send
run anywhere
imperative programming methods
tangled with state
dependencies
effects

42. You wanted a banana but what
you got was a gorilla holding
the banana... and the entire
jungle.
Joe Armstrong, Erlang creator

43. Testable
give input and assert output

44. Offer Referential Transparency
In functional programming, referential transparency is generally defined as the fact
that an expression, in a program, may be replaced by its value (or anything having the
same value) without changing the result of the program.

45. Easy to reason about
no need to search for context
everything depends just on the input arguments

46. Parallelism
no need to access shared memory
no race conditions caused by side effects

47. Our Functional Toolbox

48. filter, map, reduce
const findEven = (numbers) => {
const even = []
numbers.forEach(number => {
if (isEven(number)) {
even.push(number)
}
})
return even;
}
const isEven = (number) => number % 2 === 0
const findEven = numbers => numbers.filter(isEven)

49. Curry

50. Curry
A curried function is a function that takes multiple arguments one at a time.
Call this function with one argument and it returns a function that takes the
remaining arguments
const sum = (x, y) => x + y;
const sum = x => y => x + y;
const increment = sum(1)
const add10 = sum(10)

51. Curry base
const match = curry((what, s) => s.match(what));
const replace = curry((what, replacement, s) => s.replace(what, replacement));
const filter = curry((f, xs) => xs.filter(f));
const map = curry((f, xs) => xs.map(f));
match(/r/g, 'hello world'); // [ 'r' ]
const hasLetterR = match(/r/g); // x => x.match(/r/g)
hasLetterR('hello world'); // [ 'r' ]
hasLetterR('just j and s and t etc'); // null
filter(hasLetterR, ['rock and roll', 'smooth jazz']); // ['rock and roll']
const removeStringsWithoutRs = filter(hasLetterR); // xs => xs.filter(x => x.match(/r/g))
removeStringsWithoutRs(['rock and roll', 'smooth jazz', 'drum circle']); // ['rock and roll', 'drum
circle']
const noVowels = replace(/[aeiou]/ig); // (r,x) => x.replace(/[aeiou]/ig, r)
const censored = noVowels('*'); // x => x.replace(/[aeiou]/ig, '*')
censored('Chocolate Rain'); // 'Ch*c*l*t* R**n'

52. Curry - positioning of arguments
iteratee-first
data-last
preload data / dependencies
const findEven = numbers => filter(isEven, numbers)
// apply currying to get pointfree version
const findEven = filter(isEven)

53. Real-world examples of currying
export default connect(mapStateToProps)(EventsComponent)
const handleChange = (fieldName) => (event) => {
saveField(fieldName, event.target.value)
}
<input type="text" onChange={handleChange('email')} />
React and Redux
Event Handling

54. Compose

55. Functional composition

56. Functional composition
const compose = (f, g) => x => f(g(x));
const toUpperCase = x => x.toUpperCase();
const exclaim = x => `${x}!`;
const shout = compose(exclaim, toUpperCase);
shout('send in the clowns'); // "SEND IN THE CLOWNS!"
const shout = x => exclaim(toUpperCase(x));

57. Associativity of Functional composition
compose(f, compose(g, h)) === compose(compose(f, g), h);
compose(toUpper, compose(head, reverse))
===
compose(compose(toUpper, head), reverse);
const lastUpper = compose(toUpper, head, reverse);
with variadic compose

58. Composition in real world
const withEditMode = compose(
withState('editMode', 'setEditMode', false),
withHandlers({
toggleEditMode: ({ setEditMode }) => () => {
setEditMode((editMode) => !editMode);
},
}),
);
export default compose(
withEditMode,
withModal,
withStyles(styles),
)(EventManagement);

59. Hooks!
const EditButton = () => {
const [editMode, setEditMode] = useState(0);
return (
<div>
<p>Edit mode is {String(editMode)}</p>
<button onClick={() => setEditMode(R.not)}>
Click me
</button>
</div>
);
}

60. Start today!
coding pure functions
cooking good curry
composing functions
embracing pointfree programming
using hooks
using ramda

61. References
https://mostly-adequate.gitbooks.io/mostly-adequate-guide
https://medium.com/javascript-scene/why-learn-functional-programming-in-javascript-composing-software-ea13afc7a257
https://blog.benestudio.co/currying-in-javascript-es6-540d2ad09400
https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript
https://alvinalexander.com/scala/fp-book/benefits-of-pure-functions
https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976
https://en.wikipedia.org/wiki/Lambda_calculus
https://medium.freecodecamp.org/discover-functional-programming-in-javascript-with-this-thorough-introduction-a2ad9af2d645

62. Thanks!Thank you for having me!