First Steps into Functional Programming

First Steps into
Functional Programming
https://github.com/vakila/functional-workshop
@AnjanaVakil

View Slide

Who am I?
@AnjanaVakil

View Slide

The Recurse Center
https://www.recurse.com/

View Slide

Who are you?
Let's share:
- Name
- Home base
- Programming background/technologies
- Interest/experience in FP

View Slide

What is functional programming?

View Slide

a buzz-wordy trend

View Slide

pure functor
side effect
monad
monoid
compose
curry
λ
immutable
stateless
lazy
referential transparency
higher-order

View Slide

pure functor
side effect
monad
monoid
compose
curry
λ
immutable
stateless
lazy
referential transparency
higher-order
???

View Slide

a coding style
supported by some languages

View Slide

Clojure
Haskell
JavaScript!
Erlang
Elm
Scala
F#
OCaml

View Slide

a programming paradigm
(worldview, mindset)

View Slide

Imperative
follow my commands
do this, then that
Object-Oriented
keep state to yourself
send/receive messages
Declarative
this is what I want
I don't care how you do it
Functional
???

View Slide

one simple idea

View Slide

https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming

View Slide

pure functions
only input in
only output out

View Slide

Not pure:
let name = "Alonzo";
function greet() {
console.log("Hello, " + name + "!");
}
greet(); // Hello, Alonzo!
name = "Alan";
greet(); // Hello, Alan!

View Slide

Pure:
function greet(name) {
return "Hello, " + name + "!";
}
greet("Alonzo");
// "Hello, Alonzo!"
greet("Alan");
// "Hello, Alan!"

View Slide

Why functional programming?

View Slide

more predictable, safer

View Slide

easier to test/debug

View Slide

makes you look/feel smart
is The Best™ paradigm

View Slide

Why functional JavaScript?

View Slide

object-oriented JS gets tricky
(prototypes? this?!?)

View Slide

established community/tools

View Slide

OK, let’s do it!

View Slide

OK, let’s do it!
...how?

View Slide

Do everything with functions
program === function(s)

View Slide

Imperative:
let name = "Alonzo";
let greeting = "Hi";
console.log(greeting + ", " + name + "!");
// Hi, Alonzo!
greeting = "Howdy";
console.log(greeting + ", " + name + "!");
// Howdy, Alonzo!

View Slide

Functional:
function greet(greeting, name) {
return greeting + ", " + name + "!";
}
greet("Hi", "Alonzo");
// "Hi, Alonzo!"
greet("Howdy", "Alan");
// "Howdy, Alan!"

View Slide

Avoid side effects
do nothing but return output

View Slide

Side effects:
let thesis = {name: "Church's", date: 1936};
function renameThesis(newName) {
conf.name = newName;
console.log("Renamed!");
}
renameThesis("Church-Turing"); // Renamed!
thesis; //{name: "Church-Turing", date: 1936}

View Slide

No side effects:
const thesis = {name: "Church's", date: 1936};
function renameThesis(oldThesis, newName) {
return {name: newName, date: oldThesis.date}
}
const thesis2 = renameThesis(ct,"Church-Turing");
thesis2; // {name: "Church's", date: 1936}
thesis; // {name: "Church-Turing", date: 1936}

View Slide

Let’s do it!
github.com/vakila/functional-workshop/
tree/master/pure-functions

View Slide

Don’t iterate
recurse

View Slide

Iteration:
function sum (numbers) {
let total = 0;
for (i = 0; i < numbers.length; i++) {
total += numbers[i];
}
return total;
}
sum([0,1,2,3,4]); // 10

View Slide

Recursion:
function sum (numbers) {
if (numbers.length === 1) {
return numbers[0];
} else {
return numbers[0] + sum(numbers.slice(1));
}
}
sum([0,1,2,3,4]); // 10

View Slide

The problem with recursion
infinite repetition vs.
finite resources

View Slide

The problem with recursion
// recursiveInception.js
'use strict';
const recursiveInception = (n) => {
if (n === 0) return "a dream";
let dreams = recursiveInception(n-1);
return dreams + " within a dream";
}
const depth = parseInt(process.argv[2]);
console.log(recursiveInception(depth));
$ node recursiveInception.js 30000
/home/anjana/recursiveInception.js:4
const recursiveInception = (n) => {
^
RangeError: Maximum call stack size exceeded
at recursiveInception (recursiveInception.js:4:28)
1
2
3
4
5
6
7
8
9
10
11

From "Recursion, Iteration & JS: A love story"

View Slide

// tailRecursiveInception.js
'use strict';
const tailRecursiveInception = (n) => {
const incept = (n, dreams) => {
if (n === 0) return dreams;
return incept(n-1, dreams+" within a dream");
}
return incept(n, "a dream");
}
const depth = parseInt(process.argv[2]);
console.log(tailRecursiveInception(depth));
1
2
3
4
5
6
7
8
9
10
11
12
13
$ nvm use 6
Now using node v6.12.3
$ node --harmony_tailcalls
tailRecursiveInception.js 30000
a dream within a dream within a dream
within a dream within a dream within a
dream within a dream within a dream within a
dream within a dream within a dream within a dream
within a dream within a dream within a dream within a dream
within a dream within a dream within a dream within a dream
within a dream within a dream within a dream within a dream within a dream
within a dream within a dream within a dream within a dream within a dream within a
dream within a dream within a dream within a dream within a dream within a dream within a dream
within a dream within a dream within a dream within a dream within a dream within a dream within a
dream within a dream within a dream within a dream within a dream within a dream within a within a
dream within a dream within a dream within …………………..
Tail call optimization
From "Recursion, Iteration & JS: A love story"

View Slide

Let’s do it!
tree/master/recursion

View Slide

Use higher-order functions
functions with functions
as inputs/outputs

View Slide

Don’t loop
use map, reduce, filter

View Slide

Filter
Figure adapted from
http://www.datasciencecentral.com/forum/topics/what-is-map-reduce

View Slide

Let’s do it!
tree/master/higher-order

View Slide

More higher-order functions
outputting functions
that "remember" scope

View Slide

Closure:
function makeAdjectifier(adjective) {
return function (noun) {
return adjective + " " + noun;
};
}
const coolify = makeAdjectifier("cool");
coolify("conference"); // "cool conference"
coolify("drink"); // "cool drink"

View Slide

Currying:
const curryGreet = (greeting) => {
return (name) => {
return greeting + ", " + name + "!";
};
};
const greetEng = curryGreet("Hi");
greetEng("Alonzo"); // "Hi, Alonzo!"
const greetTex = curryGreet("Howdy");
greetTex("Alonzo"); // "Howdy, Alonzo!"

View Slide

FP & OOP: BFFs?
down the closure rabbit hole
to "functional objects"

View Slide

thing.do(some,stuff)
=> behavior
From "Oops! OOP's not what I thought"

View Slide

to: thing
subject: pretty please? :D
message: "do", some, stuff

View Slide

recipient message

View Slide

recipient message
method name arguments

View Slide

recipient message
thing('do',some,stuff)

View Slide

recipient message
thing('do')(some)(stuff)

View Slide

Smalltalk (OOP)
class True
ifTrue: a ifFalse: b
^ a value
class False
ifTrue: a ifFalse: b
^ b value
Lambda calculus (FP)
TRUE := λx.λy.x
FALSE := λx.λy.y
See also: gist.github.com/vakila -> LilLambda.ipynb

View Slide

Let’s do it!
tree/master/closure

View Slide

It's functions all the way down
program === function(s)

View Slide

Flow data through functions
outputs become inputs become outputs

View Slide

Composing functions:
var ender = (ending) => (input) => input + ending;
var adore = ender(" rocks");
var announce = ender(", y'all");
var exclaim = ender("!");
var hypeUp = (x) => exclaim(announce(adore(x)));
hypeUp("JS"); // "JS rocks, y'all!"
hypeUp("FP"); // "FP rocks, y'all!"

View Slide

Helpers for composition/pipelining:
const r = require("ramda");
const rtlHype = r.compose(adore,announce,exclaim);
rtlHype("FP"); // "FP!, y'all rocks"
const ltrHype = r.pipe(adore, announce, exclaim);
ltrHype("FP"); // "FP rocks, y'all!"

View Slide

Let’s do it!
tree/master/composition

View Slide

Avoid mutability
don't change in-place;
instead, replace

View Slide

Mutation (dangerous!):
let cities = ["Delhi", "Bombay", "Bangalore"];
cities[1] = "Mumbai";
cities;
// ["Delhi", "Bombay", "Bangalore"]

View Slide

No mutation (safer!):
const cities = ["Delhi", "Bombay", "Bangalore"];
const newCities = cities.map((city) => {
if (city === "Bombay") { return "Mumbai"; }
else { return city; }
});
newCities;//["Delhi", "Mumbai", "Bangalore"]
cities; //["Delhi", "Bombay", "Bangalore"]

View Slide

0 1 2 3 4 5 6 7
foo
Mutable data

View Slide

8 1 2 3 4 5 6 7
foo
Mutable data

View Slide

0 1 2 3 4 5 6 7
foo
Immutable data

View Slide

0 1 2 3 4 5 6 7
foo
8 1 2 3 4 5 6 7
too
Immutable data

View Slide

0 1 2 3 4 5 6 7
foo
8 1 2 3 4 5 6 7
too
Immutable data (inefficient)

View Slide

Use persistent data structures
for efficient immutability
See also: "Immutable Data Structures for Functional JS"

View Slide

0 1 2 3 4 5 6 7
foo
Immutable data (efficient)

View Slide

0 1 2 3
foo
4 5 6 7
1
8
too
Immutable data (efficient)

View Slide

0 1 2 3
foo
4 5 6 7
1
8
too
Persistent (immutable) data structures
structural
sharing

View Slide

Mori
https://swannodette.github.io/mori
var f = mori.vector(1,2);
var t = mori.conj(f, 3);
● ClojureScript port
● Functional API
● Fast
Immutable.js
https://facebook.github.io/immutable-js
var f = Immutable.List.of(1,2);
var t = f.push(3);
● JS through & through
● Public methods
● A bit smaller than Mori
Persistent data structures

View Slide

Let’s do it!
tree/master/immutability

View Slide

Recap
- What key ideas will help you "think functionally"?
- When is FP the right fit?
- What concepts are you eager to look into next?

View Slide

Further reading:
github.com/vakila/functional-workshop#references--further-reading
Functional libraries/languages to try:
github.com/vakila/functional-workshop#libraries--languages-to-try

View Slide

Thanks for joining!
I’m @AnjanaVakil
Huge thanks to:
Mary Rose Cook, Sal Becker,
Khalid Ali & The Recurse Center

View Slide

First Steps into Functional Programming

First Steps into Functional Programming

Anjana Sofia Vakil

More Decks by Anjana Sofia Vakil

Other Decks in Programming

Featured

Transcript