Applicative Programming In JavaScript With lodash.js

In general, applicative programming is the pattern of defining a function that takes a function and then invokes that function for each element in a collection/list. To apply this definition of applicative programming to JavaScript, you will need to know a little something about first-class functions before we dive in. So, let's start there.

JavaScript has first class functions. This means that instances of the Function constructor can go and do anything any value in the language can do because functions in JavaScript are values.

For example, in the code example below I demonstrate that the value 5 can be saved to a variable, passed to a function, and returned from a function.

Now, because JavaScript functions are values (i.e. first-class citizens), it is possible to replace the value 5 in the previous code example with the value function(){}.

Because we can replace 5 with function(){} without an error, it is clear that JavaScript functions can be assigned to variables, passed as arguments to other functions, and returned from functions just like numeric values. In fact, any JavaScript value could be used in place of 5 but it just so happens that today we care about the fact the functions share in a first-class citizenship. If it helps, think of functions like any other value passed around in JavaScript, except that this value can be invoked using ().

Another way to think about first-class functions is to consider what they allow you to accomplish when programming. It is said that a programing language has first-class functions if it can do the following:

1. Create new functions from preexisting functions at run-time (aka Partial application)

2. Store functions in collections (i.e. Objects and Arrays)

3. Use functions as arguments to other functions (aka higher order function)

4. Use functions as return values of other functions (aka higher order function)

The last four code examples make it crystal clear that JavaScript has first-class functions. Due to this capability, JavaScript, while not strictly a functional programming language, can facilitate many of the programming paradigms found in functional languages. For example, JavaScript natively makes use of applicative programming paradigms (an aspect of functional programming) by providing the native array and string methods list below, all of which accept function values to be applied to each element/character of an array or string.

Examine each of these native methods below and take notice that each either expects, or optional takes, a function that it invokes on its elements.

[].forEach() - Executes a provided function once per array element

[].every() - Tests whether all elements in the array pass the test implemented by the provided function

[].filter() - Creates a new array with all elements that pass the test implemented by the provided function

[].map() - Creates a new array with the results of calling a provided function on every element in this array.

[].some() - Tests whether some element in the array passes the test implemented by the provided function

[].reduce() - Apply a function simultaneously against two values of an array (from left-to-right) as to reduce it to a single value

[].reduceRight() - Apply a function simultaneously against two values of an array (from right-to-left) as to reduce it to a single value

[].sort() - Optionally accepts a function that defines the sort order

"".replace() - Optionally takes a function which passes the matches to the function

For many, myself included, what is provided natively is neat but it does not exhaust what is possible in terms of applicative programming or satisfy ones desire to program in a functional style. This is why it is common to see JavaScript programmers using these functions, not just on arrays or strings as intended, but really on any type of object that has numeric property names and a length property. For example, when a primitive string such as 'blue' is acted upon by a modern JavaScript interrupter, an object wrapper is created so that string methods (e.g. 'blue'.length === 4) can be called. Essentially, 'blue' is converted to {0:b,1:l,2:u,3:e,length:3}. Wouldn't it be great if we could use the forEach() method on 'blue'? Well, you can, thanks to first-class functions and the fact that many of the array methods can be generally applied to objects.

In the code below I am invoking the Array forEach() function as if it was a method on {0:b,1:l,2:u,3:e,length:3}. This is done by invoking forEach() using call() and passing the this value for the forEach() method (i.e. the value of this when forEach() is invoked) as well as the function argument expected by the forEach().

Another common example seen in the wild, which re-purposes forEach(), is the iteration of the arguments array-like object.

Iterating over a string (really an object with numeric property names and a length property) or array-like object by borrowing array methods certainly falls into the category of applicative programming, however it is a bit of a language hack and requires a binding ceremony. Not to mention doing this comes at a performance cost.

What is really needed is a utility that provides applicative-like programming for generic collections without using call(). Of course, more applicative sugar extending what can be done with Object objects or Array objects would be nice too.

There are several solutions for JavaScript developers that provide a set of functions that build upon the nature of the applicative array methods found in JavaScript. I've listed the common solutions below.

• lodash.js
• underscore.js
• valentine.js
• lazy.js
• wu.js

All of the above mentioned utilities/libraries provide functions for operating on generic collections. For instance, the each() (aka forEach()) function from most will agnostically operate on an Array, Object, or String object.

//all of these log f,o,o to the console

_(['f','o','o']).each(function(e){console.log(e)});

//note no .length property on this object, but it still works
_({0:'f',1:'o',2:'o'}).each(function(e){console.log(e)});

_('foo').each(function(e){console.log(e)});

Contrasting this to the native forEach(), which only operates on arrays unless we pull some tricks with call() and you can see the benefits of using a functional utility library that provides applicative programming functions.

The above each() method is only the tip of the iceberg, but I hope it is enough to get you excited about applicative programming with JavaScript and using a low level utility library that makes doing applicative programming easier and more powerful.

If you need more convincing, consider that many of these utilities additionally provide functions/utilities for:

• Templating
• Wrapping collections, arrays, and objects so method chaining can be done (Think jQuery chaining and operating but not just on a list of DOM elements, rather on any sort of list/collection)
• Solutions to deal with JavaScript Language Quirks (i.e. typeof abstractions)
• Facilitating functional programming paradigms and patterns (e.g. curry, memoize, partial, compose)

I am not going to discuss these additional benefits of using a functional utility library in this article. I will save these parts for another article. What I want to conclude this article with is some discussion about lodash.js, my functional library of choice, and the methods it provides for doing applicative programming on collections, arrays, and objects. While lodash.js provides way more than applicative programming functions (i.e. consistency, performance, & features you can't get out of native), I'm hoping I can get you hooked on lodash.js by showcasing the improvements and additions lodash.js offers over the native applicative programming methods we examined at the start of this article.

As previously demonstrated, JavaScript out of the box provides 8 array methods (forEach(), every(), some(), filter(), map(), reduce(), reduceRight(), sort()) and one string method (i.e. replace()) for doing applicative programming. You should learn these and know them. Once you are comfortable with how these methods work, you should move on to learn the many additions and improvements lodash.js provides for operating on collection's (i.e. an array, object, or string), Object's, and Array's with function arguments.

The following three tables provide all of the methods that lodash.js offers for doing applicative programming. I would encourage you to spend time reading the descriptions and mentally storing these functions in your mind for future use in your programs. I have no doubt that you will benefit from knowing them and using them.

Collections (i.e. an array, object, or string):

Objects:

Arrays: