Pure Functions: An Introduction to Functional Programming in JavaScript

Pure functions are the foundation of functional programming. Using pure functions can make application development in JavaScript easier. But what is a pure function? In this session, you'll learn what pure functions are and how you can use them to simplify your development process. In addition, we'll look at using pure functions to build applications in JavaScript with React and Redux.

Transcript

1. PURE FUNCTIONS An Introduction to Functional Programming in JavaScript Jonathan Kemp @jonkemp
3. SCRIPPS NETWORKS www.scrippsnetworksinteractive.com/careers
7. function newTab(path) { var validPath = path.trim(); chrome.tabs.create({url: urlPrefix + validPath}); }
8. function newTab(path) { var validPath = path.trim(); chrome.tabs.create({url: urlPrefix + validPath}); }
9. function newTab(path) { var validPath = path.trim(); chrome.tabs.create({url: urlPrefix + validPath}); }
10. function newTab(path) { var validPath = path.trim(); chrome.tabs.create({url: urlPrefix + validPath}); }
11. PURE FUNCTIONS • Many beneficial properties • Foundation of functional programming • Small, reusable, predictable • Building blocks
12. REFERENTIAL TRANSPARENCY Given the same input, the output is always the same.
13. f(x) = x * 2
14. f(x) = x * 2 f(2) = 2 * 2 = 4 f(3) = 3 * 2 = 6 f(4) = 4 * 2 = 8
15. function double(x) { return x * 2; } console.log( double(2) ); // 4 console.log( double(3) ); // 6 console.log( double(4) ); // 8
16. SIDE EFFECTS A side effect is a change that is not local to the function that caused it.
18. function double(x) { return x * 2; } console.log( double(2) ); // 4 console.log( double(3) ); // 6 console.log( double(4) ); // 8
20. ARRAY METHODS • Destructive array methods vs. Non-destructive array methods • Destructive methods should be avoided where possible • Concat should be used instead of push. • Other non-destructive array methods: map, filter, and reduce.
21. const array = [1, 2, 3]; const newArray = array.push(4); console.log(array); // [1, 2, 3, 4]
22. const array = [1, 2, 3]; const newArray = array.concat([4]); console.log(array); // [1, 2, 3] console.log(newArray); // [1, 2, 3, 4]
23. OBJECT.ASSIGN • Copies the properties of source objects into a target object and then returns it. • Use Object.assign to avoid directly editing objects.
24. OBJECT.FREEZE • The object is made effectively immutable. • Prevents new properties from being added to it. • Prevents existing properties from being removed. • Prevents existing properties, or their enumerability, configurability, or writability, from being changed.
25. IMMUTABLE.JS
27. PURE FUNCTIONS • No shared state • No side effects • Much less likely to cause bugs
28. HOW TO MAKE FUNCTIONS PURE:
29. 1. AVOID GLOBALS
30. 2. DON’T MUTATE ARGUMENTS
31. 3. AVOID SIDE EFFECTS
32. function newTab(path) { var validPath = path.trim(); chrome.tabs.create({url: urlPrefix + validPath}); }
33. function getPath(path) { var urlPrefix = 'https://atlassian.net/browse/', validPath = path.trim(); return urlPrefix + validPath; } function newTab(path) { chrome.tabs.create({url: getPath(path)}); }
34. function getPath(path) { var urlPrefix = 'https://atlassian.net/browse/', validPath = path.trim(); return urlPrefix + validPath; } function newTab(path) { chrome.tabs.create({url: getPath(path)}); }
35. function getPath(path) { var urlPrefix = 'https://atlassian.net/browse/', validPath = path.trim(); return urlPrefix + validPath; } function newTab(path) { chrome.tabs.create({url: getPath(path)}); }
36. BENEFITS OF PURE FUNCTIONS • Easier to unit test • Easier to debug • Easier to understand • Self-documenting • Reusable
40. function getIDsFromPrompt() { var ids, input = window.prompt('Enter the number:'); if (/,/.test(input)) { ids = input.split(','); } else { ids = [ input ]; } return ids; }
41. function getIDsFromPrompt() { var ids, input = window.prompt('Enter the number:'); if (/,/.test(input)) { ids = input.split(','); } else { ids = [ input ]; } return ids; }
42. function getPath(id) { var urlPrefix = 'https://atlassian.net/browse/', validId = id.trim(); return urlPrefix + validId; } function newTab(url) { chrome.tabs.create({url: url}); } function openJIRAinNewTabs() { var jiraIds = getIDsFromPrompt(), jiraURLs = jiraIds.map(getPath); jiraURLs.forEach(newTab); }
43. function getPath(id) { var urlPrefix = 'https://atlassian.net/browse/', validId = id.trim(); return urlPrefix + validId; } function newTab(url) { chrome.tabs.create({url: url}); } function openJIRAinNewTabs() { var jiraIds = getIDsFromPrompt(), jiraURLs = jiraIds.map(getPath); jiraURLs.forEach(newTab); }
44. REACT
46. const EntryList = (props) => { return <ul>{props.items.map((itemText, i) => { return <li key={i + itemText}>{itemText}</li>; })}</ul>; };
47. const EntryList = (props) => { return <ul>{props.items.map((itemText, i) => { return <li key={i + itemText}>{itemText}</li>; })}</ul>; };
48. var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } });
49. var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } });
51. const EntryList = (props) => { return <ul>{props.items.map((itemText, i) => { return <li key={i + itemText}>{itemText}</li>; })}</ul>; };
52. const EntryList = (props) => { return <ul>{props.items.map((itemText, i) => { return <li key={i + itemText}>{itemText}</li>; })}</ul>; };
53. const EntryList = (props) => { return <ul>{props.items.map((itemText, i) => { return <li key={i + itemText}>{itemText}</li>; })}</ul>; };
54. STATELESS COMPONENTS • Must not retain internal state • Do not have backing instances • Do not have the component lifecycle methods
55. STATELESS COMPONENTS This is the recommended pattern for React components.
56. REDUX
57. REDUX 1. State of your app is stored in an object tree inside a single store. 2. Only way to change the state tree is to emit an action. 3. Specify how the actions transform the state tree with pure reducers.
61. import { createStore } from 'redux' function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } let store = createStore(counter) store.subscribe(() => console.log(store.getState()) )
62. import { createStore } from 'redux' function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } let store = createStore(counter) store.subscribe(() => console.log(store.getState()) )
63. import { createStore } from 'redux' function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } let store = createStore(counter) store.subscribe(() => console.log(store.getState()) )
64. import { createStore } from 'redux' function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } let store = createStore(counter) store.subscribe(() => console.log(store.getState()) )
65. store.dispatch({ type: 'INCREMENT' }) // 1 store.dispatch({ type: 'INCREMENT' }) // 2 store.dispatch({ type: 'DECREMENT' }) // 1
67. REDUX • Reducers are pure. They don’t mutate state. They produce no side effects. Given the same input, they return the same output. • This makes it easer to reason about how state is changed. It’s easier to understand how the application works. • Benefits are largely the same as using pure functions.
70. RESOURCES • Master the JavaScript Interview: What is a Pure Function? - Eric Elliott
 https://medium.com/javascript-scene/master-the- javascript-interview-what-is-a-pure-function- d1c076bec976#.765uz0xdn • Pure Functions (Video) - Eric Elliot
 https://vimeo.com/160326750
71. THANK YOU! @jonkemp https://github.com/jonkemp