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.
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]
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 arrayarr, create a new arraydoubled, then start a for loop withiinitialized to 0. Every iteration of the loop, push ontodoubledthe value ofarrat indeximultiplied by 2. After iteration is complete, returndoubled.
It's just a tad bit wordy. Notice how doubleArrayWithMap reads a bit more like plain English.
In
doubleArrayWithMap, take an arrayarrand return an array with each number ofarrmultiplied 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
Top comments (3)
At what point do you decide that efficiency is more important, or even more achievable than readable, functional code?
I've got a situation where my data is structured a certain way and a nested for loop computes faster than the many, many iterations my attempt at the functional approach uses.
I've been told that functional programming scales well because of re-usable code. I really must be missing something.
For me at least, I have always believed there is an optimal (in every sense of the word) way to express everything in every context. Functional programming begins to solve that problem, and JavaScript solves that problem on another level.
The truth is there will be times when it's more optimal and readable to write imperative style code (for loops, let index ..., etc). I'm partial to while loops myself. That's the beauty of JavaScript - you can mix paradigms and apply them where it makes sense. I think it requires trying things out and evaluating everything as honestly as possible.
When you say that functional programming scales well, do you mean that it scales well in the same sense that TypeScript scales well (largerish shared codebases)? I suppose one of the premises to functional programming is that there is such a way such that code is reused as optimally as possible, and by virtue of simplicity it would indeed scale well.
In my understanding, for code with similar O(n) using map instead of for loop will incur small performance penalty.
How much is the O(n) in your case?