Higher-order Functions

and Composition

Eindhoven Front-end Meetup

Nov. 20, 2018.

Gaya Kessler

Freelance Developer

JavaScript, Node.js, React

Workshops and training

Pt. 1:

Higher-order Functions

What is a higher-order function?

"A function accepting another function as an one of its arguments to produce a result."

- Gaya Kessler

Used in functional programming

Use Case:

A function creating a function

function createPow(exponent) {
	return function(base) {
		return Math.pow(base, exponent);
	}
}

const triplePow = createPow(3);

triplePow(2); // 8
triplePow(3); // 17

Why is this useful?

Composition

Code is very reusable

const doublePow = createPow(2);
const triplePow = createPow(3);
const quadruplePow = createPow(4);
					

Code becomes very testable

Makes you smarter

How do they work?

Functions are values

Functions have access to their outside scope

function createPow(exponent) {
	return function(base) {
		return Math.pow(base, exponent);
	}
}

But... the returned value doesn't have to!

function createSecret(secret) {
	return function tellSecret() {
		return `My secret is: ${secret}`;
	}
}

const getMySecret = createSecret('You lost the game');

// somewhere else in the code

tellMySecret(); // My secret is: You lost the game

Often used with closures

const people = [
	{ id: 1, name: 'Tom' },
	{ id: 2, name: 'Harry' },
];

for (var i = 0; i < people.length; i++) {
	const button = document.createElement('button');
	button.value = people[i].name;
	button.onClick = function() {
		window.location = `/person/${people[i].id}`;
	}

	document.body.appendChild(button);
}

function navTo(id) {
	return function() {
		window.location = `/person/${id}`;
	}
}

// same as

const navTo = id => () => window.location = `/person/${id}`;

const navTo = id => () => window.location = `/person/${id}`;

const people = [
	{ id: 1, name: 'Tom' },
	{ id: 2, name: 'Harry' },
];

for (var i = 0; i < people.length; i++) {
	const button = document.createElement('button');
	button.value = people[i].name;
	button.onClick = navTo(people[i].id);

	document.body.appendChild(button);
}

Pt. 2

Composition

Monads

When you finally understand Monads,

you'll lose the ability to explain it to others.

Let's go back a bit

function createPow(exponent) {
	return function(base) {
		return Math.pow(base, exponent);
	}
}

const triple = createPow(3);

function sum(a, b) {
	return a + b;
}

sum(3, 4); // 7

triple(sum(3, 4)); // (3 + 4) ^ 3 = 343

const sumAndTriple = compose(createPow(3), sum);

addAndTriple(3, 4); // 343

Execute functions from right to left, passing along the result

function compose(...funcs) {
	return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

compose(f, g, h)(1);

// same as

f(g(h(1));

compose(
	createPow(3),
	sum,
)(3, 4) // 343

// same as

createPow(3)(sum(3, 4));

compose(
	whenYou,
	haveALotOf,
	differentFunctions,
	youNeedTo,
	composeTogether,
)(input);

Hope this makes sense

You don't need to be a mathematician

My advise: start using function creators.

Thanks!

Questions?

Gaya Kessler

Freelance Developer

https://theclevernode.com

@GayaKessler on Twitter