Tao Peng

Currying in JavaScript

Wed, 25 Mar 2015 22:35:01 +0000

Currying is a technique used to translate a function that takes multiple arguments into a sequence of single-argument functions. For example, here is a normal function with 2 arguments:

var adder = function(a, b) {
    return a + b;
};

With currying, it can be translated into a function same as below:

var curriedAdder = curry(adder);

// curriedAdder is same as:
curriedAdder = function(a) {
    return function(b) {
        return a + b;
    };
};

We can call the curried function like this:

var add1 = curriedAdder(1);
console.log(add1(2)); // => 3

Implementing currying

As we can see, the function curry should take a normal function, and return its curried function. The curried function actually needs to do two things:

collecting arguments, and
returning another curried function that does the same two things

Obviously, it is a recursive pattern:

var curry = function(f, args) {
    return function() {
        // 1. accumulate arguments
        var newArgs = args.concat(Array.prototype.slice.call(arguments));
        // 2. return another curried function
        return curry(f, newArgs);
    }
}

In addition, we also need to terminate the recursion when it has collected enough arguments, and finally apply the arguments to the input function.

Here is the complete curry:

var curry = function(f, nargs, args) {
    nargs = isFinite(nargs) ? nargs : f.length;
    args = args || [];
    return function() {
        // 1. accumulate arguments
        var newArgs = args.concat(Array.prototype.slice.call(arguments));
        if (newArgs.length >= nargs) {
            // apply accumulated arguments
            return f.apply(this, newArgs);
        }
        // 2. return another curried function
        return curry(f, nargs, newArgs);
    };
};

It takes 3 arguments: a function f, the number of arguments to accumulate nargs, and the accumulated arguments args.

Try it with some examples:

// a testing function that does nothing but return its arguments.
var f = function(a, b) {
    return Array.prototype.slice.call(arguments);
};
console.assert(f.length === 2);

console.log(curry(f)('a'));
// => [Function]
console.log(curry(f)('a')('b'));
// => [ 'a', 'b' ]
console.log(curry(f, 3)('a')('b')('c'));
// => [ 'a', 'b', 'c' ]

Passing multiple arguments is possible for the sake of convenience:

console.log(curry(f)('a', 'b'));
// => [ 'a', 'b' ]
console.log(curry(f, 3)('a', 'b')('c', 'd'));
// => [ 'a', 'b', 'c', 'd' ]

Note that if you need to bind an argument to a function that only takes a single argument, below is the only way:

var greet = function(name) {
    return 'hello, ' + name;
};

var greetTao = curry(greet, 1, ['Tao']);
console.log(greetTao());
// => 'hello, Tao'

Implementing uncurrying

Uncurrying is the reverse operation to currying. It converts a curried function to a function that takes multiple arguments. Uncurrying can be also implemented in a recursive way. Uncurrying a function involves:

call the curried function with a single argument, and
uncurry the curried function returned by step 1

Same as currying, the recursion stops when it consumed enough arguments:

var uncurry = function(g, nargs) {
    return function(first) {
        if (nargs <= 1) return g.apply(this, arguments);
        var rest = Array.prototype.slice.call(arguments, 1);
        return uncurry(g(first), nargs - 1).apply(this, rest);
    };
};

Some examples:

adder = uncurry(curriedAdder, 2);
console.log(adder(1, 2));
// => 3

var f2 = uncurry(curry(f), 2);
console.log(f2('a'));
// => [Function]
console.log(f2('a', 'b'));
// => [ 'a', 'b' ]

var f1 = uncurry(curry(f), 1);
console.log(f1('a', 'b', 'c'));
// => [ 'a', 'b', 'c' ]

Conclusion

Play with it if you are interested. All code in this article is available at here and tested under Node.js.

What I Learned From My Recent Project

Fri, 19 Apr 2013 22:35:01 +0000

Update on 2015-03-30: I’ve moved to Jekyll.

Today I released my own blogging system, Taoblog, which has been powering this blog for months. This blogging system is nothing special – It’s neither more powerful than wordpress, nor more cool than jekyll. Yes, I reinvented the wheel. However, I learned a lot from this wheel:

Don’t reinvent the wheel

Even though this is what I did but it doesn’t mean I reinvented everything. In this project, I use a lot of excellent libraries to get wheel running. Focus on what really need to do, life gets easier.

Write tests

I don’t think writing tests is a good idea at the beginning prototyping process. It might be a waste time due to the unstable requirements. However, when it goes stable, writing tests is a must.

Refactor often

I find I always write awful code at the first version (it just works). To make them not that awful, the only way is to refactor them, as often as possible.

Publish it before it is “perfect”

I think nobody will care about my code is good or not (it’s my pleasure if you do). Most people only care about if it works as expected. Therefore, don’t be afraid to publish it and accept feedback. It is the right way to improve the project, and much better than working alone on it until the endless perfection.

I know you’ve heard about these practical tips for thousand times, but good practical is worth repeating.

A Simple HTML Generator

Fri, 01 Mar 2013 22:35:01 +0000

I find It’s very common for me to generate HTML in JavaScript. I used to use jQuery to generate HTML like this:

function greet(name) {
    return $('<div>hello<span class="strong">' + name + '</span></div>');
}

It’s really a pain when you want to generate a long complex nested HTML code in this way. I also tried some template libraries that can do this job, but they are either too heavy or too complex to use.

So I wrote a simple one, just one function, which accepts an array as its argument and return a HTML node. The first element of the array is required to determine the HTML node’s tag; the rest elements are used to decide the node’s attributes, text, and child nodes, depending on the type of each element. For example:

function greet(name) {
    return makeDom(['div', 'hello', ['span', {class: 'strong'}, name]]);
}
greet('world'); // =>  <div>hello<span class="strong">world</span></div>

It is not shorter, but much simpler, and easier to read.

The code is straightforward:

var makeDOM = function (array) {
    if (!array || !array.length) return null;

    var child,
        root = array[0],
        element = isElement(root)? root : document.createElement(root);

    for (var i=1, l=array.length; i<l; i+=1) {
        child = array[i];

        // append string and text node as text node
        if (isString(child)) {
            element.appendChild(document.createTextNode(child));
        } else if (child instanceof Text) {
            element.appendChild(child);
        }

        // append array and element as child node
        else if (isArray(child)) {
            var dom = makeDOM(child);
            if (dom) element.appendChild(dom);
        } else if (isElement(child)) {
            element.appendChild(child);
        }

        // append attr and object as attribute
        else if (child instanceof Attr) {
            element.setAttribute(child);
        } else if (isObject(child)) {
            for (var key in child) {
                element.setAttribute(key, child[key]);
            }
        }
    }

    return element;
};

The full code is available here.