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