Functional Programming in JavaScript

What is functional programming?

Functional Programming is all about deconstructing a problem into small and reusable functions that take an input and return a result. This allows them to operate in a way that does not mutate or change the data that is passed to them.

In functional programming data is not mutated once assigned.

What is the benefit to writing functional components?

Functional programming relies on the principle of immutable data structures to empower it’s functions and components to fulfil highly specialized use cases. There are a lot of benefits to composing functions in this manner. functional programming components tend to be more concise, easier to debug, easier to test, and more scalable. This is because we can make many function calls in parallel and take advantage of multicore CPU’s.

Is JavaScript a purely functional language?

There are many functional programming languages such as Clojure, Elm, and Haskell to name a few. JavaScript on the other hand, is not a purely functional programming language. This is because JavaScript allows programmers to update and change variables, arrays, and objects as they please without having to declare a new value for them like so…

Just because JavaScript is not a purely functional programming language, however that does not mean that we can not write functional code using JavaScript. But how is this done?

How can we write functional code inside JavaScript?

The first thing you have to understand when trying to write functional code in JavaScript is that functions are treated as first class citizens. This means that we can treat them the same as any other variable. We can assign them to variables (1), pass them as arguments (2), or return them from functions (3) like so…

The second and third examples above are the cornerstone of functional programming with JavaScript. Being able to pass functions as arguments and return functions from other functions is exactly how we are able to create immutable data structures. But how? Consider the following example.

Let’s assume that we have a string that we want to trim and wrap inside a div element. If we were hard coding it we would do something like you see below.

As you can see this is not an immutable way to accomplish this task because input was mutated when we declared output. So how can we accomplish the same thing functionally? Well we can quite simply break the problem down into two small steps that accomplish the same result like so…

As you can see, by breaking the problem down into small functional components we were able to accomplish the same exact result in an immutable way. This allows our functions to be called and used on any string that we want to convert in this way. It also allows us to use the default value of input later on in our code if needed.

Conclusion

This was a simple example of immutability and functional programming in JavaScript. Although the code we wrote in our example is probably not very useful in real world cases the principles discussed enable us to write very powerful and dynamic functions that do not mutate data. Having a thorough grasp of functional programming will also enable you to better understand and work with immutable libraries (like Redux) and greatly improve your skills as a developer.