Why Learning Functional Programming in JavaScript Will Make You a Better Developer
Tags: javascript, webdev, programming, tutorial
Published: 2022-05-23 14:58:48

Functional programming (abbreviated as FP) is a programming paradigm that's popular in JavaScript. JavaScript treats functions as [first-class citizens](https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function) and this makes it easy to write functional programming in JavaScript.

This post will tell you the basics and benefits of functional programming and how to use them in JavaScript.

## What is Functional Programming?
Functional programming is a way of writing software with specific principles. The idea is that these principles will
* Make it easier to write, test, and debug the code
* Make it easier to reason about the code
* Improve developer productivity
* And more

## Core Principles in Functional Programming
### Pure Functions
Functions should be pure. Pure functions always produce the same output and have no side effects affecting the output. Side effects are anything that's outside the control of the function. E.g. any input/output (I/O) such as reading from a database/file or using `console.log`. Or even a static variable.

Here's a simple example

{% gist https://gist.github.com/simeg/22d08498123864fd789dfea64a6ab8c5 file=fp_js_1.js %}


#### But I Need I/O?
An application without I/O is not that useful. Functional programming is not about eliminating I/O. Instead, you should separate the business logic from I/O. Any side effects should be handled at the edges of our processes, and not in the middle of them. By doing this you achieve pure business logic that is easily testable.

JavaScript is not a purely functional programming language. So there's nothing from stopping you doing whatever you feel comfortable with though. [Haskell](https://en.wikipedia.org/wiki/Haskell_(programming_language)), on the other hand, is an example of a purely functional programming language. In Haskell, you're enforced to use the functional programming principles.

### Immutable State
Immutable state means that the state should not change. Instead of changing the state, in functional programming we **copy it**. This might seem counter-intuitive: why would we want to copy state instead of changing it?

In JavaScript, you can pass values by reference. This can be dangerous. Let's look at an example.

{% gist https://gist.github.com/simeg/ecd4d49bb8de8d86ca8bf1a93763af3a file=fp_js_2.js %}

### Recursion
With recursion, lists are not iterated using `for`, `while`, or `do...while` because they mutate state (increasing the counter, for example). Instead, in functional programming functions such as `map()`, `filter()`, and `reduce()` are used.

The word "recursion" scared me for a long time, I have to admit. But in JavaScript, you can quickly see the benefits of readability and productivity using these functions.

Let's look at an example!

{% gist https://gist.github.com/simeg/f97b84fd2c34075d8a2ffa58346a85bc file=fp_js_3.js %}

## Functional Programming in JavaScript
I showed you briefly how to use `map()` already. Let's dig into it some more.

`map()` iterates over your list, one element at a time, and lets you replace it with something new. This is useful for updating a value for all elements in a list, for example. It then returns a new list, leaving the old one unmodified. So it follows the functional programming principle of not modifying state.

And there are two more functions you should know about, `filter()` and `reduce()`.

`filter()` will let you filter out unwanted elements from a list. This is useful for removing elements that meet certain criteria from a list. E.g. "_filter out fruit that's more expensive than 5_. And just like `map()`, it returns a new list.

{% gist https://gist.github.com/simeg/9188e7c58b35f766431d3e77f1cdb485 file=fp_js_4.js %}

`reduce()` will let you "reduce" a list of elements into a single value. This is useful for working with numbers.

{% gist https://gist.github.com/simeg/190f3a22436cbd751bb5507e7607cdbd file=fp_js_5.js %}

This function was the hardest one to understand for me. I recommend you check out the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) about it.

## Conclusion
Now you know what functional programming is about, why it's useful, and how to use it in JavaScript. It might take some time to get used to but it's well worth the effort. The functions we covered are available in all major programming languages. This is not something specific to JavaScript.

---

_Connect with me on [Twitter](https://twitter.com/prplcode), [LinkedIn](https://linkedin.com/in/simeg), or [GitHub](https://github.com/simeg)_

_Originally published at [prplcode.dev](https://prplcode.dev)_