Functional Programing 101 :: WWH


WWH: What? Why? How?


Intro :: concepts

Functional Programing




First Class Functions



How: just create and use functions to solve problems.

// set to vars
var hi = function(name) {
return 'Hi ' + name
// rebound to other var
var greeting = hi
// an array of fns
var greetings = [hi, greeting]
// passed as arguments
var execIn1Second = function(fn) {
setTimeout(fn, 1000)

view raw
hosted with ❤ by GitHub

Pure Functions




// impure – because you can change promo value (side effect)
// and for the same input X it can produce a different output.
var promo = 40
var isPromo = function(price) {return price === promo}
// pure
var isPromo = function(price) {return price === 40}

view raw
hosted with ❤ by GitHub

Basic toolbox :: currying




// an ordinary function
var sum = function(a, b){return a+b}
sum(1, 3) // 4
// a curried version of that sum
var curriedSum = function(a){
return function(b){return a+b}
var plusOne = curriedSum(1) // function(b) {return a+b}
plusOne(3) // 4
plusOne(1) // 2 -> plusOne is useful outside it's original scope
// a simple function to curry any other function
// we'll use this in future
var curry = function(uncurriedFn){
var argumentsCall = []
return function curriedFn(){
var args =
if (args.length > 0) {
argumentsCall = argumentsCall.concat(args)
if (uncurriedFn.length == argumentsCall.length) {
return uncurriedFn.apply(this, argumentsCall)
return curriedFn
// an usage example of curry
var curriedAjax = curry(function(method, path){
return $.ajax(path, {method: method})
var ajaxGET = curriedAjax('GET')
var allUsers = ajaxGET('/users')
var allStars = ajaxGET('/stars')

view raw
hosted with ❤ by GitHub

Medium toolbox :: composing



How: chain functions to produce a new callable function.

// a simple function to compose a function
// you can skip the reading of this function if you want
var compose = function(){
var fns =
return function composed(){
var thisCall = this
var args =
if ( !== '[object Array]') args = [args]
args = fn.apply(thisCall, args)
return args
// take a list of Strings and return a list of up case strings
var toUpperCase = function(list) {
return{return x.toUpperCase()})
// take a list of Strings and return a list of length
var length = function(list) {
return{return x.length})
// take a list of Integer and return the sum
var sum = function(list) {
var sum = 0
list.forEach(function(x){sum += x})
return sum
// chain all these functions and produce a new
var sumCharsOnList = compose(sum, length, toUpperCase)
sumCharsOnList(["NX", "PS4", "XboxOne"])

view raw
hosted with ❤ by GitHub

// brief explanation of what happens here
var sumCharsOnList = compose(sum, lenght, toUpperCase)
// –> first the list ["NX", "PS4", "XboxOne"] is passed to the function toUpperCase
// –> toUpperCase returns another list and it's the input for the lenght function
// –> the lenght function return a list of integers which will become the input for sum function
// –> sum function will reduce the list summing all the integers and returning the sum

view raw
hosted with ❤ by GitHub

Example :: motivational





Screen Shot 2016-04-27 at 2.17.19 PM

// _ is an instance of Ramda
// $ is an instance of jQuery
// This is an app extracted from the book
// mostly-adequate-guide/content/ch6.html
// it's query the flickr API's and mount
// a lots of images on the page
// IMPURE functions ahead
// takes a function (callback) and returns another
// function which takes an url
var getJSON = _.curry(function(callback, url) {
$.getJSON(url, callback);
// takes a selector and returns a functions
// which you can pass an html
var setHtml = _.curry(function(sel, html) {
// PURE, good and reliable functions ahead
// just create an image for a given url
var img = function(url) {
return $('<img />', {
src: url,
// just create an url for a given query
var url = function(t) {
return '; +
t + '&format=json&jsoncallback=?';
// _.prop is a curried function which takes
// a property name and then an object
// ex: var getPrice = _.prop('price')
// getPrice({price: 3, x: "y"}) // returns 3
// takes an object extracts its media and
// then from the media it extracts the m property
var mediaUrl = _.compose(_.prop('m'), _.prop('media'));
// it takes a media url and create an image
var mediaToImg = _.compose(img, mediaUrl);
//it takes an object and extracts items from it
// map each one to an image
var images = _.compose(, _.prop('items'));
// it takes images and set
// them on the document.body
var renderImages = _.compose(setHtml('body'), images);
// given a string, it'll create an url and
// gets the json and render the images
var app = _.compose(getJSON(renderImages), url);
// given a query it'll create a page
// I strongly recommend you to read again from app to mediaUrl

view raw
hosted with ❤ by GitHub

Advanced toolbox & conclusion






Leave a Reply


You are commenting using your account. Log Out /  Change )

Google photo


Twitter picture


Facebook photo


Connecting to %s