Improve the Quality of Your JavaScript Code with Functional Programming

Lately, I’ve been learning Redux and I keep seeing things about functional programming. I had heard those words, and I vaguely understood the principles, but I was having some trouble really applying them in my code.

Some of my other developer buddies had told me about how functional programming makes your code cleaner, more efficient, more abstract and reduces the potential for the introduction of errors. I’m still struggling to incorporate these ideas by habit and so I’ve written this simple post to demonstrate the fundamentals of functional programming.

Let’s say that we have an array of user objects, something that would look like this:

const users = [
{id: 1, username: "cambot", favorite_color: "red"},
{id: 2, username: "gypsy", favorite_color: "purple"},
{id: 3, username: "tom", favorite_color:  "red"},
{id: 4, username: "crow", favorite_color: "gold"},
{id: 5, username: "joel", favorite_color: "red"},
{id: 6, username: "mike", favorite_color: "blue"},
{id: 7, username: "jonah", favorite_color: "yellow"}
]

And we’d like to make an array of only users whose favorite color is red. We could write something like this for loop:

let favRed = []
for(let i = 0; i < users.length; i++) {
  if(users[i].favorite_color === 'red')
    favRed.push(users[i])
}

This works, for sure, but by applying the functional programming paradigm, we can make this code much simpler and less error-prone.

In functional programming, we strive to use pure functions and immutable data. Pure functions, when given the same input, always return the same output. Immutability of data is the concept of not letting our code actually change the data in state. Adhering to these two concepts, we can safely use higher-order functions (functions that take functions as an argument) to simplify our code. A very common higher-order function that comes with JavaScript and that we can use here is filter:

let favRed = users.filter(user => user.favorite_color === 'red');

By passing the arrow function to filter, the line of code above achieves the same result as the for loop we wrote previously, but using much less code.

That’s great! However, we still can simplify this code more. If we isolate the arrow function by assigning it to a variable of its own, we effectively reduce every possible action to its own function, increasing modularity and making it much more likely that we won’t end up repeating code. For example, we could use higher-order functions filter and reject along with our isolated arrow function to split our users into arrays of users whose favorite color is red and all the ones who like a different color:

const isRed = user => user.favorite_color === 'red';
const favRed = users.filter(isRed);
const favOther = users.reject(isRed);

Conclusion

And this is what makes functional programming so powerful. Not only is the code small and efficient, but it’s a lot more readable, too. I’m looking forward to applying these principles to my code this week!

More content at plainenglish.io