Functional Style of programming in JavaScript—Part II: Reusing Functions

In the previous part we created a higher order function named totalSelectPrices and called it a few times with different anonymous functions. Let's revisit one such call:

var prices = [10, 20, 25, 30, 35, 40, 45, 50];

totalSelectPrices(prices,
  function(price) { return price > 35; }); //135

It was quite easy to create the anonymous function that returned a boolean true or false depending on whether the given price was greater than $35 or not. Now, if we want to total prices in another list of prices, we could write:

var prices2 = [10, 20, 30, 40, 50, 60, 70, 80];

totalSelectPrices(prices2,
  function(price) { return price > 35; }); //300

The conciseness of this call is deceivingly simple, but we quietly duplicated that little anonymous function.

In our field, if there are two simple acts that each of us can do to improve code quality, those would be avoiding long functions and eliminating duplication. With anonymous methods and the desire to keep the code concise, we'd automatically lean towards shorter functions, however, they do make it easier to duplicate code and we gotta keep an eye on it.

Let's remove that duplication, instead of remaining anonymous, let's store the function into a variable and reuse it.

var isPriceGreaterThan35 = function(price) {
  return price > 35;
}

totalSelectPrices(prices, isPriceGreaterThan35); //135    

totalSelectPrices(prices2, isPriceGreaterThan35); //300

It's a good idea to save the functions into variables and pass the references to other functions. I'm sure you've seen your share of bad JavaScript that could benefit from that advice. Let's avoid code like:

someFunction(function(message) {
    //several lines of code here...
    //...
    //...
  }, function(error) {
    //handle error here...
    //...
    //...    
  });

This is hard to read, our eyes have to parse through quite a bit to realize there are multiple parameters to someFunction, and to figure out where they begin and end.

Instead, we can make the code easier to read, like so:

var successHandler = function(message) {
  //several lines of code here...
  //...
  //...
}

var errorHandler = function(error) {
  //handle error here...
  //...
  //...    
}

someFunction(successHandler, errorHandler);

There's a fine line between concise code and terse code. When writing code, we have to balance conciseness and easier to read/follow.

We eliminated the small duplication that emerged in the example. In the next part, we'll tackle the next level of duplication that's about to creep in.