Question

Well, I recently learned about closures in Javascript.

While i find it’s concept truly amazing, i have yet to find a good application for them, myself.

In all the blog posts, all the tuturials i found, i got a good explanation of what they are and how to work with them.

What i can’t find anywhere are examples that make me think: “Wow! you can do THIS with closures? Awesome!!!”. All the examples i find are purely academic like this one.

function say667() {
  // Local variable that ends up within closure
  var num = 666;
  var sayAlert = function() { alert(num); }
  num++;
  return sayAlert;
}

var sayNumber = say667();
alert(sayNumber());

So, i was wondering if any of you can share some mind-blowing experiences with these special kind of functions.

I know that this is sort of an open question, but i will attribute the answer to whoever makes me WOW the most.

Thanks

Answer 1

Currying variables

Since “closure” is just a way of saying that a function always retains its original variable scope, there are many ways you can take advantage of that.

Currying seems to be something that people like.

---

Creating curried value manipulators

Here I’ve created a function curry that will return a function that will be used to generate new functions that work with the original curried value.

function curry() {
    var args = Array.prototype.slice.call(arguments);
    return function(fn) {
        return function() {
            var args2 = Array.prototype.slice.call(arguments);
            return fn.apply(this,args.concat(args2));
        };
    };
}

---

Creating a function that curries a string

So if I want to create functions to work with a string, I could curry the string…

var workWithName = curry("Bubba");

…and use the function returned to create new functions that work with the given string in various ways.

---

Create a function that puts the curried string in a sentence

Here I create a talkToName function that will incorporate the name into various sentences based on the arguments passed…

var talkToName = workWithName(function(curried_str, before, after) {
    return before + curried_str + after;
});

So now I have a talkToName function that accepts 2 strings that wrap the curried string.

talkToName("Hello there ", ". How are you?"); // "Hello there Bubba. How are you?"
talkToName("", " is really super awesome.");  // "Bubba is really super awesome."

Notice that I pass two arguments to the talkToName function, but the function given to workWithName accepts 3 arguments.

The first argument is passed by the function we created from workWithName(), and the two arguments we give to talkToName are added after the original curried argument.

---

Create a function increments the characters of the curried string

Here I create an entirely different function using the original workWithName function that will take the “Bubba” string, and return a string with the letters incremented by the given value…

var incrementName = workWithName(function(curried_str, n) {
    var ret = '';
    for(var i = 0; i < curried_str.length; i++) {
        ret += String.fromCharCode(curried_str[i].charCodeAt() + n);
    }
    return ret;
});

So I pass my new incrementName function a number, and it increments the letters in the name, and returns the new string…

incrementName(3);  // "Exeed"
incrementName(8);  // "J}jji"
incrementName(0);  // "Bubba"

So you can see that we gave curry() a value, and it gave us back a function that can be used to create new functions that work with the original value.

Notice again that I pass one argument to the incrementName function, but the function given to workWithName accepts 2 arguments. The first argument is curried.

---

Other examples with numbers

Here’s an example that creates a function generator that works with the numbers 3 and 5.

var workWith3And5 = curry(3, 5);

---

Create functions that do various things with the curried numbers

So using the workWith3And5 function, we make a new function that will accept a number argument, and return an Array of the sums of the curried numbers with the given number…

var addNTo3And5 = workWith3And5(function(x, y, n) {
    return [3 + n, 5 + n];
});

addNTo3And5( 8 );  // [11, 13];
addNTo3And5( -4 ); // [-1, 1];

---

And another one using the same workWith3And5 function that curries the numbers 3 and 5 that creates a 3 x 5 Array of Arrays, where the nested Array is given some content…

var create3By5GridWithData = workWith3And5(function(x, y, data) {
    var ret = []
    for(var i = 0; i < x; i++) {
        ret[i] = [];
        for(var j = 0; j < y; j++) {
           ret[i][j] = data;
        }
    }
    return ret;
});

create3By5GridWithData( 'content' ); // [Array[5], Array[5], Array[5]]