## DEV Community

Richard Tong

Posted on • Updated on

# 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.

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 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

Trev

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.

Richard Tong • Edited

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.

zulvkr

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?