Javascript – Functional programming – Closures & higher order functions

Javascript has gained many popularity on the last years. It is a language poorly misunderstood and often underestimated because it has some ‘weird’ features such as the Classless object oriented model. However it has some very nice feautres. One of them is that everything is object. This allows managing treating functions like traating ever other object such as an array, string, number etc. This eventually allows to define functions that accepts functions as arguments, and creating and returning functions, allowing javascript(which is an imperative) language to have functional programming features.

What is Functional programming
Functional programming is programming paradigm is which the central concept is the function as we know it from math. It just accepts input and returns and output. It does not have an side effects as in imperative languages. It does not manipulate state and thus makes programs easier to understand and debug.

Functional programming in an imperative language. But how?
As mentioned before javascript is an imperative language that has some nice features in order to do some partial functional programming. It is NOT a purely functional programming language such as Haskell. However we can facilitate some aspects of functional programming in our code in order to introduce more abstraction, and make it more easily understood and testable.

Higher order functions – Functions as objects
In Javascript everything is an object so we can declare a variable and assign to it a string, an array, or a function. For example we can have a variable called add in which a function performing add is assigned.

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

//We can call add normally
var result = add(10,5);
console.log(result);

Add is just a normal variable containing a reference to a function. As such we can pass it to another function or return it and call it later. As an example consider we want to create a function which will accept a list of numbers and an operation to be performed in these numbers. In imperative style we would do something like this:

function performComputation(list, computation) {
      var result = 0;
      if (computation == 'add') { //Add all alements
          for(var i = 0; i < list.length; i++) {
                result += list[i];
          }
      } else if(computation == 'substract') { //Substract all elements
           if (list.length > 0) {
               result = list[0];
               for(var i = 0; i < list.length; i++) {
                  result -= list[i];
               }
          }
      }

      //...more if else based on available computations 
      return result;
}

var result = performComputation([10,5,2], 'add');

By this way our function is not abstract enough, and lacks flexibility. If we wanted say another computation we would need to edit the function body and add another else-if block for the new computation. It introduces boilerplate code too! There must be another way… And what it is? Yes ou got it! The Functional one! Instead of passing a string which will represent the operation we will pass a function which will accept two numbers and return a result. The performOperation will calculate the result based on the function passed.

function performOperation(list, computation) {
     var result = 0;
     for(var i = 0; i < list.length; i++) {
          result = computation(result, list[i]);
     }

     return result;
}

var summed = performOperation([1,2,3], function(x,y) {
     return x+y; 
}); //summed will be 6

var substracted = performOperation([1,2,3], function(x,y) { 
     return x-y; 
}); //substracted will be -6

console.log('summed: ' + summed + ', substracted: ' + substracted);

As you can see we reduced the size and complexity of our code. Instead doing the calculation on the main fucntion we separated the list looping functionality and the calculation, leading into two very simple functions. This leads to more easier to understand and flexible code. Note that we are passing a function as argument. Thus the performComputation function has become a higher-order function. Actually the previous performOperation function is a popular method often performed in lists. It is called reduce. Reduce takes a list of data and aggregates them into a single result based on some computation between elements.

Another example – Map implementation
Another example is the map function. Is a function which accepts a list and transforms every element of the list based on transform function. For example let’s say we want to create a function which will accept a list and return a list with the elements of the original list doubled.

function map(list, operation) {
     var result = [];//Result will be a list
     for(var i = 0; i < list.length; i++) {
         result.push(operation(list[i]));
     }

     return result;
}

//Result will be [2,4,6,8];
var result = map([1,2,3,4], function(x) {
    return x * 2;
});

console.log(result);

Very easy! Each element is passed to the operation function which just doubles it. If now we want to add another operation no need to touch the original map function.

var result = map([1,2,3,4], function(x) {
    return x*x;
});

Now the result will hold every value of the list multiplied b itself. Looking at the implementation of the previous function we saw a common point. The for loop. Can we abstract this even more? The answer is yes. We can create a forAll function which will accept a list and an operation to be performed.

//Now we abstracted the loop code in a separating function so we can reuse it 
//in other functions and without caring of the details of the looping process.
function forAll(list, operation) { 
     for(var i = 0; i < list.length; i++) { 
         operation(list[i]); 
     } 
} 

function map(list, operation) { 
     var result = [];//Result will be a list 
     forAll(list, function(x) {
         result.push(operation(x)); 
     }); 
     return result; 
} 

var result = map([1,2,3,4],  function(x) { 
    return x*x; 
}); 

console.log(result);

Closures
Another concept of functional programming is closures. Closures are nested function(that is functions declared inside a function) which share their lexical scope with the function they are included. What does this practically means? This means that you declare a nested function. Inside the outer function you have declared some variables. You can access those variables from the nested function(closure) even when the original function has returned! Not undertood? Don’t worry an example is coming!

function makeAdd(x) {
     function closure(y) {
         return x+y;
     }

     return closure;
}

We declared a function makeAdd which accepts an argument x. Inside we declare another function which will be our closure and will accept an argument named z. Inside our closure we perform an addition of x and y. But wait. x is not declared anywhere in function closure. Yes, because it references the x variable in makeAdd. Thus the inner function becomes a closure. This means that closure can be returned and used on it’s own using the variable x from the makeAdd.

What this practically means?
With closures we can do many things. The example above shows a very simple use case. If we invoke makeAdd we get a function as a result:

var adder = makeAdd(10); //adder is now a function which sums it's argument with 10
var result = adder(20); //Result will be 30

console.log('Result: ' + result);

From now on every time we invoke makeAdd it will add the argument passed to it with 10. We can create another one which will add with 20 or every other number.

In the general case closures allows us to create functions whose behavior can be customized based on the arguments passed on the creating functions.

A more real world example
Now for a more real world example of a closure. Let’s say you have a list of people and we want to filter them by an attribute.

The following example finds all the people whose age is above a specified value.

function findPersons(persons, age) {
     return persons.filter(function(person) { //Closure
          return person.age >= age;
     });    
}

var persons = [ { name: 'Mike', age: 17 }, 
                { name: 'Jim', age: 23 }, 
                { name: 'Kate', age: 30 } ];

var adults = findPersons(persons, 18);

//Will print Jim,Kate
for(var i = 0; i < adults.length; i++) {
	console.log(adults[i].name);
}

In the example above we define a function findPersons which accepts a list of perSons and an age value. Inside we call the filter function passing to it a closure which returns true if a specified perSon’s age if equal-or-greater than the age specified when we called findPersons. Notice that the inner function references the age variable of the findPersons. Thus it is a closure.

Conclusion
In this tutorial we have only scratched the surface of javascript’s ability to treat functions as first-class objects. Surely it is not have the features of a pure functional programming language but we can surely make code cleaner and more easy to debug.

Advertisements