Pure Functions Lead to Testable Code

The function calculateTax is not a pure function, mainly because for calculating its logic it depends on the external environment. The function works, but it is very difficult to test. Let’s see the reason for this.

When the badFunction function is called it changes the global variable global to the value changed. Is it something to worry about? Yes. Imagine another function that depends on the global variable for its business logic. Thus, calling badFunction affects other functions’ behavior. Functions of this nature (i.e., functions that have side effects) make the code base hard to test. Apart from testing, these side effects will make the system behavior very hard to predict in the case of debugging.

So we have seen with a simple example how a pure function can help us in easily testing the code. Now we’ll look at other benefits we get out of pure functions: reasonable code.

Reasonable Code

Looking at this function name, we can easily reason that this function doubles the given number and nothing else. In fact, using our referential transparency concept, we can easily go ahead and replace the double function call with the corresponding result. Developers spend most of their time reading others’ code. Having a function with side effects in your code base makes it hard for other developers in your team to read. Code bases with pure functions are easy to read, understand, and test. Remember that a function (regardless of whether it is a pure function) must always have a meaningful name. For example, you can’t name the function double as dd given what it does.

Parallel Code

Pure functions allow us to run the code in parallel. As a pure function is not going to change any of its environments, this means we do not need to worry about synchronizing at all. Of course JavaScript doesn’t have real threads to run the functions in parallel, but what if your project uses WebWorkers for running multiple things in parallel? Or a server-side code in a node environment that runs the function in parallel?

Here we have moved the global variable as arguments for both the functions, making them pure. Now we can run both functions in parallel without any issues. Because the functions don’t depend on an external environment (global variable), we aren’t worried about thread execution order as with Listing 1-10.

This section shows us how pure functions help our code to run in parallel without any problems.

Cachable

The code in Listing 1-12 is relatively straightforward. Before calling our real function, we are checking if the result of that function with the corresponding ip is in the bookkeeping object. If yes, we are returning it, or else we are calling our original function and updating the result in our bookkeeping object as well. Did you see how easily we have made the function calls cachable by using less code? That’s the power of pure functions.

We will be writing a functional lib, which does the caching, or technical memorization, of our pure function calls later in the book.

Pipelines and Composable

This command does solve our problem via composing many functions. Composing is not only unique to UNIX/LINUX command lines; it is the heart of the functional programming paradigm. We call this functional composition in our world. Imagine these same command lines have been implemented in JavaScript functions. We can use them with the same principles to solve our problem.

Now think about another problem in a different way. You want to count the number of lines in text. How will you solve it? Ahaa! You got the answer. The commands are in fact a pure function with respect to our definition. It takes an argument and returns the output to the caller without affecting any of the external environments .

That’s a lot of benefits we are getting by following a simple definition. Before we close this chapter, we want to show the relationship between a pure function and a mathematical function. We tackle that next.

First Function

We can skip the function keyword to define functions. You can see we have used the => operator to define the function body. Functions created this way are called arrow functions. We use arrow functions throughout the book.

Now that the function is defined, we can execute it to see the result. Oh wait, the function we have created doesn’t have a name. How do we call it?

That’s our equivalent code in ES5. You can sense how it is much easier and more concise to write functions in the latest versions. There are two important points to note in the converted code snippets. We discuss them one after the other.

Strict Mode

In this section we discuss strict mode in JavaScript . We’ll see its benefits and why one should prefer strict mode.

Strict mode has nothing to do with the latest versions, but discussing it here is appropriate. As we have already discussed, strict mode was introduced to JavaScript language with ES5.

Simply put, strict mode is a restricted variant of JavaScript. The same JavaScript code that is running in strict mode can be semantically different from the code, which is not using strict mode. All the code snippets that don’t use strict in their JavaScript files are going to be in nonstrict mode.

In strict mode it’s going to be an error! That’s a good catch for our developers, because global variables are very evil in JavaScript. However, if the same code were run in nonstrict mode, then it wouldn’t have complained about the error.

Now as you can guess, the same code in JavaScript can produce different results whether you’re running in strict or nonstrict mode. Because strict mode is going to be very helpful for us, we will leave Babel to use strict mode while transpiling our ES8 codes.

Return Statement Is Optional

Thus here, if you have a function with only a single statement then it implicitly means that it returns the value. What about multiple statement functions? How we are going to create them?

Multiple Statement Functions

Run this function, and you will get the same result as before. Here, though, we have used multiple arguments to achieve the same behavior. Apart from that, notice that we have used the let keyword to define our value variable. The let keyword is new to the JavaScript keyword family. It allows you to declare variables that are limited to a particular scope of block, unlike the var keyword, which defines the variable globally to a function regardless of the block in which it is defined.

As you can see from the output, the variable declared via the let keyword is accessible only within the if block, not outside the block. JavaScript throws the error when we access a variable outside the block, whereas the variable declared with var doesn’t act that way. Rather, it declares the variable scope for the whole function. That’s the reason variable b can be accessed outside the if block.

Because block scope is very much needed going forward, we will be using the let keyword for defining variables throughout the book. Now let’s see how to create a function with arguments as the final section.

Function Arguments

Here we create a function called identity , which takes value as its argument and returns the same. As you can see, creating functions with arguments is the same as in ES5; only the syntax of creating the function is changed.

ES5 Functions Are Valid in ES6 and Above

Before we close this section, we need to make an important point clear. The functions that were written in ES5 are still valid in the latest version(s). It’s just a small matter that newer versions have introduced arrow functions, but that doesn’t replace the old function syntax or anything else. However, we will be using arrow functions throughout this book to showcase the functional programming approach.

Initial Setup

This command downloads the babel package called ES2017; the main aim of this package is to allow the latest ECMAScript code to run on the Node Js platform. The reason is that Node Js, at the time of writing this book, is not fully compatible with the latest features.

Once this command is run, you will be able to see a folder called node_modules created in the directory, which has the babel-preset-es2017 folder.

Now we are going to put all our functional library code into lib and use functional-playground to explore and understand our functional techniques.

Our First Functional Approach to the Loop Problem

As we have already discussed in Chapter 1, abstracting the operations into functions is one of the pillars of functional programming. Let’s abstract this operation into function, so that we can reuse it any time we need to rather than repeating ourselves in telling it how to iterate the loop.

We will call the forEach in our play.js file. How are we are going to call this function, which resides in a different file?

Gist on Exports

Gist on Imports

Running the Code Using Babel-Node

Let’s run our play.js file. Because we are using the latest version in our file, we have to use Babel-Node to run our code. Babel-Node is used to transpile our code and run it on Node js. Babel-Node should be installed along with babel-cli.

Creating Script in Npm

This will run the same as before.

Running the Source Code from Git

Once you check out the branch, you can run the playground file as before.

Understanding JavaScript Data Types

Every programming language has data types. These data types can hold data and allow our program to act on it. In this brief section, we introduce JavaScript data types.

Importantly, we also have our friend functions as a data type in JavaScript language. Because functions are data types like String, we can pass them around, store them in a variable, and so on. Functions are first-class citizens when the language permits them to be used as any other data type; that is, functions can be assigned to variables, passed around as arguments, and returned from other functions similarly as we do for String and Numbers data. In the next section we provide a quick example of what we mean by storing and passing functions around.

Storing a Function

This will execute the function that fn points to.

Passing a Function

Here we are checking whether the passed arg is of type function; if so, call it. Remember if a variable is of type function , it means it has a reference to a function that can be executed. That is the reason we are calling arg() if it enters an if statement in the code in Listing 3-3.

We have successfully passed a function dataFn to another function tellType , which has executed the passed function. It is that simple.

Returning a Function

We have seen how to pass a function to another function. Because functions are simple data in JavaScript, we can return them from other functions, too (like other data types).

In these sections we have seen functions that take other functions as their argument and have also seen examples of functions that do not return another function. Now it’s time to bring you to the definition of a higher order function: a function that receives the function as its argument, returns it as output, or both.

Abstraction Definitions

This text clearly gives the idea of abstraction. Abstraction allows us to work on the desired goal without worrying about the underlying system concepts.

Abstraction via Higher Order Functions

The preceding forEach function here has abstracted away the problem of traversing the array. The user of the forEach API does not need to understand how forEach has implemented the traversing part, thus abstracting away the problem.

Cool! An important point to note is that both forEach and forEachObject functions are higher order functions, which allow the developer to work on task (by passing the corresponding function), abstracting away the traversing part! Because these traversing functions are being abstracted away, we can test them thoroughly, leading to a concise code base. Let’s implement an abstracted way for handling control flows.

With this code we have abstracted away looping, and the condition checks into a simple and concise higher order function!

Having seen a few examples of higher order functions, it’s time to go one step further. In the upcoming section, we will discuss real-world higher order functions and how to create them.

every Function

Here we are simply iterating over the passed array and calling the fn by passing the current content of the array element at the iteration. Note that the passed fn should be returning a Boolean value. Then we use && to make sure all the contents of the array are obeying the criteria that are given by the fn.

The for..of loop is just an abstraction over our old for loop. As you can see here, the for..of has eliminated the traversing of an array by hiding the index variable, and so on. We have abstracted away for..of with every. It’s all about abstraction. What if the next version of JavaScript changes the way of for..of? We just need to change it in the every function. This is one of the most important advantages of abstraction.

some Function

Having seen both some and every function, let’s look at the sort function and how a higher order function plays an important role there.

sort Function

Here the compareFunction is optional. If the compareFunction is not supplied, elements are sorted by converting them to strings and comparing strings in Unicode code point order. You don’t need to worry about Unicode conversion in this section as we are more focused on the higher order functions. The important point to note here is that to compare the element with our own logic while sorting is performed, we need to pass our compareFunction. We can sense how the sort function is designed to be so flexible in such a way that it can sort any data in the JavaScript world, provided we pass a compareFunction. The sort function is flexible due to the nature of higher order functions!

Having known the algorithm for our compareFunction , can we do it better? Rather than writing the compareFunction every time, can we abstract away this logic into a function? As you can see in the preceding example, we wrote two functions each for comparing firstName and lastName with almost the same duplicate code. Let’s solve this problem with our higher order function. Now the function that we are going to design won’t take a function as its argument but rather return a function. (Remember HOC can also return a function.)

as before. Wow, that’s truly amazing! The sort function takes the compareFunction, which is returned by the sortBy function! That’s a lot of higher order functions floating around! Again we have abstracted away the logic behind compareFunction, leaving the user to focus on what he or she really needs. After all, a higher order function is all about abstractions.

Pause for a moment here, though, and think about the sortBy function. Remember that our sortBy function takes a property and returns another function. The returned function is what passed as compareFunction to our sort function. The question here is why the returned function carries the property argument value that we have passed.

Welcome to the world of closures! The sortBy function works just because JavaScript supports closures. We need to clearly understand what closures are before we go ahead and write higher order functions. Closures are the topic of the next chapter.

Remember, though, that we will be writing our real-world higher order function after explaining closures in the next chapter!

What Are Closures?

Yes, that’s exactly what a closure is. The function inner is called a closure function . Closure is powerful because of its access to the scope chains (or scope levels). We will discuss scope chains in this section.

What will be printed to the console when the inner function gets called? The value will be 5. This is mainly due to the first point. A closure function can access all the variables declared in its own declaration (see Point 1). No rocket science here!

Now when the inner function is executed, it does print the value global. Thus closures can access the global variable (see Point 2).

Now when the inner function executes, it does print the value outer. This looks reasonable, but it is a very important property of a closure. Closure has access to the outer function’s variable(s). Here outer function means the function that encloses the closure function. This property is what makes the closures so powerful!

Remembering Where It Is Born

In the previous section we saw what a closure is. Now we will be seeing a slightly complicated example, which explains yet another important concept in closure: closure remembering its context.

The code is simple. The innerFn is a closure function to fn and fn returns the innerFn when called. There is nothing fancy here.

How does calling closureFn print Visible and 5 to the console? What is happening behind the scenes? Let’s break it down.

As now you can guess, closureFn remembers its context (the scopes; i.e., outer and arg) when it is born in the second step. Thus the calls to console.log print appropriately.

You might be wondering what is the use case of closure?. We have already seen it in action in our sortBy function. Let’s quickly revisit it.

Revisiting sortBy Function

When we called the sortBy function like this:

Now because the returned function carries the value of property in its context, it will use the returned value where it is appropriate and when it is needed. With that explanation in place, we can fully understand closures and higher order functions that allow us to write a function like sortBy that is going to abstract away the inner details. Moving ahead to our functional world.

That’s a lot to take in for this section; in the next section we continue our journey of writing more abstract functions using closures and higher order functions.

tap Function

Because we are going to deal with lots of functions in the programming world, we need a way to debug what is happening between them. As we have seen in previous chapters, we are designing the functions, which take arguments and return another function, which again takes a few arguments, and so on.

Here the tap function takes a value and returns a function that has the closure over value and it will be executed.

As you can see in this example, the value value is fun gets printed and then the value fun is printed. This seems easy and straightforward.

This prints the value as expected, providing a simple yet powerful function in our toolkit.

unary Function

There is a default method in the array prototype called map . Don’t worry; we are going to discover numerous functions for arrays in the next chapter, where we will be seeing how to create our own map, too. For now, map is a function, which is very similar to the forEach function we have already defined. The only difference is that map returns the result of the callback function.

Oops! As you can see in this result, the array [1, NaN, NaN] is not what we expect. Here we need to convert the parseInt function to another function that will be expecting only one argument. How can we achieve that? Meet our next friend, the unary function. The task of the unary function is to take the given function with n arguments and convert it into a single argument.

We are checking if the passed fn has an argument list of size 1 (which we can find via the length property); if so, we are not going to do anything. If not, we return a new function , which takes only one argument arg and calls the function with that argument.

Here our unary function returns a new function (a clone of parseInt), which is going to take only one argument. Thus the map function passing index, arr argument, becomes unaffected as we are getting back the expected result.

The next two functions that we are going to see are special higher order functions that will allow the developer to control the number of times the function is getting called. They have a lot of use cases in the real world.

once Function

There are a lot of situations in which we need to run a given function only once. This scenario occurs for JavaScript developers in their day-to-day life, as they want to set up a third-party library only once, initiate the payment set up only once, do a bank payment request only once, and so on. These are common cases that developers face.

This once function takes an argument fn and returns the result of it by calling it with the apply method (a note on the apply method is given later). The important point to note here is that we have declared a variable called done and set it to false initially. The returned function will have a closure scope over it; hence it will access it to check if done is true, if return undefined else set done to true (thus preventing the next execution), and calling the function with necessary arguments.

This code snippet showcases that the doPayment function that is wrapped over once will be executed only once regardless of how many times we call them. The once function is a simple but effective function in our toolkit.

memoize Function

Nothing fancy here. We knew, though, that the factorial of the value 2 is 2, 3 is 6, and so on, mainly because we know the factorial function does work, but only based on its argument and nothing else. This question then arises here: Why can’t we store back the result for each input (some sort of an object) and give back the output if the input is already present in the object? Moreover for calculating the factorial for 3, we need to calculate the factorial for 2, so why can’t we reuse those calculations in our function? Well, that’s exactly what the memoize function is going to do. The memoize function is a special higher order function that allows the function to remember or memorize its result.

It is going to work the same way, but now much faster than before. While running fastFactorial, I would like you to inspect the lookupTable object and how it helps in speeding things up as shown in the preceding snippet. That is the beauty of the higher order function: closure and pure functions in action!

We have abstracted away many common problems into higher order functions that allowed us to write a solution with elegance and ease.

assign function

Object a will be intact with the preceding usage, because all the objects are merged into an empty object.

What if you do not want to upgrade to ES6 and yet you’re interested in getting object entries? The only way is to implement a functional method that does the same, such as we did earlier. Are you up for the challenge? If yes, I will leave that as an exercise for you.

We have now abstracted away many common problems into higher-order functions that allowed us to write an elegant solution with ease.

map

We have already seen how to iterate over the Array using forEach . forEach is a higher order function that is going to iterate over the given array and call the passed function with the current index as its argument. forEach hides away the common problem of iteration, but we cannot use forEach in all cases.

Imagine we want to square all the contents of the array and get back the result in a new array. How can we achieve this using forEach? Using forEach we cannot return the data; instead it just executes the passed function. That’s where our first projecting function comes into the picture, and it’s called map.

and returning the results from the function. Now is a good time to talk about the term projecting function. We mentioned earlier that the map function is a projecting function . Why do we call the map function that? The reason is quite simple and straightforward: Because map returns the transformed value of the given function, we call it a projecting function. Some people do call map a transforming function, but we are going to stick to the term projection.

All the functions that we are going to create in this chapter will be run for the given array of objects. Now suppose we need to get the array of an object that only has a title and author name in it. How are we going to achieve the same thing using the map function? Do you see a solution in your mind?

We do not always just want to transform all our array contents into a new one. Rather, we want to filter the content of the array and then perform the transformation. It is time now to meet the next function in the queue, filter.

filter

Imagine we want to get the list of books with ratings higher than 4.5. How we are going to achieve this? It is definitely not a problem for map to solve, but we need a function similar to map that just checks a condition, before pushing the results into the results array.

We are constantly improving the method to deal with arrays using these higher order functions. Before we go further with the next functions on the array, we are going to see how to chain the projection functions (map, filter) to get the desired results in complex situations.

concatAll

As you can see, the return data from our map function contains Array inside Array because our bookDetails itself is an array. Now if we pass these data to our filter, we are going to have problems, as filters cannot work on nested arrays.

Here we just pushed up the inner array while iterating into our results array.

We have seen how designing a higher order function within the world of the array does solve a lot of problems in elegant fashion. We have done a really good job up to now. We still have to see a few more functions with respect to arrays in the upcoming sections.

reduce Function

With this problem, we are reducing the array (which has several data) into a single value. We start with a simple accumulator ; in this case we call it as result to store our summation result while traversing the array itself. Note that we have set the result value to default 0 in case of summation. What if we need to find the product of all the elements in the given array? In that case we will be setting the result value to 1. This whole process of setting up the accumulator and traversing the array (remembering the previous value of accumulator) to produce a single element is called reducing an array.

We have made the changes to the reduce function so that now if initialValue is not passed, the reduce function will take the first element in the array as its accumulator value.

Because we are done iterating all our array content, the latest accumulator value will be returned, which is the result.

As you can see here, in this process we have abstracted away internal details into higher order functions, leading to elegant code. Before we close this chapter, let’s implement the zip function, which is another useful function.

zip Function

The task of the zip function is to merge two given arrays. In our example, we need to merge both apressBooks and reviewDetails into a single array, so that we have all necessary data under a single tree.

Once you get the minimum length, we call our passed higher order function fn with the current leftArr value and rightArr value.

Now clone gets a copy of what’s there in the book object. However, the important point to note is that clone is pointing to a separate reference. Adding or manipulating clone doesn’t change the real book reference itself. In JavaScript, objects are used by reference, so changing the book object by default within our zip function will affect the contents of bookDetails itself, which we don’t want to do.

Finally, we are returning it. Now you can apply the reduce function as before to solve the problem. zip is yet another small and simple function, but its uses are very powerful.

Unary Function

This function takes only one argument, x, so we can call it a unary function.

Binary Function

The add function takes two arguments, x,y; hence we call it a binary function.

As you can guess, there are ternary functions that take three arguments, and so on. JavaScript also allows a special type of function that we call a variadic function, which takes a variable number of arguments.

Variadic Functions

As you can see in the result, we were pointed to the first passed argument 1 and all other remaining arguments captured by our variadic variable that uses the ... rest argument! ES6 style is more concise as it clearly mentions that a function does take variadic arguments for processing.

Now that we have some common terms in mind with respect to functions, it’s time to turn our attention to the fancy term currying.

Currying Use Cases

A logger Function: Using Currying

Similarly, we can use the loggerHelper function for debug and warn messages. As you can tell, we are repeating the arguments, mainly mode and initialMessage , for all the calls. Can we do it better? Yes, we can do these calls better via currying. Can we use our curry function that is defined in the previous section? Unfortunately, no, because the curry function that we have designed can handle only binary functions, not a function like loggerHelper that takes four arguments.

Let us solve this problem and implement the fully functional curry function, which handles any function with n number of arguments.

Revisit Curry

which is exactly what we wanted! Thus, we get back the expected result from the function.

This line checks if the argument that is passed via ...args length and the function argument list length is less or not. If so we go into the if block, or else we fall back to call the full function as before.

which is going to yield the function’s full result!

Perfect! We have created our own curry function.

An important point to note is that our curry function is now converting a function of n arguments into a function that can be called as a unary function as the example shows.

Back to logger Function

That’s brilliant! We have seen how the curry function helps in the real world to remove a lot of boilerplates in function calls. Don’t forget to thank the closures concept, which is backing up the curry function. The debug module of the node uses the curry concept in its API (see https://github.com/visionmedia/debug ).

Finding a Number in Array Contents

Squaring an Array

As you can see in this example, we have created a new function, squareAll, that we can now use elsewhere in our code base. Similarly you can also do this for findEvenOfArray, findPrimeOfArray, and so on.

Partial Application

In this section we are going to see yet another function called partial that allows developers to apply the function arguments partially.

which will work as we needed it to. The problem is, though, we must create wrappers like setTimeoutWrapper, which will be an overhead. That’s where we can use partial application techniques.

Implementing partial Function

To fully understand how the partial application technique is working, we will be creating our own partial function in this section. Once the implementation is done, we will learn how to use our partial function with a simple example.

As you can see in those code snippet examples , our args point to the array as we would expect for setTimeout function calls. Once we have the necessary arguments in args, we call the function via fn.apply(null, args).

Currying vs. Partial Application

We have seen both techniques , so the question is when to use which one. The answer depends on how your API is defined. If your API is defined as map,filter, then we can easily use the curry function to solve our problem. As discussed in the previous section, though, life is not always easy. There could be functions that are not designed for curry such as setTimeout in our examples. In those cases, the best option would be to use partial functions. After all, we use curry or partial to make function arguments and function setup easy and more powerful.

It’s also important to note that currying will return nested unary functions; we have implemented curry so that it takes n arguments just for our convenience. It’s also a proven fact that developers need either curry or partial but not both.

Unix Philosophy

This is exactly what we are doing as part of creating our functions. Functions, as we have seen until now in this book, are supposed to take an argument and return data. Yes, functional programming does follow Unix philosophy.

That’s an interesting quote. What does it mean by “Expect the output of every program to become the input to another”? To make the point clear, let’s look at a few commands on a Unix platform that were built by following these philosophies.

That’s so simple. Another command called grep allows us to search for content in a given text. An important point to note is that the grep function takes an input and gives the output (again very similar to a function).

As our example shows, the grep command or a function receives the output of a cat command or a function. Here we have created a new function altogether without any effort by combining two existing base functions. Of course, here the | pipe acts as a bridge to connect the given two commands.

Let’s change our problem statement a bit. What if we want to count the number of occurrences of the word world in a given text file? How we can achieve it?

We would be able to compose a new function with the help of |. As this chapter shows, we will be building our own compose function in JavaScript, which does the same job of | in the Unix and Linux world.

Now we have the idea of composing functions from base functions. The real advantage of composing functions is that we can combine our base function to solve the problem at hand, without re-creating a new function.

Revisiting map,filter

In Chapter 5, we saw how to chain the data from a map and filter to solve the problem at hand. Let’s quickly revisit the problem and the solution.

The code to achieve the solution tells an important point. The data from our filter function is passed into the map function as its input argument. Yes, you have guessed it correctly: Does it sound like the same problem we solved in the previous section using | in the Unix world? Can we do the same thing in the JavaScript world? Can we create a function that will combine two functions by sending the output of one function as an input to another function? Yes, we can! Meet the compose function.

compose Function

The compose function is simple and does what we need it to do. It takes two functions, a and b, and returns a function that takes one argument c. When we call the compose function by supplying the value of c, it will call the function b with input of c and the output of the function b goes into function a as input. That’s exactly what a compose function definition is.

Now let’s quickly test our compose function with a simple example before we dive into our running example from the previous section.

curry and partial to the Rescue

We know that we can compose two functions only if this function takes one input argument. That’s not always the case, though, as there can be functions that have multiple arguments. How are we going to compose those functions? Is there something we can do about it?

Now can we use the compose function to compose both map and filter with specifics to our example? Remember that both map and filter functions take two arguments: The first argument is the array and the second argument is the function to operate on that array. Therefore we cannot compose these two functions directly.

Let’s take some time to understand the position of the partial function in the current problem domain. As mentioned, the compose function can only compose a function that takes one argument. However, both filter and map take two arguments, so we cannot compose them directly.

We got back exactly what we wanted without compose, but the latest composed version titleAndAuthorForGoodBooks is much more readable and elegant in our opinion. You can sense the importance of creating small units of function that can be rebuilt using compose as per our needs.

How about getting only author names for books with ratings that equal 5? That should be easy, right? We leave it to you to solve this using the functions already defined and the compose function .

compose Many Functions

Currently our version of the compose function only composes two given functions. How about composing three, four, or n number of functions? Sadly, our current implementation doesn’t handle this. Let’s rewrite our compose function so that it can compose multiple functions on the fly.

Here we are first reversing the function array via fns.reverse() and passing the function as (acc, fn) => fn(acc), which is going to call each function one after the other by passing the acc value as its argument. Notably, the initial accumulator value is nothing but a value variable, which will be the first input to our function.

We got back the expected result. Go and play around with our new compose function!

Now we have a solid understanding of how to use the compose function to get what we need. In the next section, we are going to see the same concept of compose in a different way, called pipelines .

Implementing pipe

That’s it. Note that there is no more call on fns reverse functions as in compose, which means we are going to execute the function order as it is (from left to right).

The result is going to be the exact same; however, notice that we have changed the order of functions when we do piping. First, we call splitIntoSpaces and then count and finally oddOrEven.

Some people (who have knowledge of shell scripting) prefer pipes over compose. It’s just a personal preference and nothing to do with the underlying implementation. The takeaway is that both pipe and compose do the same thing, but with different data flow. You can use either pipe or compose in your code base, but not both, as it can lead to confusion among your team members. Stick to one style of composing.

Odds on Composition

In this section, we discuss two topics. The first is one of the most important properties of compose: Composition is associative. The second discussion is on how we debug when we compose many functions.

Let’s tackle one after the other.

The Pipeline Operator

One other way of composing or chaining base functions is by using the pipeline operator. The pipeline operator is like the Unix pipe operator we saw earlier. The new pipeline operator is intended to make the chained JavaScript functions’ code more readable and extendible.

Let us see some examples of the pipeline operator.

That is more readable, isn’t it? Of course, it is easier to read than the nested expressions, contains fewer or no parentheses, and has less indentation. Remember at this point it only works on unary functions, functions with only one argument.

Once again, this operator just a syntactic alternative; the code behind the curtains remains the same, so it is a matter of choice for the developer. However, this pattern saves a few keystrokes by eliminating the effort to name intermediate variables. The GitHub repository for this pipeline operator is https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-pipeline-operator .

Debugging Using the tap Function

We have used the compose function quite a lot in this chapter. The compose function can compose any number of functions. The data are going to flow from left to right in a chain until the full function list is evaluated. In this section, we teach you a trick that allows you to debug the failures on compose.

That is going to print the input argument that the count function is going to receive. This simple function can be very helpful in debugging what data a function does receive.

Functor Is a Container

Now that we have defined that the functor is nothing but a Container that can hold the value, let’s revisit the definition of a functor.

Functor is a plain object (or type class in other languages) that implements the function map while running over each value in the object to produce a new object.

It looks like functor needs to implement a method called map. Let’s implement that method in the next section.

Implementing map

Before we implement the map function, let’s pause here and think about why we need the map function in the first place. Remember that we created Container that just holds the value we pass into it. Holding the value hardly has any use, though, and that is where the map function comes into place. The map function allows us to call any function on the value that is being currently held by the Container.

The map function takes the value out of the Container , applies the passed function on that value, and again puts the result back in the Container. Let’s visualize using the image shown in Figure 8-1.

Now that we have defined it, you might be wondering what functor is useful for. We are going to answer that in the next section.

Implementing MayBe

Now it’s time to see MayBe in action.

Simple Use Cases

Now our code doesn’t explode in null or undefined values as we have wrapped our value in the type safety container MayBe. We are now handling the null values in a declarative way.

as expected.

the second map will be called always (i.e., the chained maps to any level will be called always); it is just that the next map function in the chain returns undefined (as the previous map returns undefined/null), without applying the passed function. This process is repeated until the last map function call is evaluated in the chain.

Real-World Use Cases

From the response we need to return the array of JSON object that has the URL and title in it. Remember that if we pass an invalid subreddit type such as test to our getTopTenSubRedditPosts, it will return an error response that does not have a data or children property.

without throwing any error. Even though our map function tries to get the data from the response (which is not present in this case), it returns MayBe.of(null) , so the corresponding maps would not apply the passed function, as we discussed earlier.

We can clearly sense how MayBe handled all the undefined/null errors with ease. Our getTopTenSubRedditData looks so declarative.

That’s all about the MayBe Functor. We are going to meet another functor in the next section called Either.

Implementing Either

You might be wondering what the usefulness of Some or Nothing are. To understand this, let’s revisit our Reddit example version of MayBe.

Reddit Example Either Version

This code is just literally the MayBe version, but it’s just not using MayBe; rather it’s using Either’s type.

This is so brilliant. Now with Either types in place, we get back the exact reason why our branching failed. As you can guess, getTopTenSubRedditPostsEither returns Nothing in case of an error (i.e., unknown Reddit type); hence the mappings on getTopTenSubRedditDataEither will never happen because it is of type Nothing. You can sense how Nothing helped us in preserving the error message and also blocking the functions to map over.

That’s all about Either .