Functional programing in Javascript (lite intro)

Functional Programming in JS (light intro)
Nikos Kalogridis
@nikoskalogridis

FP HISTORY
Based on λ-calculus (1930)
Lisp (late 1950's)
...Haskel (1987)
...Javascript (1995)
Clojure (2007), Elm (2012)

CONCEPTS
First class / higher order functions
Declarative instead of imperative style
Function composition
Currying / Partial Application
Recursive functions / Tail recursion
Pure Functions
Immutablility

FIRST CLASS FUNCTIONS
A programming language that treats functions as
ﬁrst-class citizens
(errrr.....)
functions can take as arguments other functions
functions can be returned by functions
functions can be assigned to a variable

HIGHER ORDER FUNCTIONS (HOF)
A function that takes as an argument another
function
A function that returns another function
or does both

EXAMPLE (HOF)
var myArray = [1, 2, 3, 4, 5];
function times(x) {
return function (y) {
return x * y;
}
}
myArray.map(times(2));
// -> [2, 4, 6, 8, 10]

MAP
Returns a new array with the result of applying a
function on each element of the array
var myArray = [1, 2, 3, 4, 5];
myArray.map(function (value) {
return value + 1;
});
// -> [2, 3, 4, 5, 6]

FILTER
Returns a new array with all elements that pass the
test implemented by the provided function
var myArray = [1, 2, 3, 4, 5];
myArray.filter(function (value) {
return value < 4;
});
// -> [1, 2, 3]

REDUCE
Reduces the elements to a single value applying a
function to each of them
var myArray = [1, 2, 3, 4, 5];
myArray.reduce(function (acc, value) {
return acc + value;
}, 0);
// -> 15

IMPERATIVE VS DECLARATIVE
Given an array of numbers return the numbers that
are less than 4 and add to each of those 10
var myArray = [1, 2, 3, 4, 5];
var result = [];
var i = 0;
for (i; i < myArray.length; i += 1) {
if (myArray[i] < 4) {
result.push(myArray[i] + 10);
}
}
var myArray = [1, 2, 3, 4, 5];
var result = myArray
.filter((value) => value < 4)
.map((value) => value + 10);

FUNCTION COMPOSITION
import {filter, flow} from 'lodash/fp';
const users = [ {name: 'Mary', age: 46, active: true},
{name: 'John', age: 40, active: true},
{name: 'Helen', age: 30, active: true},
{name: 'Mike', age: 25, active: false} ];
const eligibleMiddleAgeGroup = flow(
filter('active'), // (user) => user.active
filter((user) => user.age >= 45 && user.age < 65))
);
eligibleMiddleAgeGroup(users)
// -> [{name: 'Mary', age: 46, active: true}]

CURRYING / PARTIAL APPLICATION
function times(x) {
return x * y;
}
}
function times(x, y) {
if (y === undefined) {
return x * y;
}
}
return x * y;
}

RECURSIVE FUNCTIONS / TAIL RECURSION
function countdown(value) {
if (value < 0) {
return;
}
console.log(value);
return countdown(value - 1);
}

PURE FUNCTION
its return value is aﬀected only by its passed
parameters
and has no side eﬀects

PURE VS IMPURE
var a = 10;
function impure(x) {
return x + a;
}
function pure(x, y) {
return x + y;
}

SIDE EFFECTS
var a = 0;
a = x + a;
}
console.log(x);
return x + 1;
}

IMMUTABLILITY
const user = {name: 'Niks', age: 40, gender: 'male'};
user.age = 41; // mutation
// avoiding mutation
const updatedUser = Object.assign({}, user, {age: 41});

FUNCTIONAL PROGRAMMING STYLE
don't
Use loops
Mutate objects/arrays
Don't do side eﬀects
do
Use tail recursion
Create new instancies when modifying
objects/arrays
Isolate side eﬀects outside business logic

PROS
Decouple data from operations
Easier testing
Easier to reason about
Easier to maintain/ﬁx
No mutation allows for easier concurrency
Industry seems to move to it

CONS
Needs more memory
Runs slower (on dumb compilers)
OOP programmers ﬁnd it diﬃcult to adapt
Scares non CS people of with maths (even CS
people are scared...)
Requires rewiring your brain
Javascript allows you to use any style

USEFUL LINKS
Many more to ﬁt this slide...
Professor Frisby's guide to functional programming
Functional Javascript (by Michael Fogus)
Javascript: The Good Parts (by Douglas Crockford)
Functional-lite Javascript video course (by Kyle
Simpson)
LoDash
Ramda
lazy.js

Functional programing in Javascript (lite intro)

More Related Content

What's hot (20)

Similar to Functional programing in Javascript (lite intro) (20)

Recently uploaded (20)

Functional programing in Javascript (lite intro)