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); // 15

A 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

All Hands Dev Party (2020-06-05)

  • 268