Functional Concepts in Javascript

By Brad Newman

Introduction

Recently, I began exploring Dan Abromov’s state management library Redux. A tool set that provides tools such as hot reloading, time travel, and record-replay for applications. Providing predictable behavior, the tools that I mentioned above may make you feel like a debugging wizard. Prior to Redux, I never really had any interest in functional programming. I made the incorrect assumption that functional concepts belong in the realm of PHD data scientists, in a white room where they spend the day banging out some Haskell. After seeing the application of functional concepts that were used to create Redux, I realized that functional programming and javascript were perfect for each other.

A Few Concepts

Features of functional programming are becoming more prevalent in day-to-day javascript. Without collection methods like map and reduce provided by libraries such as underscore.js, recent projects that I have contributed to might look more like a post apocalyptic wasteland rather than the bug free, succinct business logic I know I created. Well, something close to that. Let’s take a look at the basics.

“Always look for simple repeatable actions that can be abstracted out into a function.”

Basic Rules

• Functions must accept at least one argument.
• Functions must return either data or another function.
• Loops are bad. Use recursion instead. (No dirty looks, now.)

Immutability and Statelessness

All immutability means is that once an object is created, it cannot be mutated. This idea is core to functional javascript. Rather than modify an object to meet our needs, we build a brand new object and toss or store the old one. If we keep the old one, we can use it in several ways, such as seeing historical changes to your object over time. As you can imagine, this can become very powerful when attempting to debug or improve your object.

Statelessness means that your function should not need to know what happened before the function is used or afterwards.

Here is a brief example that gathers the total of values in an array. Note: the example follows the rules that I mentioned earlier.

Notice that we broke out the function ‘addNumbers’. This simple operation now becomes a reusable function and helps to keep our code DRY. Also, take note that we are not mutating the array that was passed in, rather we are recursively stepping through the array to gather our total value.

Higher Order Functions

This is another term that you you will hear a lot about when exploring or talking about functional programming. In the context of javascript composition, the term simply means “functions that operate on other functions by taking functions as arguments or returning functions.”. Really, that is all there is to it. If you would like to see some in the wild examples of higher order functions, check out the source methods for map or reduce located in the Lodash.js or Underscore.js Github repository.

Currying

Currying is a way to construct functions that will allow partial application of a function’s arguments. You can pass in all of the arguments a function expects and get a result, or you can pass a subset of arguments and get a function back that’s waiting for the rest of the arguments.

As you can see in the example above the function ‘yumCurry’ actually returns another function that takes a separate argument. We can pass as many parameters as we like, creating custom variations of our original curried function. This can become powerful and keeps things readable as well.

Conclusion

I have really only touched on some basics. I know that that as you being to apply functional concepts to your project you begin to see readability and code reuse improve dramatically. Perhaps, like me you will ask yourself, “Why didn’t I investigate functional javascript earlier?”.