A gentle introduction to functional programming, part 2.

Hi there! Today's post is a continuation of this post, so get ready to learn more about functional programming in Javascript! This post will cover the call and apply keywords and use these to build up to the topics of currying and partial application. Unfortunately I won't be showing you how to make actual curry (har har...), but this should still be a pretty neat introduction to the power of functional programming.

To begin with, one of the most fundamental topics to grasp is the role of functions in Javascript. I mentioned in the previous post that functions were what are known as first class and were an actual data type. A more concise way of explaining this: a function is an object! This explains why we can throw them around just like any other variable. All function objects are of the class Function, which, as you might have guessed, has its own set of prototype methods (accessible and extensible via Function.prototype) as well as member methods.

The first method we will be discussing which all functions possess is the call method. The call method allows you to invoke a function with a given context (accessible from inside the function body through the this keyword) and set of arguments. Here are a few examples of how you would use call:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// The syntax for call is: func.call(context, arg1, arg2, ..., argn);

var alertFunction = function(){
    alert("Hello, I was called!");
};

// Simply call the method, which will show the alert box.
alertFunction.call();

// By passing a context as an argument of call, we can use this
// to interact with it.
var contextFunction = function(){
    alert("Hello, " + this.name + ". You are part of this!");
}

var contextObj = { name: "Super Cool Reader" };

// Remember that the first argument passed to call will be used
// as the context.
contextFunction.call(contextObj);

// Finally, we can also pass arguments to call.
var loggingFunction = function(message1, message2){
    // We store the logging function in the context.
    this(message1 + "\n" + message2);
}

// Remember that we can pass around functions as variables, yay!
loggingFunction.call(alert, "Hello, world.", "I am an argument!");


// Note that if we pass less arguments then a function needs,
// the other values are set to undefined.
loggingFunction.call(alert, "Hello, world. I am :");

As you can see, the call method can be quite powerful as we can now dynamically invoke a method with a given context. This is great for things like click handlers, when you want to use the clicked element as this throughout the handler. However there is one limitation to the call method: it expects x + 1 arguments if the function being invoked has x arguments. As you will see later on, this can be quite restrictive. This introduces us to the apply keyword! The apply keyword works in the same manner as the call method, however it only takes two parameters: the context and an array of arguments being passed to the function. This is great as we can now dynamically build lists of arguments to pass to a function without having to hard code the variable names, and is much more powerful. An interesting thing to note is that whenever you are inside a function body, an object exists called arguments which contains all the arguments for which that function was invoked with. I bolded the word object because although Javascript lets you iterate through it like an array and makes it look like an array, it is actually an object, and therefore does not have all array methods.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// For example, we have a function which accepts an element, a CSS attribute
// and a new value. We are passing the element to update as the context!
var updateCss = function(attribute, value){
    this.style[attribute] = value;
}

var someDiv = document.getElementById('someDiv');

// As you can see, the arguments are passed as an array
updateCss.apply(someDiv, ['backgroundColor', 'red']);
updateCss.apply(someDiv, ['textAlign', 'center']);
updateCss.apply(someDiv, ['fontSize', '5em']);

// We can also combine the arguments array and apply function to make variadic 
// functions, in other words functions which accept a variable number of 
// arguments.
var sumFunction = function(){
    var sum = 0;
    for (var i = 0, l = arguments.length; i < l; i++)
        sum += arguments[i];
    return sum;
}

console.log(sumFunction.apply(null, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]));
console.log(sumFunction.apply(null, [10, 10, 10, 10]));
console.log(sumFunction.apply(null, []));

As you can see, the apply function is much more powerful and allows us to pass a variable number of arguments. If we wanted to implement the sum function using call, our function would have to accept an array and iterate through that, rather than the arguments object. One interesting side note: the pattern of iterating through an array and adding the result of a function to a total count (in our case our function is a basic addition) is an extremely common pattern in functional programming known as folding, reducing or accumulating. I encourage you to check it out here as well as to check out the built-in array function reduce and to try and implement it as an exercise.

This ability to invoke functions dynamically with an array of arguments makes for some interesting implications. Currying is a technique which comes from mathematics and essentially allows you to transform a function which accepts more than one arguments into a nested chain of functions each accepting one argument. This may sound confusing, so I will try to explain it in the context of Javascript: currying a function which accepts at least 1 argument allows you to create a new function which has a fixed value for the first argument and accepts values for the remaining arguments. One way to explain this is through this basic code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
var addThreeValues = function(a, b, c){
    return a + b + c;
}

// Suppose you have a 'curry' function which curries a function
// by accepting the function and the argument, this will create
// a function which accepts two arguments and returns the following
// values:
//      10 + b + c, where b and c are the two arguments.
var addTwoValues = curry(addThreeValues, 10); 

// If we curry the addTwoValues function with the value 25, 
// it now returns a function which accept 1 argument and returns
// the following values:
//     10 + 25 + c, where c is the one argument.
var addOneValue = curry(addTwoValues, 25);

// Finally, if we curry the addOneValue function with the value
// 3, it retursn a function which accepts no arguments and 
// returns the following value:
//     10 + 25 + 3
var getCalculatedValue = curry(addOneValue, 3);

As you can see, currying allows us to continuously create a 'copy' of our original function with the value of the first argument being declared. What's kind of cool about this is that we can represent any function as a series of curried functions, a result which is emphasized in Haskell. But now you are probably wondering how the curry function is actually implemented! There are two approaches to this: one is to create a curry function which accepts a function to curry like shown above, and the second is add a curry function to the Function prototype so that we do not have to pass a function. For the sake of simplicity, we will be taking the first approach, however if you have any questions about implementing it the second way feel free to post on the comments! You will also notice that we convert the arguments object into an actual array by using the Array prototype's slice function, a trick I picked up here.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var curry = function(func, firstVal){
    var fixedArg = [firstVal];

    // We return a function which simply applies the original function
    // with the firstValue prepended to the arguments array. Remember
    // that the arguments array is dynamic, so we do not need to put
    // the arguments in the function signature.
    return function(){
        return func.apply(this, fixedArg.concat(Array.prototype.slice.call(arguments)));
    }
}

And there you go! Go ahead, test it out and play around with it! Create more than one curried version of the same base function but different fixed variables to see what you get. Now you may have noticed a limitation with currying: by definition, currying fixes only the first variable. This is where partial application comes in! Partial application is essentially like currying, however rather then being able to fix only the first parameter, we can now fix as many parameters as we want (in continuous order of course). We can actually easily modify our curry function to handle this, and again it can also be done via the Function prototype.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var partial = function(func){
    // Get all the arguments passed to the function apart the first one (the function)
    var fixedArgs = Array.prototype.slice.call(arguments).splice(1);

    // We return a function which simply applies the original function
    // with the firstArgs prepended to the arguments array.
    return function(){
        return func.apply(this, fixedArgs.concat(Array.prototype.slice.call(arguments)));
    }
}

As you can see, the only line the actually changed was line 3, in order to support passing more than one argument to the partial method. In fact, you could even implement the partial function using the curry function. We can now use it like so:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// A basic cross-browser event binding function
var bind = function(element, event, callback){
    if (element.attachEvent) {
        element.attachEvent('on' + event, callback);
    } else {
        element.addEventListener(event, callback, true);
    }
}

// We can now use partial to create binding functions
// for specific elements and events.
var someDiv = document.getElementById('someDiv');
var someImg = document.getElementById('someImg');

var divClickBinder = partial(bind, someDiv, 'click');
var imgEventBinder = partial(bind, someImg);

// We can now use our partial binder functions with the
// remaining arguments.
divClickBinder(function(){
    alert("The div was clicked!");
});

imgEventBinder('click', function(){
    alert("The image was clicked!");
});

I think that we will end it here for today. Hopefully I've helped you understand a bit more about using Javascript for functional programming. Again, there is much more popular topics related to functional programming, but by combining this post with the previous post, you should now be able to apply most of the common patterns.

Thanks for reading, Dominic.


A gentle introduction to functional programming.

Hi there! Topic of the day: functional programming for the programmer who comes from a non-functional background. About two years ago, I began working at a company which used a Scheme dialect (JazzScheme) as its main software development language. At the time I had virtually no experience with functional programming and Scheme seemed quite alien-like from an aesthetic point of view. In order to learn the language, I dived into Structure and Interpretation of Computer Programs. I clearly remember having an 'epiphany' in the corner of a coffee shop, revolving around the fact that you could use a function as an actual data type. This was completely foreign to me, having worked primarily with Java and PHP up until that point, and blew my mind.

Javascript has been shining in the spotlight recently, backed by HTML5, with new tools and frameworks emerging every day. I am not planning on preaching that you should always program in a purely functional sense. However I do believe that introducing yourself to the functional paradigm can better you as a programmer, or at the very least offer you a new perspective. I will not try to define the functional programming paradigm as this topic can cause length debates, so I will focus on the ability to use functions as a variable for this case. The reason I offer Javascript as a gentle introduction is that it is much more relatable for a programmer who is used to a C-style syntax language, as opposed to the unique syntax of LISP dialects.

The following lines, which are perfectly valid Javascript, are a great place to start:

1
2
3
4
5
var aFunction = function(){
    console.log('Hello, world!');
};

aFunction();

What is going on here? Essentially, the right hand side of the assignment is creating an anonymous function (that is, it has no name at its moment of creation), and then assigning it as the value of aFunction. We then execute the variable, and we see an infamous message in our console! This snippet is one of the keys to understanding the meaning of functions as first class citizens. Now if we can assign it to one variable that means the following code is also perfectly valid:

1
2
3
4
5
6
7
var aFunction = function(){
    console.log('Hello, world!');
};

var bFunction = aFunction;

bFunction();

Of course, all these functions are valid Javascript functions, so therefore we can also give a function arguments, like so:

1
2
3
4
5
6
var adder = function(a, b){
    return a + b;
}

console.log(adder(1,2));
console.log(adder(5,6));

As you can see, we now have the ability to pass around functions as if they were simple variables (and in reality, they are simple variables!). The power of this truly shines in the fact that since they are variables, we can pass them to functions. Functional programming is based on the idea that with it we make many small functions, and combine them to make powerful code. There are many standard patterns in functional programming, but to begin with I will show you one which can be extremely practical in Javascript - passing functions as callbacks. Suppose you repeatedly find yourself testing things, and then either showing a success message or executing some failure code. We could make a function which would automate this for us, simplifying our life:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var test(testFunction, successFunction, failFunction){
    if (testFunction()){
        successFunction();
    } else {
        failFunction();
    }
}

var testFunction = function(){ return 2 == 2; },
    successFunction = function(){ console.log('This machine is awesome!'); },
    failFunction = function(){ console.log('Uh oh!'); };

test(testFunction, successFunction, failFunction);

I will now show you to rather popular functional programming standards, a forEach and a map. The forEach pattern gets passed an array and a function, and executes the function with each element of the array. The map function gets passed an array and a function, and returns an array of the result of the function for each element. Here are some basic examples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var forEach = function(valueArray, eachFunction){
    for (var i = 0, l = valueArray.length; i < l; i++){
        eachFunction(valueArray[i]);
    }
}

var map = function(valueArray, mapFunction){
    var returnArray = [];
    for (var i = 0, l = valueArray.length; i < l; i++){
        returnArray.push(mapFunction(valueArray[i]));
    }
    return returnArray;
}

These two functions allow us to re-use these patterns (which occur more often than you'd think) and we can combine them easily. Suppose we want to have a method which uses forEach to print out each element of an array, and we have a map method which squares every element of an array, we can do something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var logger = function(element){
    console.log('Logger - ' + element);
}

var square = function(element){
    return element * element;
}

var values = [1,2,3,4,5,6,7];

forEach(values, logger); // Will print each value.
forEach(map(values, square), logger); // Will print out the square of each value. 
forEach(map(map(values, square), square), logger); // Will print out the 4th power.

So now that we know how a forEach and a map is implemented, I will gladly let you in on the following: the Array prototype already has a forEach and a map method! Using them is as simple as:

1
2
3
4
5
6
7
8
9
// Print out all elements of an array
[1,2,3].forEach(function(item){
    console.log(item);
});

// Square each element of an array
var squared = [1,2,3].map(function(item){
    return item * item;
});

The last thing I will be showing you today will be using what you have learned so far to create function factories - functions which return functions. Suppose you want to create a general function which creates helper functions for binding a callback to a given element's event handler, and you want it to be compatible across different browsers. We can generalize this into a function which we will pass the element and event to, and it will return us a function allowing us to attach an event handler to that element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var getEventBinder = function(element, event){
    var func;

    // We are checking for IE event binding style, and then
    // building a function which accepts a callback and
    // binds it to the appropriate event.
    if (element.attachEvent) {
        func = function(callback){
            element.attachEvent('on' + event, callback);
        };
    } else {
        func = function(callback){
            element.addEventListener(event, callback, true);
        }
    }

    return func;
}

// We can now use this to get a function allowing us to
// bind a callback to the click handler of a div.
var div = document.getElementById('someSpecialDiv');

var divClickAttacher = getEventBinder(div, 'click');

divClickAttacher(function(){
    alert("The div was clicked!");
});

What are we doing here? We are creating a function which accepts an element and the name of an event, determines whether we are using IE event binding style (attachEvent) or not (addEventListener), and finally returns a function which accepts a callback and is crafted to bind this callback to the event and element we had passed. Admittedly this is using a little bit of closure magic, but hopefully the example is still clear. If not, I will find some good references for explaining closures, as I've seen this done many, many times and fear I could not compete.

I think for today we will leave it at that. This is only scratching the surface of the power of functional programming, but hopefully I have opened your mind to a different style of programming. If you have any questions or comments feel free to post!

Thanks for reading, Dominic.