Practical Functional Programming in JavaScript - Why it's worth it

richytong

Richard Tong

Posted on June 15, 2020

Practical Functional Programming in JavaScript - Why it's worth it

Welcome to my series on Practical Functional Programming in JavaScript. In this installment, I talk about why it's worth it for you to go through all the trouble of learning functional programming in the first place. For the best reading experience, you should have programming fundamentals and familiarity with ES6+ JavaScript.

The biggest reason why you should learn functional programming is
you will become a much better programmer. Your programs will start to look as if they were written in plain English, and you will gain expressive power beyond your wildest dreams.

power-colorful-explosion.gif

This is because functional programming is a natural way for humans to think about programs. Functional programming is declarative, meaning you declare what you want from the computer. In this way, you bend the computer to your will.

I'll show you what I mean with two functions, doubleArrayWithLoop and doubleArrayWithMap. Both functions take an array and return an array with every element multiplied by 2.

const doubleArrayWithLoop = arr => {
  const doubled = []
  for (let i = 0; i < arr.length; i++) {
    doubled.push(arr[i] * 2)
  }
  return doubled
}

const doubleArrayWithMap = arr => arr.map(number => number * 2)

doubleArrayWithLoop([1, 2, 3]) // > [2, 4, 6]
doubleArrayWithMap([1, 2, 3]) // > [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

Right off the bat, doubleArrayWithLoop may appear more natural if you're more accustomed to loops. Here is a rough translation of what is going on.

In doubleArrayWithLoop, take an array arr, create a new array doubled, then start a for loop with i initialized to 0. Every iteration of the loop, push onto doubled the value of arr at index i multiplied by 2. After iteration is complete, return doubled.

It's just a tad bit wordy. Notice how doubleArrayWithMap reads a bit more like plain English.

In doubleArrayWithMap, take an array arr and return an array with each number of arr multiplied by 2.

It reads as if I copy and pasted from the two functions' description from above. Indeed, doubleArrayWithMap is the more functional of the two approaches because we are able to declare at a high level what we want. With doubleArrayWithLoop, we have to hold the computer's hand, telling it step by step how to give us what we want. This is the difference in expressive power between a program adhering to functional programming principles and a program that does not. This is also in part why there's so much hype over functions like map, which you'll run into over and over again in your functional programming journey.

You can find the rest of the series on rubico's awesome resources

💖 💪 🙅 🚩
richytong
Richard Tong

Posted on June 15, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related