Jason Adams
Senior engineer at Impress.org with a love for mentoring and coaching growing devs, coming up with simple solutions to complex problems, and hanging out with my wife!
Let's Do Some Stuff Learnin!
Interactive Git
with
Nathan Knowler
Even More Some Stuff Learnin!
Functional
Programming
1. Pure Functions
A function that returns the same output given the same parameters. Also, no side effects.
let number = 0;
function addUp(a) {
number += a;
return number;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function add(a,b) {
return a + b;
}function setUpHook() {
addFilter('filter', function() {});
}
1b. Pure Functions in React
import React, {useState} from 'react';
function Alert({heading, content}) {
return (
<div className="alert">
<h3>{heading}</h3>
<p>{content}</p>
</div>
);
}
function AlertToggler() {
const [alertVisible, setAlertVisible] = useState(false);
return (
<>
{
alertVisible &&
<Alert heading="Oh no!" content="Do not panic. Just click the button" />
}
<button onClick={() => setAlertVisible(!alertVisible)}>Click Me</button>
</>
);
}2. Functions are First-Class
A function is an entity that can both be called and passed around.
Higher Order Function:
- Receives a function as a parameter
- Returns a function
const addTen = function(a) {
return a + 10;
}
const addTwentyMore = function(f, a) {
return f(a) + 20;
}
const numbersPlusThirty = [1,2,3].map(addTwentyMore);
3. Variables are immutable
A variable, once set, is never changed.
let person = {
firstName: 'Jason',
lastName: 'Adams',
};
function setFirstName(person, newName) {
person.firstName = newName;
return person;
}
let person = {
firstName: 'Jason',
lastName: 'Adams',
};
function setLastName(person, newName) {
return {
...person,
lastName: newName
}
}
4. Functions have Referential Transparancy
A function can be replaced with its output the effect remains exactly the same.
In short: Pure Function + Immutable Data = Referential Transparency
const square = a => a^2;
const describe = `The square of 4 is ${square(4)}`;
const same = 'The square of 4 is 16';
Ask yourself: Can I memoize this function?
5a. Functions follow λ Calculus Principles
A function can be created from an expression given its arguments
const add = function(a, b) { return a + b }
const subtract = (a, b) => a - b;Lambda Functions
5b. Functions follow λ Calculus Principles
A technique wherein a function outputs a chain of functions broken down by its arguments
// const curry = f => a => b => f(a,b);
function curry(f) {
return function(a) {
return function(b) {
return f(a,b);
}
}
}
const sum = (a,b) => a + b;
const curriedSum = curry(sum);
curriedSum(4)(5); // 9
const addTen = a => curriedSum(a)(10);
addTen(5); // 15
Currying 🍛
6a. Recursion
function sumUpTo(value) {
if ( value === 0 ) {
return 0;
}
return value + sumUpTo(value - 1);
}
sumUpTo(5); // 15
A technique wherein a calculation is the result of a self-referencing function
Head Recursion
Wherein the recursion depends on the call stack. Each stack represents that value.
sumUpTo(5)
5 + sumUpTo(4)
5 + (4 + sumUpTo(3))
5 + (4 + (3 + sumUpTo(2)))
5 + (4 + (3 + (2 + sumUpTo(1))))
5 + (4 + (3 + (2 + (1 + sumUpTo(0)))))
5 + (4 + (3 + (2 + (1 + 0))))
> 15
6b. Recursion
function sumUpTo(value, accumulator = 0) {
if ( value === 0 ) {
return accumulator;
}
return sumUpTo(value - 1, accumulator + value)
}
sumUpTo(5); // 15A technique wherein a calculation is the result of a self-referencing function
Tail Recursion
Wherein the recursion depends on the call stack. Each stack represents that value.
sumUpTo(5, 0)
sumUpTo(4, 5)
sumUpTo(3, 9)
sumUpTo(2, 12)
sumUpTo(1, 14)
sumUpTo(0, 15)
Go forth
Functional Programming Masters!
All Hands Dev Party (2020-06-05)
By Jason Adams
