In my last post i created the following piece of code to group names from a list into a hash by their first letter. Looking at I though about how it could be reduced to something simpler with the Ternary Operator. I left it be for the time since I wanted to only talk about one concept at a time. Now that there is time, here it goes.

Ternary Operators

I have talked briefly about ternary operators before. They work basically like this.

//(test ? value if true : value if false)

//Usually used like this
var someVar = (10 % 2) == 0 ? "Even" : "Odd";

Thoughts

That is the pattern you almost always see. So I looked at the code in the last post realized, if I don’t use it in an assignment statement it’s really close to if / else. So the I took it one step further. If not assigning a value the result from the “value if true” and “value if false” statements don’t matter either.

Result

//The Original
_.reduce(
    list,
    function(output, name){
        var lCase = name[0].toLowerCase();
        
        if(output[lCase])
            output[lCase].push(name);
        else
            output[lCase] = [name];
            
        return output;
    },
    {}
);

//Could be rewritten to
 _.reduce(
    list,
    function(output, name){
        var lCase = name[0].toLowerCase();    
        
        output[lCase] ? output[lCase].push(name) : output[lCase] = [name];
        
        return output;
    },
    {}
);

It’s a narrow call on which one is more readable or justifying the revision by it being fewer lines. However I think it’s was a good though process to realise false constraints in the use of the ternary operator and find a application for it where with out those old constraints.

List comprehension functions make solving problems with groups or lists much easier. The two most basic of the functions are Map and Reduce. From these two you can build any other operation you want. Luckily, most times you don’t have to and functions that sort or group will already exist.

A word on Underscore ‘_’

Underscore is a library for JavaScript that provides these basic list comprehension function that are native to most other functional languages. It can be used in a functional sense where you call a reduce, filter, find, etc and pass in the grouping or list you want to process. Underscore also extends the base JavaScript objects so you can use a syntax that may feel more natural to people who are used to object oriented languages. Other features of the library include tests or base object types and even a basic templating system which though really nice are not related to the rest of this post.

How about Map and Reduce

So back to the two basic functions that I mentioned earlier. Map is a function that will apply an operation to every element in a set, this can be a list of values or a collection of key value pairs. Imagine it like a station on a assembly line where it paints each part that comes down the line. Reduce is different in that it takes a collection and will return a single value. This is useful when you have a list and you want to find the largest number, it’s sum, or to test if a value exists in the collection. Reduce takes the first element, does something with it and then takes the result and looks at the next element. Think about that when computing the sum. You take one value add it to your total then take your new total and look at the next value, over and over, till you are done. There is one caveat with Reduce that need to be mentioned though, and, it’s that is it can return a collection as it’s one result.

To Group By Reduce

So Working with Reduce for fun I wanted to break a list into groups. For the record Underscore has a function that will do this .groupBy() and Reduce is supported in JavaScript in most of the Modern Browsers without needing Underscore. For this that doesn’t matter, cause, is for fun.

Sort Name by First Letter

For this example we are going to work with a list of names. Our goal will be to take those names and group them by the first letter in the name.

var list = 
    ["Dan", "Wayne", "Steph",  "Marc", "Duchess",
     "Deric", "Crystal", "Alex", "Wesley", "Dort"];

There are two ways we can use Underscore to reduce. We could just call .reduce() on our list since Underscore extends all our lists with its extra features. The other way is to call it from the library its self.

//Underscore extends all lists
//(Now a standard list function in modern browsers / html5)
list.reduce();

//Or on the Underscore object
_.reduce();

When calling reduce from the Underscore object we need to pass the function three parameters. The list to work on, the function to perform on each element, and the starting value for the result. The last param seeds your working function, after the first iteration that value will be the functions result. You can see this in the exampel from the underscore documentation.

//The result will be 6
_.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);

Now like I said above the function can return a list instead of a single value. For that matter it can return a hash. Now when that’s the case your seed should be the same type. What our reduce function will do is to check a hash for a key that’s the first letter of the current item. If it exists it will append it to that key, other wise it will create a new key with our item as the first value in a list. This will then produce a sorted set of names.

_.reduce(
//Our input list
    list,
//The function is called on each item in the list
//The first parameter is the value the function returned
//    for the previous item
    function(output, name){
    
        var lCase = name[0].toLowerCase();
        
        if(output[lCase]) //if lCase is a key
            output[lCase].push(name); //Add name to its list
        else
            output[lCase] = [name]; // Else add a key
            
        return output;
    },
//The seed for the first time the function is called
    {}
);
/* Returns
Object {
    a: Array[1]
    c: Array[1]
    d: Array[4]
    m: Array[1]
    s: Array[1]
    w: Array[2]
}
*/

You can see quickly that how useful this function can be. I’m not going to go back in to Map / Reduce but the reduce concept is a good tool to have when trying to solve problems. Furthermore Underscore is a good tool kit to have when your solution involves working with collections in JavaScript.