Javascript Functional programming with Underscore or ECMAScript5

by Christian Harms on Mon, 10/04/2010 - 20:56

Intro: A little excursion to code more functional with javascript. It contain examples with the classic for-loop-code, the more functional variant with Underscore.js and the HTML5 functional enhancements. It does not explain the basic idea of functional programming - it shows the differences in code examples.

motivation

Last week I got access on the address book from Matthias' well known entry Jennifer. But I had no time to scan all the other girls addresses. With many lines of source code filled with for-loop-code - no way. I have to find a smarter coding way to scan the address book.

Anonymized address book data looks like this - containing many female and male addresses.

addressbook = [  {gender: "female", nickName: "Jenny1"},
                 {gender: "male",   firstName: "Chris"} 
              ];

It's time to code more functional with javascript (last year's entry was about functional programming with python). First I will show the normal loop-variant. After the old variant I will show the functional variant with modern browser (only internet explorer doesn't support it now, IE9 will). Or if you use more recent browser you can use the examples I made in Underscore.js (the global object is a _ ). Functional code is shorter, but does it perform? I added the micro benchmarks for all examples created with Jslitmus.js with some surprising results. All benchmark times are generated on my old ASUS eeeBox with an Intel Atom N270 CPU.

Are there matching objects?

The first addresses in the list contains only girls: I want to find out if at least one male address is in the address book. The functional helper is called "isMale(address)".

function isMale(adr) {
    return (adr.gender === "male");
}
 
function findMan_Loop() {
    var i=0, len=addresses.length;
    for (;i<len; i++) {
        if (isMale(addresses[i])) {
            return true;
        }
    }
    return false;
}

If one of the function call of isMale returns true, the result of function findMan_Loop is true. A little bit more functional with ECMAScript 5 or Underscore.js looks smarter and produce the same result. You have to read the line like "return true if any of isMale-call with an item from addresses returns true".

function findMan_some() {
    return addresses.some(isMale);
}
 
function findMan_Underscore() {
    return _.any(addresses, isMale);
}

The normal loop is faster than the functional variants - browser optimize simple loops more than the function variant.

Check every entry

The other check would be: Does the addressbook contain any women?

function onlyWomen() {
    var i=0, l=addresses.length, result=true;
 
    for (;i<l && result;i++) {
        result &= isFemale(addresses[i]);
    }
    return result;
}

With this variant I have to check every entry. If every call of the function isFemale is true the result should be true. You have to read it as "return true if all isFemale calls with the items from addresses return true".

function onlyWomen_every() {
    return addresses.every(isFemale);
}
 
function onlyWomen_Underscore() {
    return _.all(addresses, isFemale);
}

Same performance like the first example.

Get all entries with given filter

But how to get all the women out of the address book? I have to check for every entry and copy the matching entries in a new result array.

function getWomans_Loop() {
    var i=0; l=addresses.length, res = [];
    for (;i<l;i++) {
        if (isFemale(addresses[i])) {
            res.push(addresses[i]);
        }
    }
    return res;
}

The functional variant is named filter and the code is shorter:

function getWomans_filter() {
    return addresses.filter(isFemale);
}
 
function getWomans_Underscore() {
    return _.filter(addresses, isFemale);
}

I love browser optimizations and micro benchmarks. Chrome is 2x faster with the loop and array.push, Firefox is 2x faster with filter. And my old Opera (10.10 - not 9.80 like his UserAgentString) is 50x times slower than Chrome!

Expand the data with map

Matthias has described how to generate the display name from the different attributes. I want to expand the address book with the new attribute. The function should iterate over all elements, expand every entry with the attribute displayName and return a new array.

function copyDisplayName(adr) {
  return { firstName: adr.firstName,
           nickName: adr.nickName,
           gender: adr.gender,
           displayName: displayName(adr)
  };
}
 
function copyBookWithDisplayName_Loop() {
    var i=0; len=addresses.length, res =  new Array(len);
    for (; i<len; i++) {
        res[i] = copyDisplayName(addresses[i]);
    }
    return res;    
}

The result is a new array with all entries and the attribute displayName. The functional variant call the function copyDisplayName for every item and return a new array.

function copyBookWithDisplayName_map() {
    return addresses.map(copyDisplayName);
}
 
function copyBookWithDisplayName_Underscore() {
    return _.map(addresses, copyDisplayName);
}

One performance error is in the last example: I dont need to copy the complete array the original list can manipulated.

Expand the data with forEach

In this last test I created an new Array. Now I will add the displayName member directly in the address book.

function setDisplayName(adr) {
  adr.displayName = displayName(adr);
}
 
function setDisplayName_Loop() {
    var i=0; len=addresses.length;
    for (; i<len; i++) {
        setDisplayName(addresses[i]);
    }
}

The functional variant is shorter and more elegant. It call the setDisplayName to modify the given object in the array directly.

function setDisplayName_forEach() {
    addresses.forEach(setDisplayName);
}
 
function setDisplayName_Underscore() {
    _.each(addresses, setDisplayName);
}

Now the loop is slower than the functional variants - fine.

conclusion

Have fun with running the benchmarks in your browser - all the slow timings are made in my ASUS eeeBox with the Intel Atom N270 and Ubuntu!

If you (and your coworkers) like the functional coding style and using an javascript environment supporting it - use it. With performance issues you should try it which variant works better!

links

definitive Slides to EcmaScript 5 by David Flanagan
the ECMAScript 5 compatibility table
Download the ECMAScript 5 as pdf
ECMAScript 5 support in Mozilla
Web specifications supported in Opera Presto 2.4 for ECMAScript 5

Attachment	Size
functional.js.txt	3.16 KB
underscore-min.js.txt	8.35 KB
JSLitmus.js.txt	19.81 KB

Comments

iPhone 4 and android Benchmarks.
Christian Harms - Tue, 10/05/2010 - 10:57

Because the javascript performance is limited on mobile devices, here some benchmarks from Safari auf iPhone 4, Frojo auf Nexus and Android 2.1 auf dem Samsung Galaxy:

Safari auf iPhone Frojo auf Nexus Android 2.1 auf dem Samsung Galaxy

Pingback
Twitter Trackbacks for Javascript Functional programming wi (not verified) - Tue, 10/05/2010 - 14:55

[...] Javascript Functional programming with Underscore or ECMAScript5 | united-coders.com united-coders.com/christian-harms/javascript-functional-programming-with-underscore-or-ecmascript5 – view page – cached Intro: A little excursion to code more functional with javascript. It contain examples with the classic for-loop-code, the more functional variant with Underscore.js and the HTML5 functional enhancements. It does not explain the basic idea of functional programming - it shows the differences in code examples. Tweets about this link [...]

jPaq - An Customizable Alternative
Theresa Jones (not verified) - Wed, 02/09/2011 - 17:54

I do like the idea behind this underscore.js library, but I like jPaq ( http://jpaq.org/ ) a little bit better. The reason is the fact that jPaq gives you the ability to download your own custom build of the library, based on which objects, classes, and functions you need. Therefore, unlike what is true in all of the other libraries, jPaq gives you the ability to download a library made for your project. For this reason, I think I am going to start using jPaq instead of Underscore.