My First Look at Functional Programming
Tags: javascript
Published: 2023-04-05 10:52:08

ℹ️ You can skip this one if you have already known what functional programming (FP) is. I won't do any coding in this article, but only refer to explanations of what FP is from what I have discovered.

I've heard arguments that functional programming leads to more maintainable, flexible, and reliable code. As a front-end developer who primarily uses JavaScript (JS), I didn't pay much attention to it. I thought functional programming is just a coding style that emphasizes the use of functions instead of classes. And, for me, using functions for almost everything is the norm, and I am not accustomed to using classes...

When I changed my career to become a programmer, those popular JavaScript frameworks like React had introduced Hooks and Vue had introduced the Composition API. I have no problem with those new API, and feel like I knew what's functional programming, but I am not.

## TL;DR-- just for now

From my point of view, FP is not an elixir for those confusing logic and messy codes, operations for the elements in a function don't magically disappear/complete.

There is a library called `fp-ts` that provides a variety of utility functions, allowing JS(TS) programmers to write code in a more functional style, similar to languages like Haskell. However, the functions are named using technical terminology from the FP field, which may not be familiar to everyone.

## Functional Programming in JavaScript

About a year ago, I just started to learn JavaScript, I watched [Anjana Vakil's Learning Functional Programming with JavaScript on JSUnconf](https://youtu.be/e-5obm1G_FY), and I thought that's all I need to know about FP (with JS).

I am currently working on a company project and feeling a bit annoyed at having to write functions imperatively. At the same time, I am reminded of the benefits of functional programming mentioned at the beginning of the article-- [Is it okay to Pursue Functional Programming on Frontend? by Minsu and Changhui on JSConf Korea](https://youtu.be/IqdvgzV_nms).

In the video, the speakers are using a library called [`fp-ts`](https://gcanti.github.io/fp-ts/), and I was fascinated by it. However, the documentation for that library is not easy for me to understand. There are tons of terms that categorize different aspects of the library, and I'm not familiar with many of them, which makes it challenging to use the library effectively.

I suggest watching the playlist of [Functional Programming with TypeScript](https://youtu.be/Z3PLwD3iebg) on YouTube. It should help for understanding FP and have your mind settled for reading the document of `fp-ts`.

In the document of `fp-ts`, it does provide a section-- "Learning Resources", which I highly recommend to read both the first article in these two series:

- [fp-ts recipes](https://grossbart.github.io/fp-ts-recipes/#/)
- [Practical Guide to Fp-ts | Ryan's Blog](https://rlee.dev/practical-guide-to-fp-ts-part-1)

Then I started to realize that most of the module names, like `State`, `Semigroup`, `Monad` in the library, points to some patterns, i.e they are technical terms. The problem is, from where the terms come, and is there a dictionary to refer to? Yes, at least from my PoV it should be:

- [Fantasy Land Specification](https://github.com/fantasyland/fantasy-land)

If you have followed through my writings above, thank you. Do you have a feeling that we have not even written any code but put a lot of effort into explaining what functional programming is, and how we can use a library like `fp-ts` to empower JavaScript and TypeScript to work more like a functional language such as Haskell?

What came to my mind is that while I am excited to learn more about functional programming, I may not be able to introduce it to my current project. Convincing my colleagues to spend time learning the technical terms and concepts involved in functional programming may be challenging, especially when we have project sprints to complete.

## lodash/fp

Due to the cost of the knowledges required for using `fp-ts`, I turn out to bring `lodash/fp` to my project and see the benefits:

- I'm more careful about the flow of my functions
- writing less repetitive code that uses the same logic over and over again 

Here I hard coded an [imperative-todolist-vue](https://codesandbox.io/p/sandbox/todolist-vue-9ce10s?file=%2Fpackage.json%3A1%2C1), which I will use as an example for implement functions with the methods from `lodash/fp` in the next article.