Building Functional Islands

Building Functional

Islands

Audience Participation

What is Functional Programming?

Statementsconst nums = [1, 2, 3];const doubled = [];

for (let i = 0; i < nums.length; i++) { doubled.push(nums[i] * 2);}

function double(x) { return x * 2;}

map([1, 2, 3], double);

Expressions

map([1, 2, 3], double);// [(1 * 2), (2 * 2), (3 * 2)]

Expressions

map([1, 2, 3], double);// [(1 * 2), (2 * 2), (3 * 2)]// [2, 4, 6]

Expressions

Why Functional Programming?

Functions Island Building Block #1

First-Class Functionsfunction onClick() { // I'm a first-class function}

document.body.addEventListener('click', onClick);

function onClick() { // I get called by a higher-order function}

document.body.addEventListener('click', onClick);

Higher-Order Functions

Higher-Order Functionsfunction logify(fn) { return (...args) => { console.log(args); return fn(...args); };}

const logifyAdd = logify(add);

function add(x, y) { return x + y;}

Higher-Order Functionsconst logifyAdd = logify(add);

logifyAdd(1, 2);// [1, 2]// 3

Higher-Order Functions The Benefits

Pure Functionsfunction add(x, y) { // I'm a pure function return x + y;}

Pure Functionsadd(1, 2) + add(3, 4);

Pure Functionsadd(1, 2) + add(3, 4);// 3 + add(3, 4);

Pure Functionsadd(1, 2) + add(3, 4);// 3 + add(3, 4);// 3 + 7;

Pure Functionsadd(1, 2) + add(3, 4);// 3 + add(3, 4);// 3 + 7;// 10;

function addAndSomethingElse(x, y) { // I'm an impure function doSomethingElse(); return x + y;}

Pure Functions

Pure FunctionsaddAndSomethingElse(1, 2)// ???

Pure Functions The Benefits

Pure Functions The Reality

Immutability Island Building Block #2

Immutable valuesconst nums = [1, 2, 3];const person = { name: 'mark', age: 29 };

nums[0] = 2;// [2, 2, 3]person.age = 27;// { name: 'mark', age: 27 }

Object.freezeconst nums = Object.freeze([1, 2, 3]);const person = Object.freeze({ name: 'mark', age: 29 });

Object.freezeconst employee = Object.freeze({ department: 'Eng', profile: { name: 'mark', age: 29 }}); employee.profile.age = 27;// {...{ name: 'mark', age: 27 } }

deepFreeze const employee = deepFreeze({ department: 'Eng', profile: { name: 'mark', age: 29 }}); employee.profile.age = 27;// {...{ name: 'mark', age: 29 } }

Immutability The Benefits

Immutability The Reality

Currying Island Building Block #3

Curryingconst add = curry((x, y) => { return x + y;});

const succ = add(1);

succ(1);// 2

Curryingconst devs = [ { firstName: 'mark' }, { firstName: 'sally' }];const firstNames = map(devs, (dev) => { return dev.firstName;});

Curryingconst devs = [ { firstName: 'mark' }, { firstName: 'sally' }];const getFirstNames = map(prop('firstName'));const firstNames = getFirstNames(devs);

Currying The Benefits

Currying The Reality

Composition Island Building Block #4

Compositionconst value = 1;const gRes = g(value);const fgRes = f(gRes);

Compositionfunction fg(x) { return f(g(x));}

fg(1);

Compositionconst fg = compose(f, g);

fg(1);

Compositionfunction getFilmIdsFromResponse(resp) { return getIds(getFilms(JSON.parse(resp)));}

getFilmIdsFromResponse('{ "films": [{ id: 1 },...], "actors": [...] }');

Compositionconst getIds = map(prop('id'));const getFilmIdsFromResponse = compose(getIds, prop('films'), JSON.parse);

getFilmIdsFromResponse('{ "films": [...],"actors": [...] }');

Composition The Benefits

Composition The Reality

I’m confused. What’s a functional

island again?

Further reading / watch list (free)https://drboolean.gitbooks.io/mostly-adequate-guide/content/ Professor Frisby's Mostly Adequate Guide to Functional Programming

http://ramdajs.com/ A practical functional library for Javascript programmers

https://github.com/lodash/lodash/wiki/FP-Guide lodash/fp guide

https://www.youtube.com/watch?v=m3svKOdZijA Hey Underscore, You're Doing It Wrong!

https://github.com/substack/deep-freeze deepFreeze

Further reading / watch list (paid)https://frontendmasters.com/courses/functional-js-lite/ Functional Lite JavaScript

https://frontendmasters.com/courses/functional-javascript/ Hardcore Functional Programming in JavaScript

Thank you. @mark_ jones

Building Functional Islands

Technology

Transcript of Building Functional Islands