What is functional programming

 Functional code is characterised by one thing: the absence of side effects. It doesn’t rely on data outside the current function, and it doesn’t change data that exists outside the current function  - Mary Rose Cook

produces abstraction through clever ways of combining functions.

produces abstraction through clever ways of combining functions.​ -  Marijn Haverbeke​

What are side-effects?

var x = 10, y = 5;
function add(){
   return (x + y);
}

add() has side effects:

• modifies x and y
• x and y variables are out of add's scope
• add is an impure function. 

when a procedure changes a variable from outside its scope. 

var x = 10, y = 5;
function add(){
   log(x + y);
   return x + y;
}

function log(v){
    console.log(v);
}

Impure function

• Modifies states outside it's scope
• modifies x and y
• contains hidden inputs x and y
• contains hidden output, log

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

add(10, 5)

Pure function

•  the return value is only determined by its input values, without observable side effects

Functional programming in Javascript 

• Javascript provides functions such as Map, Filter and Reduce to help you program functionally
• Also third party libraries eg. Underscore and Lodash

Example

Create a program that:

• Returns the names of developers that know a particular programming language
• Create a poll that shows the number of developers that know each programming language

We have a group of developers with experience with particular programming languages. 

// sample data
var devs = [{
  "name": "Nader",
  "langs": ["JS", "Java", "Clojure", "Haskell"]
}, {
  "name": "Andrew",
  "langs": ["Java", "C", "Objective C", "Swift"]
}, {
  "name": "Charles",
  "langs": ["C", "C#", "Clojure", "JS"]
}];

Imperative approach

// Bad
// Hidden input devs
function getDevs(lang){
 var out = [], dev;
 
  for(var i = 0; i < devs.length; i++){
    dev = devs[i];
    if(dev.langs.indexOf(lang) !== -1){
      out.push(dev.name);
    }
  }
  
  return out;
}



// Better
// No hidden inputs
// Using Array method forEach
function getDevs(devs, lang){
 var out = [];
 
  devs.forEach(function(dev){
   if(dev.langs.indexOf(lang) !== -1){
     out.push(dev.name);
   }
 });
  
  return out;
}

Functional Approach

// Best
// Using Array methods: Filter, Some and Map

function getDevs(devs, lang){
  function filter(it){
    return it.langs.some(some);
  }
  function some(it){
      return (it === lang);
  }
  function map(it){
    return it.name;
  }
  
  return devs.filter(filter).map(map);
}

Retrieve Devs

Imperative approach

// Okay
function getLangPoll(devs){
 var langs = [];
 devs.forEach(function(dev){
    langs = langs.concat(dev.langs);
 });
  
 var cs = {};
  
langs.forEach(function(lang){
   if(!cs[lang]){
     cs[lang] = 1;
   } else{
     cs[lang]++;
   }
});  
  return cs;
}

Functional Approach

// Better
// Using Array method reduce

function getLangPoll(devs){
  function concatLangs(prev, curr){
    return prev.concat(curr.langs);
  }
  function reduceLangs(prev, curr){
    if(!prev[curr]){
     prev[curr] = 1;
   } else{
     prev[curr]++;
   } 
    return prev;
  }
  
  return devs.reduce(concatLangs,[]).reduce(reduceLangs, {});
}

Create a Poll