learn you a functional javascript for great good

94
Learn You a Functional JavaScript for Great Good! Mike Harris

Upload: mike-harris

Post on 06-May-2015

902 views

Category:

Software


0 download

DESCRIPTION

We have been told by just about everyone that we should learning functional programming, let this session be your introduction using a language you already know JavaScript. Yep, JavaScript. No endless amounts of parentheses. No monadic arrows. Just good old JavaScript. We'll look take a look at the functional JavaScript landscape see how to use: Currying Combinators Multimethods We'll be using Underscore.js, allong.es, and bilby.js to help us.

TRANSCRIPT

Page 1: Learn You a Functional JavaScript for Great Good

Learn You a Functional JavaScript for Great Good!Mike Harris

Page 2: Learn You a Functional JavaScript for Great Good
Page 3: Learn You a Functional JavaScript for Great Good

Functions!

Closures!

Currying!

Combinators!

Multimethods

Page 4: Learn You a Functional JavaScript for Great Good

Frameworks

Page 5: Learn You a Functional JavaScript for Great Good

> require("underscore");!{ [Function]! _: [Circular],! VERSION: '1.6.0',! …! map: [Function],! …! filter: [Function],! reject: [Function],!…! compose: [Function],! after: [Function],!…!}

Page 6: Learn You a Functional JavaScript for Great Good

> require("allong.es");!{ es: ! {!…! flip: [Function: unary],!…! curry: [Function: unary],! map: [Function: binary],! mapWith: [Function: binary],! mapArgumentsWith: [Function: binary],! filter: [Function: binary],! filterWith: [Function: binary],!…! allong: [Circular] }

Page 7: Learn You a Functional JavaScript for Great Good

> require("bilby");!{!…! curry: [Function: curry],! flip: [Function: flip],! identity: [Function: identity],! constant: [Function: constant],! compose: [Function: compose],!…! lens: [Function: lens],! isLens: [Function],! objectLens: [Function: objectLens],!…!}

Page 8: Learn You a Functional JavaScript for Great Good

Functions

Page 9: Learn You a Functional JavaScript for Great Good

nothing

function nothing(){};!!

nothing();!undefined

Page 10: Learn You a Functional JavaScript for Great Good

five

function five(){return 5;};!!

five();!5

Page 11: Learn You a Functional JavaScript for Great Good

makeFive

function makeFive(){! return function(){return 5;}!};!!makeFive();![Function]!var five = makeFive();!five();!5

Page 12: Learn You a Functional JavaScript for Great Good

fAdd

function five(){return 5;};!!

function fAdd(f, g){! return f() + g();!};!!

fAdd(five, five);!10

Page 13: Learn You a Functional JavaScript for Great Good

Closures

Page 14: Learn You a Functional JavaScript for Great Good

Closure

Function Environment

Page 15: Learn You a Functional JavaScript for Great Good

HelloMaker

hello greet

Page 16: Learn You a Functional JavaScript for Great Good

function helloMaker(){! var greet = "Hello";! return function(){return greet;};!};!!

var hello = helloMaker();! hello();!!

'Hello'

Page 17: Learn You a Functional JavaScript for Great Good

function helloMaker(){! var greet = "Hello";! return function(){return greet;};!};!!

var hello = helloMaker();! hello();!!

'Hello'

environmentfunction

Page 18: Learn You a Functional JavaScript for Great Good

Counter

get count

Page 19: Learn You a Functional JavaScript for Great Good

function counter(){! var count = 0;! return function(){return ++count;};!};!!

var ids = counter();!!

ids();!1!!

ids();!2

Page 20: Learn You a Functional JavaScript for Great Good

function counter(){! var count = 0;! return function(){return ++count;};!};!!

var ids = counter();!!

ids();!1!!

ids();!2

environmentfunction

Page 21: Learn You a Functional JavaScript for Great Good

Currying

Page 22: Learn You a Functional JavaScript for Great Good

f(a, b, c, d)g(b, c, d)

h(c, d)j(d)

Page 23: Learn You a Functional JavaScript for Great Good

f(a, b, c, d)

Curry

g(b, c, d)

Curry

h(c, d)C

urry

j(d)

Page 24: Learn You a Functional JavaScript for Great Good

ownAdd

f(a, b, c)

Curry

g(b, c)C

urry

h(c)

Page 25: Learn You a Functional JavaScript for Great Good

var ownAdd = function(a){! return function(b){! return function(c){! return a + b + c;! }! }!};!!

ownAdd(1)(2)(3);!6

Page 26: Learn You a Functional JavaScript for Great Good

var ownAdd = function(a){! return function(b){! return function(c){! return a + b + c;! }! }!};!!

ownAdd(1)(2)(3);!6

ownAdd

Page 27: Learn You a Functional JavaScript for Great Good

add1

g(b, c)

Curry

h(c)

Page 28: Learn You a Functional JavaScript for Great Good

var ownAdd = function(a){! return function(b){! return function(c){! return a + b + c;! }! }!};!!

var add1 = ownAdd(1);!add1(2)(3);!6

Page 29: Learn You a Functional JavaScript for Great Good

var ownAdd = function(a){! return function(b){! return function(c){! return a + b + c;! }! }!};!!

var add1 = ownAdd(1);!add1(2)(3);!6

add1a = 1

Page 30: Learn You a Functional JavaScript for Great Good

add3

h(c)

Page 31: Learn You a Functional JavaScript for Great Good

var ownAdd = function(a){! return function(b){! return function(c){! return a + b + c;! }! }!};!!

var add3 = ownAdd(1)(2);!add3(3);!6

Page 32: Learn You a Functional JavaScript for Great Good

var ownAdd = function(a){! return function(b){! return function(c){! return a + b + c;! }! }!};!!

var add3 = ownAdd(1)(2);!add3(3);!6

add3

a = 1b = 2

Page 33: Learn You a Functional JavaScript for Great Good

CombinatorsMoses Schönfinkel

andHaskell Curry

Page 34: Learn You a Functional JavaScript for Great Good

BluebirdB f g x = f (g x)

Page 35: Learn You a Functional JavaScript for Great Good

ComposeB f g x = f (g x)

Page 36: Learn You a Functional JavaScript for Great Good

Compose

Function Function Function

Page 37: Learn You a Functional JavaScript for Great Good

Compose

Function Function Function

Page 38: Learn You a Functional JavaScript for Great Good

Square and Add 1

x + 1 x * x

Page 39: Learn You a Functional JavaScript for Great Good

var compose = require(“underscore").compose;!!

var sqAnd1 = compose(! function(x){return x+1;},! function(x){return x*x;}!);!!

sqAnd1(2);!5

Page 40: Learn You a Functional JavaScript for Great Good

Guid

sha1 str counter

Page 41: Learn You a Functional JavaScript for Great Good

var compose = require("underscore").compose,! sha1 = require("node-sha1"),!!function counter(){! var count = 0;! return function(){return ++count;};!};!!function str(s){! return s ? s.toString() : "";!};!!var guid = compose(sha1, str, counter());!!guid();!'356a192b7913b04c54574d18c28d46e6395428ab'!guid();!'da4b9237bacccdf19c0760cab7aec4a8359010b0'

Page 42: Learn You a Functional JavaScript for Great Good

var! _ = require("underscore"),! compose = _.compose;

Page 43: Learn You a Functional JavaScript for Great Good

_.compose = function() {! var funcs = arguments;! return function() {! var args = arguments;! for (var i = funcs.length - 1; i >= 0; i--) {! args = [funcs[i].apply(this, args)];! }! return args[0];! };! };

Page 44: Learn You a Functional JavaScript for Great Good

Compose

Function Function Function

Page 45: Learn You a Functional JavaScript for Great Good

_.compose = function() {! var funcs = arguments;! return function() {! var args = arguments;! for (var i = funcs.length - 1; i >= 0; i--) {! args = [funcs[i].apply(this, args)];! }! return args[0];! };! };

Page 46: Learn You a Functional JavaScript for Great Good

CardinalC f x y = f y x

Page 47: Learn You a Functional JavaScript for Great Good

Flip / WithC f x y = f y x

Page 48: Learn You a Functional JavaScript for Great Good

FlipC f x y = f y x

Page 49: Learn You a Functional JavaScript for Great Good

flip

b a

Page 50: Learn You a Functional JavaScript for Great Good

var flip = require("bilby").flip;!!

function cat(s, t){return s + t;};!!

cat("Hello ", "Mike ");!'Hello Mike '!!

flip(cat)("Hello ")("Mike ");!'Mike Hello '

Page 51: Learn You a Functional JavaScript for Great Good

var flip = require("bilby").flip;!!

function cat(s, t){return s + t;};!!

var post = flip(cat);!!

var messageToMike = post("Mike ");!!

messageToMike("Hello ");!'Hello Mike '!!

messageToMike("Bye ");!'Bye Mike '

Page 52: Learn You a Functional JavaScript for Great Good

var! bilby = require("bilby"),! flip = bilby.flip;

Page 53: Learn You a Functional JavaScript for Great Good

function flip(f) {! return function(a) {! return function(b) {! return f(b, a);! };! };!}

Page 54: Learn You a Functional JavaScript for Great Good

flip

b a

Page 55: Learn You a Functional JavaScript for Great Good

function flip(f) {! return function(a) {! return function(b) {! return f(b, a);! };! };!}

Page 56: Learn You a Functional JavaScript for Great Good

WithC f x y = f y x

Page 57: Learn You a Functional JavaScript for Great Good

Filter_.filter = _.select = function(obj, predicate, context) { var results = []; if (obj == null) return results; if (nativeFilter && obj.filter === nativeFilter) return obj.filter(predicate, context); each(obj, function(value, index, list) { if (predicate.call(context, value, index, list)) results.push(value); }); return results; };

Page 58: Learn You a Functional JavaScript for Great Good

filter

array function

Page 59: Learn You a Functional JavaScript for Great Good

filter

1, 2, 3 isEven

Page 60: Learn You a Functional JavaScript for Great Good

var filter = require("underscore").filter;!!

function isEven(x){return x%2 === 0;};!isEven(2);!true!!

filter([1, 2, 3], isEven);![ 2 ]!!

[1, 2, 3].filter(isEven);![ 2 ]

Page 61: Learn You a Functional JavaScript for Great Good

var! _ = require("underscore"),! filter = _.filter;

Page 62: Learn You a Functional JavaScript for Great Good

_.filter = _.select = function(obj, predicate, context) {! var results = [];! if (obj == null) return results;! if (nativeFilter && obj.filter === nativeFilter) ! return obj.filter(predicate, context);! each(obj, function(value, index, list) {! if (predicate.call(context, value, index, list))! results.push(value);! });! return results;! };

Page 63: Learn You a Functional JavaScript for Great Good

filter

array function

Page 64: Learn You a Functional JavaScript for Great Good

_.filter = _.select = function(obj, predicate, context) {! var results = [];! if (obj == null) return results;! if (nativeFilter && obj.filter === nativeFilter) ! return obj.filter(predicate, context);! each(obj, function(value, index, list) {! if (predicate.call(context, value, index, list))! results.push(value);! });! return results;! };

Page 65: Learn You a Functional JavaScript for Great Good

FilterWithvar filter = binary( function filter (list, fn) { fn = functionalize(fn); return __filter.call(list, fn); }); var filterWith = flip(filter);

Page 66: Learn You a Functional JavaScript for Great Good

filterWith

arrayfunction

Page 67: Learn You a Functional JavaScript for Great Good

filterWith

1, 2, 3isEven

Page 68: Learn You a Functional JavaScript for Great Good

var filterWith = require("allong.es").allong.es.filterWith;!!function isEven(x){return x%2 === 0;};!var evenOnly = filterWith(isEven);!!evenOnly([1, 2, 3]);![ 2 ]!!evenOnly([42, 113]);![ 42 ]!!evenOnly([2, 1232, 131, 2, 13]);![ 2, 1232, 2 ]

Page 69: Learn You a Functional JavaScript for Great Good

var! allonges = require("allong.es").allong.es,! filterWith = allonges.filterWith

Page 70: Learn You a Functional JavaScript for Great Good

var filter = binary( function filter (list, fn) {! fn = functionalize(fn);! ! return __filter.call(list, fn);!});! ! var filterWith = flip(filter);

Page 71: Learn You a Functional JavaScript for Great Good

filterWith

arrayfunction

Page 72: Learn You a Functional JavaScript for Great Good

var filter = binary( function filter (list, fn) {! fn = functionalize(fn);! ! return __filter.call(list, fn);!});! ! var filterWith = flip(filter);

Page 73: Learn You a Functional JavaScript for Great Good

Multimethods

Page 74: Learn You a Functional JavaScript for Great Good

Environment

Method

Predicate FunctionName

Page 75: Learn You a Functional JavaScript for Great Good

Environment

Method

Predicate FunctionName

(name, predicate)

name

predicate func

tion

Page 76: Learn You a Functional JavaScript for Great Good

var! bilby = require("bilby"),! environment = bilby.environment;

Page 77: Learn You a Functional JavaScript for Great Good

animals

voice

isA sayspeak

Page 78: Learn You a Functional JavaScript for Great Good

var environment = require("bilby").environment;!var animals = environment();!!function voice(type, sound){! return ["The", type, "says", sound].join(" ");!};!!function isA(thing){! return function(obj){! return obj.type == thing;! };!};!!function say(sound){! return function(obj){! console.log(voice(obj.type, sound));! };!};

Page 79: Learn You a Functional JavaScript for Great Good

animals

voice

isA sayspeak

Page 80: Learn You a Functional JavaScript for Great Good

var environment = require("bilby").environment;!var animals = environment();!!function voice(type, sound){! return ["The", type, "says", sound].join(" ");!};!!function isA(thing){! return function(obj){! return obj.type == thing;! };!};!!function say(sound){! return function(obj){! console.log(voice(obj.type, sound));! };!};

method

environment

predicate

function

Page 81: Learn You a Functional JavaScript for Great Good

Animals

voice

cat meowspeak

(speak, cat)

speak

cat

meo

w

Page 82: Learn You a Functional JavaScript for Great Good

var animals = animals.method(! “speak",! isA(“cat"),! say("meow"));!var animals = animals.method(! “speak",! isA(“dog"),! say("woof"));!!

animals.speak({type: "dog"});!The dog says woof!!

animals.speak({type: "cat"});!The cat says meow

Page 83: Learn You a Functional JavaScript for Great Good

Animals

voice

cat meowspeak

(speak, cat)

speak

cat

meo

w

Page 84: Learn You a Functional JavaScript for Great Good

var animals = animals.method(! “speak",! isA(“cat"),! say("meow"));!var animals = animals.method(! “speak",! isA(“dog"),! say("woof"));!!

animals.speak({type: "dog"});!The dog says woof!!

animals.speak({type: "cat"});!The cat says meow

namepredicate

function

environment

Page 85: Learn You a Functional JavaScript for Great Good

“What does the fox say?”

Page 86: Learn You a Functional JavaScript for Great Good

var animals = animals.method(! "speak",! isA("fox"),! say(“Wa-pa-pa-pa-pa-pa-pow!")!);!!

animals.speak({type:"fox"});!The fox says Wa-pa-pa-pa-pa-pa-pow!

Page 87: Learn You a Functional JavaScript for Great Good

Dante, The Divine Comedy Canto 24

A longer ladder yet remains to scale.

Page 88: Learn You a Functional JavaScript for Great Good

Functional JavaScriptMichael Fogus

Page 89: Learn You a Functional JavaScript for Great Good

JavaScript AllongeReginald Braithwaite

Page 90: Learn You a Functional JavaScript for Great Good

Learn You a Haskell for Great Good!

Miran Lipovača

Page 91: Learn You a Functional JavaScript for Great Good

The Joy of ClojureMichael Fogus$Chris Houser

Page 92: Learn You a Functional JavaScript for Great Good

Nietzsche, Human, All Too Human Aphorism 633

Now we will no longer concede so easily that anyone has the truth.

Page 93: Learn You a Functional JavaScript for Great Good

Thank you.

Page 94: Learn You a Functional JavaScript for Great Good

Mike Harris@MikeMKH!http://comp-phil.blogspot.com/