Pure Functions Lead to Testable Code

Functions that are not pure have side effects. Take our previous tax calculation example (Listing 1-1):

var percentValue = 5;
var calculateTax = (value) => { return value/100 * (100 + percentValue) } //depends on external environment percentValue variable

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

Imagine we are planning to run a test for our calculateTax function three times for three different tax calculations. We set up the environment like this:

calculateTax(5) === 5.25

calculateTax(6) === 6.3

calculateTax(7) === 7.3500000000000005

The entire test passes! But hold on, since our original calculateTax function depends on the external environment variable percentValue, things can go wrong. Imagine the external environment is changing the variable percentValue while you are running the same test cases:

calculateTax(5) === 5.25

// percentValue is changed by other function to 2
calculateTax(6) === 6.3  //will the test pass?

// percentValue is changed by other function to 0
calculateTax(7) === 7.3500000000000005 //will the test pass or throw exception?

As you can see here the function is very hard to test. However we can easily fix the issue, by removing the external environment dependency from our function, leading the code to this:

var calculateTax = (value, percentValue) => { return value/100 * (100 + percentValue) }

Now you can test the above function without any pain! Before we close this section, we need to mention an important property about Pure function, which is “Pure Function also shouldn’t mutate any external environment variables.”

In other words, the pure function shouldn’t depend on any external variables (like shown in the example) and also change any external variables. We’ll not take a quick look what we meant by changing any external variables. For example, consider the following code in Listing 1-9:

Listing 1-9. BadFunction Example

var global = "globalValue"
var badFunction = (value) => { global = "changed"; return value * 2 }

When ‘badfunction’ function is called it changes the global variable ‘global’ to value ‘changed’. Is it something to worry about? Yes! Imagine another function that depends on ‘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 case of debugging!

So we have seen with simple example of how a pure function can help us in easy testing the code. Now we’ll look at other benefits we get out of Pure Functions – Reasonable Code.

Reasonable Code

As developers we should be good at reasoning about the code or a function. By creating and using Pure functions we can achieve that very simply. To make this point clearer, we are going to use a simple example of function double (from Listing 1-8):

var double = (value) => value * 2

By 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 in reading others’ code. Having a function with side effects in your code base is hard to read for other developers in your team. Code base with pure functions are easy to read, understand, and test. Remember that a function (regardless if it’s pure function) must always have a meaningful name. With that said, you can’t name function ‘double’ as ‘dd’ given what it does.

First Function

We will define our first simple function in ES6. The simplest function one can write in ES6 is as follows (Listing 2-1):

Listing 2-1. A Simple Function

 () => "Simple Function"

If you try to run this function in babel-repl, you can see the result as:

[Function]

function () => "Simple Function"

Yeah, that’s it – we have function! Take a moment to analyze the above function. Let’s split them:

() => "Simple Function"

//where () represents function arguments
//=> starts the function body/definition
//content after => are the function body/definition.

In ES6 we can skip the function keyword to define functions. You can see we have used => operator to define the function body. Functions created this way in ES6 are called Arrow Functions. We will be using 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. Then how do I call it?

Let’s assign a name for it as shown in Listing 2-2:

Listing 2-2. A Simple Function with Name

var simpleFn = () => "Simple Function"

Since we now have access to the function simpleFn we can use this reference to execute the function:

simpleFn()
//returns "Simple Function" in the console

That’s great! We have created a function and also executed it in ES6.

We can see how the same function looks alike in ES5. We can use babel to convert our code into ES5, using the following command:

babel simpleFn.js --presets babel-preset-es2015 --out-file                     script-compiled.js                                                  

This will generate the file called the script-compiled.js in your current directory. Now open up the generated file in your favorite editor:

"use strict";

var simpleFn = function simpleFn() {
  return "Simple Function";
};

That’s our equivalent code in ES5! You can sense how it’s much easier and concise to write functions in ES6! Don’t you? There are two important points to note in the converted code snippets. We will discuss them one after the other.

Strict Mode

In this section we will discuss “Strict Mode ” in JavaScript. We’ll see its benefits and why one should prefer “Strict Mode.”

You can see that the converted code runs in the strict mode, as shown here:

"use strict";                  

var simpleFn = function simpleFn() {
  return "Simple Function";
};

Strict modes have nothing to do with ES6, but discussing them here is the right choice. As we have already discussed in the ECMAScript History section, strict mode was introduced to the JavaScript language at 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. All the code snippets, which don’t add the use strict in their js files, are going to be in non-strict mode.

Why should we use strict mode? What are the advantages? There are many advantages of using strict mode style in the world of JavaScript. One simple thing is if you are defining a variable in global state (i.e., without specifying var command) like this:

"use strict";                  

globalVar = "evil"

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 non-strict 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 non-strict mode. Since strict mode is going to be very helpful for us, we will leave Babel to use strict mode while transpiling our ES6 codes.

Return Statement Is Optional

In ES5 converted code snippet, we saw that Babel adds the return statement in our simpleFn.

"use strict";

var simpleFn = function simpleFn() {
  return "Simple Function";
};

Where as in our real ES6 code, we didn’t specify any return statement:

var simpleFn = () => "Simple Function"

Thus in ES6, 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 in ES6?

Multiple Statement Functions

Now we are going to see how to write multiple statement functions in ES6. Let’s make our simpleFn a bit more complicated as follows in Listing 2-3:

Listing 2-3. Multistatement Function

var simpleFn = () => {            
   let value = "Simple Function"
   return value;
} //for multiple statement wrap with { }                

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

To make the point concrete, we can write the same function with var and the let keyword, inside an if block as shown in Listing 2-4.

Listing 2-4. SimpleFn with var and let Keywords

var simpleFn = () => { //function scope
   if(true) {
      let a = 1;
      var b = 2;
      console.log(a)
      console.log(b)
   } //if block scope
   console.log(b) //function scope
   console.log(a) //function scope
}

Running this function gives the following output:

1
2
2
Uncaught ReferenceError: a is not defined(...)

As you can see from the output, the variable declared via let keyword is accessible only within the if block not outside the block. As you notice, JavaScript throws the error when we access the variable a variable outside the block! But whereas the variable declared with var when 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.

Since block scope is very much needed going further, 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

Creating functions with arguments is the same as in ES5. Look at a quick example as follows (Listing 2-5):

Listing 2-5. Function with Argument

var identity = (value) => value

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 are the same as ES5; only the syntax of creating the function is changed.

ES5 Functions Are Valid in ES6

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

Initial Setup

In this section, we will be following a simple step-by-step guide to set up our environment. The steps are as follows:

1. The first step is to create a directory where our source code is going to be. Create a directory and name it whatever you want.

2. Go into that particular directory and run the following command from your terminal:

   npm init

3. After running step 2, it will be asking you a set of questions; you can provide the value you want. Once it’s done, it will create a file called pacakage.json in your current directory.

The project package.json that I have created looks like this as shown here in Listing 2-6:

Listing 2-6. Package.json Contents

{
  "name": "learning-functional",
  "version": "1.0.0",
  "description": "Functional lib and examples in ES6",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Anto Aravinth @antoaravinth",
  "license": "ISC"
}

Now we need to add a few libraries, which will allow us to write ES6 code and execute them. Run the following command in the current directory:

npm install --save-dev babel-preset-es2015-node5

The above command downloads the babel package called ES2015-Node5; the main aim of this package is to allow ES6 code to run on Node Js platform. The reason is that Node Js, at the time of writing this book; is not fully compatible with ES6 features.

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

Since we have used --save-dev while installing, npm does add the corresponding babel dependencies to our package.json. Now if you open your package.json, it looks like this:

Listing 2-7. After Adding the devDependencies

{
  "name": "learning-functional",
  "version": "1.0.0",
  "description": "Functional lib and examples in ES6",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Anto Aravinth @antoaravinth>",
  "license": "ISC",
  "devDependencies": {            
    "babel-preset-es2015-node5": "^1.2.0",            
    "babel-cli": "^6.23.0"            
  }            
}

Now that this is in place, we can go ahead and create two directories called lib and functional-playground. So now your directory looks like the following:

learning-functional
  - functional-playground
  - lib
  - node_modules
    - babel-preset-es2015-node5/*
  - package.json

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

Our First Functional Approach to the Loop Problem

Imagine we have to iterate through the array and print the data to the console. How do we achieve this in JavaScript?

Listing 2-8. Looping an Array

var array = [1,2,3]
for(i=0;i<array.length;i++)
    console.log(array[i])

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

Create a file called es6-functional.js in lib directory. Our directory structure looks like this:

learning-functional
  - functional-playground
  - lib
    - es6-functional.js            
  - node_modules
    - babel-preset-es2015-node5/*
  - package.json

Now with that file in place, go ahead and place the below content into that file:

Listing 2-9. forEach Function

const forEach = (array,fn) => {
   let i;
   for(i=0;i<array.length;i++)
      fn(array[i])
}

You might notice that we have started with a keyword const for our function definition. This keyword is part of ES6, which makes the declaration constant. For example, if someone tries to reassign the variable with the same name like this:

forEach = "" //making your function as string!

The above code will throw an error like this:

TypeError: Assignment to constant variable.

This will prevent it from being accidently reassigned! Now we’ll go and use the above created function to print all the data of the array to the console. In order to do that, create a file called play.js function in functional-playground directory. So now the current file looks like:

learning-functional
  - functional-playground
     - play.js            
  - lib
    - es6-functional.js
  - node_modules
    - babel-preset-es2015-node5/*
  - package.json

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

Gist on Exports

ES6 also introduced the concept called modules. ES6 modules are stored in files. In our case we can think of es6-functional.js file itself as a module. Along with the concept of modules came imports and exports statements. In our running example, we have to export the forEach function so that others can use them. So that we can change the following code into

Listing 2-10. Exporting forEach Functionconst forEach = (array,fn) => {

   let i;
   for(i=0;i<array.length;i++)
      fn(array[i])
}
export default forEach                

in our es6-functional.js file.

Gist on Imports

Now that we have exported our function as you can see in Listing 2-10, let’s go and consume it via import! Open the file play.js and add the following into it as shown in Listing 2-11:

Listing 2-11. Importing forEach Function

import forEach from '../lib/es6-functional.js'

The above line tells JavaScript to import the function called forEach from es6-functional.js. Now the function is available to the whole file with the name forEach. Now add the code into play.js like this as shown here in Listing 2-12:

Listing 2-12. Using the Imported forEach function

import forEach from '../lib/es6-functional.js'
var array = [1,2,3]                
forEach(array,(data) => console.log(data)) //refereing to imported forEach                

Running the Code Using Babel-Node

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

So from our project root directory, we can call the babel-node like this:

babel-node functional-playground/play.js --presets es2015-node5

The above command tells us that our play.js file should be transpiled with es2015-node5 and run into node js. This should give the output as follows:

1
2
3

Hurray! Now we have abstracted out for logic into a function. Imagine you want to iterate and print the array contents with multiples of 2. How will we do it? Super simple – reuse our forEach:

forEach(array,(data) => console.log(2 * data))

which will print the output as expected!

Creating Script in Npm

We have seen how to run our play.js file. But it’s lot to type! Each time we need to run the following:

babel-node functional-playground/play.js --presets es2015-node5

Rather than this, we can bind the following command to our npm script. We will change the package.json accordingly:

Listing 2-13. Adding npm Scripts to package.json

{
  "name": "learning-functional",
  "version": "1.0.0",
  "description": "Functional lib and examples in ES6",
  "main": "index.js",
  "scripts": {
    "playground" : "babel-node functional-playground/play.js --presets es2015-node5"            
  },
  "author": "Anto Aravinth @antoaravinth",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015-node5": "^1.2.0"
  }
}

Now we have added the babel-node command to scripts. So we can run our playground file (node functional-playground/play.js) as follows:

npm run playground

which will run the same as before.

Running the Source Code from Git

Whatever we are discussing in the chapter will go into a git repository ( https://github.com/antoaravinth/functional-es6 ). You can clone them into your system using git like this:

git clone https://github.com/antoaravinth/functional-es6.git

Once you clone the repo, you can move into a specific chapter source code branch. Each chapter has its own branch in the repo. For example, in order to see the code samples used in Chapter 2, then you need to do this:

git checkout -b chap02 origin/chap02

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 upon it. In this little section, we will be seeing JavaScripts’ data types.

In a nutshell, JavaScript as a language supports the following data types:

• .Numbers

• .Strings

• .Booleans

• .Objects

• .null

• .undefined

and importantly, we also have our friend functions as a data type in JavaScript language. Since functions are data types like String, we can pass them around, store them in a variable, etc., very similarly as we do for String and Numbers data types.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 can be returned from other functions. In the next section we will see a quick example of what we mean by storing and passing functions around.

Storing a Function

As mentioned in the previous section, functions are nothing but data. Since it’s data, we can hold them in a variable! The below code (Listing 3-1) is literally a valid code in JavaScript context:

Listing 3-1. Storing a Function to Variable

let fn = () => {}

In the above code snippet, fn is nothing but a variable that is pointing to a data type function. We can quickly check that fn is of type function by running the following:

typeof fn
=> "function"

Since fn is just a reference to our function, we can call it like this:

fn()

the above will execute the function that fn points to.

Passing a Function

As day-to-day JavaScript programmers, we know how to pass data to a function. Consider the following function (Listing 3-2), which takes an argument and consoles the type of the argument:

Listing 3-2. tellType Function

var tellType = (arg) => {
        console.log(typeof arg)
}

One can pass the argument to tellType function to see it in action:

let data = 1
tellType(data)
=> number

Nothing fancy here. As seen in the previous section, we can store even functions in our variable (as functions in JavaScript are data). So how about passing a variable that has reference to a function? Let’s quickly check it:

var dataFn = () => {
        console.log("I'm a function")
}
tellType(dataFn)
=> function

That’s great! Now we will make our tellType to execute the passed argument as shown in Listing 3-3 if it’s of type function:

Listing 3-3. tellType Executes arg if It’s Function

var tellType = (arg) => {
   if(typeof arg === "function")
      arg()
   else
          console.log("The passed data is " + arg)
}

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 above code snippet.

Let’s execute our tellType function by passing our dataFn variable to it:

tellType(dataFn)
=> I'm a function

We have successfully passed a function dataFn to another function tellType, which has executed the passed function. That’s so simple.

Returning a Function

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

We’ll take a simple example of a function that returns another function as shown below in Listing 3-4:

Listing 3-4. Crazy Function Return String

let crazy = () => { return String }

String(“HOC”)
=> HOC

Note that our crazy function returns a function reference that is pointing to String function. Let’s go and call our crazy function:

crazy()
=> String() { [native code] }

As you can see, calling the crazy function returns a String function. Note that it just returns the function reference not executing the function. So we can hold back the returned function reference and call them like this:

let fn = crazy()
fn("HOC")
=> HOC

or even better like this:

crazy()("HOC")
=> HOC

//Fn => String
let crazy = () => { return String }

In these sections we have seen functions, which take other functions as its argument and have also seen examples on functions that do not return another function. Now it’s time to bring you to the higher-order function definition:

• A Higher-Order Function is a function that receives the function as its argument and/or returns them as outputs.

Abstraction Definitions

Wikipedia helps us in getting the definitions of Abstraction:

• In software engineering and computer science, abstraction is a technique for managing complexity of computer systems. It works by establishing a level of complexity on which a person interacts with the system, suppressing the more complex details below the current level. The programmer works with an idealized interface (usually well defined) and can add additional levels of functionality that would otherwise be too complex to handle.

and it also includes the following text (which is what we are interested in):

• For example, a programmer writing code that involves numerical operations may not be interested in the way numbers are represented in the underlying hardware (e.g. whether they're 16 bit or 32 bit integers), and where those details have been suppressed it can be said that they were abstracted away, leaving simply numbers with which the programmer can work.

The above text clearly gives the idea on abstraction. Abstraction allows us to work on the desired goal but not worrying about the underlying system concepts.

Abstraction via Higher-Order Functions

In this section we will see how higher-order functions help us to achieve the abstraction concept we discussed in the previous section. Here is the code snippet of our forEach function defined in the previous chapter (Listing 2-9):

const forEach = (array,fn) => {
        for(let i=0;array.length;i++)
                fn(array[i])
}

The above function forEach here has abstracted away the problem of traversing the array. The user of the API forEach doesn't need to understand how forEach have implemented the traversing part, thus abstracting away the problem.

. . .
     fn(array[i])              
. . .

forEach([1,2,3],(data) => {
       //data is passed from forEach function
       //to this current function as argument
})

forEach essentially traverses the array. What about traversing a JavaScript object? Traversing a JavaScript object has steps like this:

1. Iterate all the keys of the given object.

2. Identify that the key belongs to its own object.

3. Get the value of the key if step 2 is true.

Let’s abstract these steps into a higher-order function named forEachObject:

Listing 3-5. forEachObject Function Definition

const forEachObject = (obj,fn) => {
    for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                //calls the fn with key and value as its argument
                fn(property, obj[property])
            }
    }
}

Here they are in action:

let object = {a:1,b:2}
forEachObject(object, (k,v) => console.log(k + ":" + v))                                                                                          
=> a:1
=> b:1

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! And also since these traversing functions are being abstracted away, we can test them thoroughly, leading to a concise code base. We will be more functional about higher-order functions. Let’s go and implement an abstracted way for handling control flows.

For that, let us create a function called unless. Unless is a simple function, which takes a predicate (that should be either true or false); and if the predicate is false; call the fn as shown below here in Listing 3-6:

Listing 3-6. unless Function Definition

const unless = (predicate,fn) => {
        if(!predicate)
                fn()
}

With the unless function in place, we can go and write a concise piece of code to find the list of even numbers. The code for it looks like this:

forEach([1,2,3,4,5,6,7],(number) => {
        unless((number % 2), () => {
                console.log(number, " is even")
        })
})

The above code when executed is going to print the following:

2 ' is even'
4 ' is even'
6 ' is even'

In the above case we are getting the even numbers from the array list. What if we want to get the list of even numbers from, say, 0 to 100? We can't use forEach here (of course we can, if we have the array that has [0,1,2.....,100] content). Let’s meet another higher-order function called times. Times is yet another simple higher-order function, which takes the number and calls the passed function as many times as the caller mentioned. The times function looks like what is shown here in Listing 3-7:

Listing 3-7. times Function Definition

const times = (times, fn) => {
  for (var i = 0; i < times; i++)
        fn(i);
}

Times function looks very similar to the forEach function; it’s just that we are operating on a Number rather than an Array. Now with the times function in place, we can go ahead and solve our problem in hand like this:

times(100, function(n) {
  unless(n % 2, function() {
    console.log(n, "is even");
  });
});

That’s going to print our expected answer

0 'is even'
2 'is even'
4 'is even'
6 'is even'
8 'is even'
10 'is even'
. . .
. . .                                                                                                                                              
94 'is even'
96 'is even'
98 'is even'

With the above 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 into serious mode! In the upcoming section, we will be discussing the real-world higher-order functions and how to create them. So here we go.

every Function

Often as a JavaScript developer we need to check if the array of content is a number, custom object, or anything else. We usually write our typical for loop approach to solve these problems. But let’s abstract these away into a function called every. The every function takes two arguments: an array and a function. It checks if all the elements of the array are evaluated to true by the passed function. The implementation looks like this as shown in Listing 3-8:

Listing 3-8. every Function Definition

const every = (arr,fn) => {
    let result = true;
    for(let i=0;i<arr.length;i++)
       result = result && fn(arr[i])
    return result
}

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 do a && to make sure all the contents of the array are obeying the criteria that is given by the fn.

We need to quickly check that our every function works fine. Then pass on the array of NaN and pass fn as isNaN, which does check if the given number is NaN or not:

every([NaN, NaN, NaN], isNaN)
=> true
every([NaN, NaN, 4], isNaN)
=> false

Great. The every is a typical higher-order function that is easy to implement and at the same time it’s very useful, too! Before we go further, we need to make ourselves comfortable with the new for..of loop, which is a part of ES6 specifications. The for..of loops can be used to iterate the array elements. Let’s rewrite our ever function with for loop (Listing 3-9:

Listing 3-9. every Function with for-of loop

const every = (arr,fn) => {
    let result = true;
    for(const value of arr)
       result = result && fn(value)
    return result
}

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, etc. 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 biggest advantages of abstraction.

some Function

Similar to every function, we also have a function called some. The some works quite the opposite way of every function such that the some function returns true if either one of the elements in the array returns true for the passed function. The some function is also called as any function. In order to implement some function we use || rather than && :

Listing 3-10. some Function Definition

const some = (arr,fn) => {
    let result = false;
    for(const value of arr)
       result = result || fn(value)
    return result
}

With some function in place, we can go and check its result by passing the array’s like this:

some([NaN,NaN, 4], isNaN)
=>true
some([3,4, 4], isNaN)
=>false

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

sort Function

The sort is an in-built function that is available in the Array prototype of JavaScript. Suppose we need to sort a list of fruits:

var fruit = ['cherries', 'apples', 'bananas'];

you can simply call the sort function that is available on the Array prototype:

fruit.sort()
=> ["apples", "bananas", "cherries"]

That’s so simple. The sort function is a higher-order function that takes up a function as its argument, which will help the sort function to decide the sorting logic. Simply put, the signature of the sort function looks like this:

arr.sort([compareFunction])

Here the compareFunctionis 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 in order 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 on the JavaScript world, provided we pass a compareFunction. The sort function is flexible due to the nature of higher-order functions!

Before writing our compareFunction, let’s see what it should really implement. The compareFunction should implement the following logic as mentioned here : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Listing 3-11. Skeleton of compare Function

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

As a simple example, imagine we have a list of people:

var people = [
    {firstname: "aaFirstName", lastname: "cclastName"},
    {firstname: "ccFirstName", lastname: "aalastName"},
    {firstname:"bbFirstName", lastname:"bblastName"}
];                                                                      

Now we need to sort people using firstname key in the object, then we need to pass on our own compareFunction like this:

people.sort((a,b) => { return (a.firstname < b.firstname) ? -1 : (a.firstname > b.firstname) ? 1 : 0 })

which is going to return the following data:

 [ { firstname: 'aaFirstName', lastname: 'cclastName' },
  { firstname: 'bbFirstName', lastname: 'bblastName' },
  { firstname: 'ccFirstName', lastname: 'aalastName' } ]

Sorting with respect to lastname looks like this:

people.sort((a,b) => { return (a.lastname < b.lastname) ? -1 : (a.lastname > b.lastname) ? 1 : 0 })

will return:

[ { firstname: 'ccFirstName', lastname: 'aalastName' },
  { firstname: 'bbFirstName', lastname: 'bblastName' },
  { firstname: 'aaFirstName', lastname: 'cclastName' } ]

Hooking again into the logic of compareFunction:

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

Having known the algorithm for our compareFunction, can we do it better? Rather than writing the compareFunction every time, can we abstract away the above logic into a function? As you can see in the above 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 function as its argument but rather return a function. (Remember HOC can also return a function).

Let’s call this function sortBy, which allows the user to sort the array of objects based on the passed property as shown below in Listing 3-12:

Listing 3-12. sortBy function Definition

const sortBy = (property) => {
    return (a,b) => {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result;
    }
}

The sortBy function takes an argument named property and returns a new function that takes two arguments:

. . .
        return (a,b) => { }
. . .

The returned function has a very simple function body that clearly tells the compareFunction logic:

. . .
(a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
. . .

Imagine we are going to call the function with the property name firstname, and then the function body with the replaced property argument looks like the one below:

(a,b) => return (a['firstname'] < b['firstname']) ? -1 : (a['firstname'] > b['firstname']) ? 1 : 0;

That’s exactly what we did by manually writing a function. :) Here is our sortBy function in action:

people.sort(sortBy("firstname"))

will return:

[ { firstname: 'aaFirstName', lastname: 'cclastName' },
  { firstname: 'bbFirstName', lastname: 'bblastName' },
  { firstname: 'ccFirstName', lastname: 'aalastName' } ]

Sorting with respect to lastname looks like this:

people.sort(sortBy("lastname"))

returns:

[ { firstname: 'ccFirstName', lastname: 'aalastName' },
  { firstname: 'bbFirstName', lastname: 'bblastName' },
  { firstname: 'aaFirstName', lastname: 'cclastName' } ]

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!

But pause for a moment here 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 how come 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 will be the topic of the next chapter.

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

What Are Closures?

Simply put closure is an inner function. So what is an inner function? Well, its a function within an another function. Something like the following:

function outer() {
   function inner() {
   }
}

Yes, thats exactly what a closure is. The function inner is called a closure function. The reason why closure is so powerful is because of its access to the scope chains (or scope levels). We will be talking about scope chains in this section.

Technically the closure has access to three scopes:

1. Variables that are declared in its own declaration

2. Access to the global variables.

3. Access to the outer function's variable (interesting!)

Lets talk about theses three points separately with simple example. Consider the following snippet:

function outer() {
   function inner() {
        let a = 5;
        console.log(a)
   }
   inner() //call the inner function.
}

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

Now modifying the above code snippet to the following:

let global = "global"
function outer() {
   function inner() {
        let a = 5;
        console.log(global)
   }
   inner() //call the inner function.
}

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

Points 1 and 2 are now clear with the example. The 3rd point is very interesting, the claim can be seen in the following code:

let global = "global"
function outer() {
   let outer = "outer"
   function inner() {
        let a = 5;
        console.log(outer)
   }
   inner() //call the inner function.
}

now when inner function executed, it does print the value outer. This looks reasonable, but its a very important property of a closure.

Closure has the access to the outer function's variable(s). Here outer function mean, the function which encloses the closure function.

This property is what make the closures so powerful!

Remembering Where It Is Born

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

Take a look at the following code:

var fn = (arg) => {
        let outer = "Visible"
        let innerFn = () => {
                console.log(outer)
                console.log(arg)
        }
        return innerFn
}

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

Lets play around with fn:

var closureFn = fn(5);
closureFn()

will print the following:

Visible
5

How does calling closureFn prints Visible and 5 to the console? What is happening behind the scenes? Lets break it down.

There are two steps happening in this case:

1. When the below line is called:

   var closureFn = fn(5);

   our fn gets called with argument 5. As per our fn definition, it returns the innerFn.

2. This where interesting things happens. When innerFn is returned, the javascript execution engine sees innerFn as a closure and sets its scope accordingly. As we have seen in the previous section, closures will have access to the 3 scope level. All these 3 scope level are set (arg, outer values will be set in scope level of innerFn) when the innerFn is returned! The returned function reference is stored in closureFn. Thus closureFn will have remember arg, outer values when called via scope chains!

3. When we finally call the closureFn:

   closureFn()

   it prints:

   Visible
   5

As now you can guess it out, closureFn remembers its context (the scopes i.e outer and arg) when it 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 them.

Revisiting sortBy Function

Let’s quickly revisit the sortBy function that we have defined and used in the previous chapter:

const sortBy = (property) => {
    return (a,b) => {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result;
    }
}                                                                      

When we called sortBy function like this:

sortBy("firstname")

this is what happened:

sortBy returned a new function that takes two argument like this:

(a,b) => { /* implementation */ }

Now we are comfortable with closures and we are aware that the returned function will have access to the sortBy function argument property. Since this function will be returned only when sortBy is called, the property argument is revolved with a value; hence the returned function will carry this context throughout its life:

//scope it carries via closure
property = "passedValue"
(a,b) => { /* implementation */ }

Now since 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! Now with that explanation in place, we can fully understand how 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 will be continuing our journey of writing more abstract functions using closures and higher-order functions.

tap Function

Since we are going to deal with lots of functions in functional 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 returns another function, which again takes a few arguments, etc., and so on.

Let’s design a simple function called tap:

const tap = (value) =>
  (fn) => (
    typeof(fn) === 'function' && fn(value),
    console.log(value)
  )

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

Let’s play around with the tap function:

tap("fun")((it) => console.log("value is ",it))
=>value is fun
=>fun

As you can see in the above example, the value ‘value is fun’ gets printed and then the value ‘fun’ is printed. Easy and straightforward.

So where can the tap function be used? Let’s imagine you are iterating an array that has data come from a server. You are iterating the array and you feel that the data is wrong so you want to debug and see what the array really contains, while iterating. How will you do that? Nope, don't be imperative, let’s be functional. This is where the tap function comes into the picture. For the current scenario, we can do this:

forEach([1,2,3],(a) =>
   tap(a)(() =>
     {
       console.log(a)
     }                                                                                                                          
   )
)

which does print the value as expected. A simple but 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 a whole lot of functional functions for array 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 defined. The only difference is that map returns the result of the callback function.

To get the gist of it, let’s say we want to double the array and get back the result; then using the map function, we can do like this:

[1, 2, 3].map((a) => { return a * a })
=>[1, 4, 9]

The interesting point to note over here is that the map calls the function with three arguments, which are element, index, and arr. Imagine we want to parse the array of strings to the array of int; we have an in-built function called parseInt that takes two argument parses and radixes and converts the passed parse into a number if possible. If we pass the parseInt to our map function, map will pass the index value to the radix argument of parseInt, which will result in unexpected behavior.

['1', '2', '3'].map(parseInt)
=>[1, NaN, NaN]

Oops! As you can see in the above 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, unary function. The task of unary function is to take the given function with n argument and convert it into a single argument.

Our unary function looks like the following:

const unary = (fn) =>
  fn.length === 1
    ? fn
    : (arg) => fn(arg)

We are checking if the passed fn has an argument list of size 1 (which we can find via 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.

To see our unary function in action, we can rerun our problem with unary:

['1', '2', '3'].map(unary(parseInt))
=>[1, 2, 3]

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, which 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 to 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, etc. These are common cases that the developers face.

In this section we are going to write a higher-order function called once, which will allow the developer to run the given function only once! Again the point to note over here is that we have keep on abstracting away our day-to-day activities into our functional toolkits!

const once = (fn) => {
  let done = false;

  return function () {
    return done ? undefined : ((done = true), fn.apply(this, arguments))
  }
}

The above once function takes an argument fn and returns the result of it by calling it with the apply method (note on the apply method is down below). 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 next time execution) and calling the function with necessary arguments.

With the once function in place, we can go and do a quick check of it.

var doPayment = once(() => {
   console.log("Payment is done")
})                                                                                                                                        

doPayment()
=>Payment is done

//oops bad, we are doing second time!
doPayment()
=>undefined!

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

Memoize Function

Before we close this exciting section, let’s see my favorite function called memoize. We know that the pure function is all about working on its argument and nothing else. They don't depend on the outside world for anything. The results of the pure function are purely based on its argument only. Imagine that we have a pure function called factorial, which calculates the factorial for the given number. The function looks like the following:

var factorial = (n) => {
  if (n === 0) {
    return 1;
  }

  // This is it! Recursion!!
  return n * factorial(n - 1);
}

You can quickly check that factorial function with a few inputs:

factorial(2)                                                                                                                          
=>2
factorial(3)
=>6

Nothing fancy here. But we knew 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! So the question 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? And 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? Yup, that's exactly what the memoize function is going to do. The memoize is a special higher-order function that allows the function to remember or memorize its result. :)

Let’s see how we can implement such a function in JavaScript. No worries; it is as simple as it looks - like the following:

const memoized = (fn) => {
  const lookupTable = {};

  return (arg) => lookupTable[arg] || (lookupTable[arg] = fn(arg));
}

Here in the above function we have a local variable called lookupTable that will be in the closure context for the returned function. This will take the argument and check if that argument is in the lookupTable :

. . lookupTable[arg] . .

if so return the value else, update the object with new input as key and result from fn as its value:

(lookupTable[arg] = fn(arg))

Perfect. Now we can go and wrap our factorial function into a memoize function to keep remembering its output:

let fastFactorial = memoized((n) => {
  if (n === 0) {
    return 1;
  }

  // This is it! Recursion!!
  return n * fastFactorial(n - 1);
})

Now go and call fastFactorial:

fastFactorial(5)
=>120                                                                                                  
=>lookupTable will be like: Object {0: 1, 1: 1, 2: 2, 3: 6, 4: 24, 5: 120}
fastFactorial(3)
=>6 //returned from lookupTable
fastFactorial(7)
=> 5040
=>lookupTable will be like: Object {0: 1, 1: 1, 2: 2, 3: 6, 4: 24, 5: 120, 6: 720, 7: 5040}

It is going to work the same way, but now much faster than before. While running the fastFactorial, I would like you to inspect the lookupTable object and how it helps in speeding things up as shown in the above snippet!

That is the beauty about 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 the solution with elegant and ease.

map

We have already seen how to iterate over the Array using forEach. forEach is a higher-order function, which 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 can't 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 we can achieve this using forEach? Using forEach we can't return the data; instead it just executes the passed function. And that’s where our first projecting function comes into the picture, and it’s called map.

Implementing map is an easy and straightforward task given that we have already seen how to implement forEach itself. The implementation of forEach looks like what is shown in Listing 5-1:

Listing 5-1. forEach Function Definition

const forEach = (array,fn) => {
   for(const value of arr)
      fn(value)
}

map function implementation looks like that below:

Listing 5-2. map Function Definition

const map = (array,fn) => {
        let results = []
        for(const value of array)
                  results.push(fn(value))

        return results;
}

The map implementation looks very similar to forEach; it’s just that we are capturing the results in a new array as:

. . .
        let results = []
. . .

and returning the results from the function. Now it’s a good time to talk about the word projecting function. We have mentioned earlier that the map function is a projecting function. Why do we call the map function so? The reason is quite simple and straightforward; since map returns the transformed value of the given function, we call them projecting functions. Of course, few people do call map a transforming function. But we are going to stick to the term projection (which I feel is very good!).

Now let’s go and solve the problem of squaring the contents of the array using our map function defined in Listing 5-2.

map([1,2,3], (x) => x * x)
=>[1,4,9]

As you can see in the above code snippet, we have achieved our task with simple elegance. Since we are going to create many functions, which are specifically to the Array type, we are going to wrap all the functions into a const called arrayUtils and export arrayUtils.

So it typically looks like the following (Listing 5-3):

Listing 5-3. Wrapping Functions into arrayUtils Object

//map function from Listing 5-2
const map = (array,fn) => {
  let results = []
  for(const value of array)
      results.push(fn(value))

  return results;
}

const arrayUtils = {
  map : map
}

export {arrayUtils}

//another file
import arrayUtils from 'lib'
arrayUtils.map //use map

//or

const map = arrayUtils.map
//so that we can call them map!

Perfect. In order to make the chapter examples more realistic, we are going to build an array of objects, which looks as shown below in Listing 5-4:

Listing 5-4. apressBooks Object Describing Book Details

let apressBooks = [
        {
                "id": 111,
                "title": "C# 6.0",
                "author": "ANDREW TROELSEN",
                "rating": [4.7],
                "reviews": [{good : 4 , excellent : 12}]
        },
        {
                "id": 222,
                "title": "Efficient Learning Machines",
                "author": "Rahul Khanna",
                "rating": [4.5],
                "reviews": []
        },
        {
                "id": 333,
                "title": "Pro AngularJS",
                "author": "Adam Freeman",
                "rating": [4.0],
                "reviews": []
        },
        {
                "id": 444,
                "title": "Pro ASP.NET",
                "author": "Adam Freeman",
                "rating": [4.2],
                "reviews": [{good : 14 , excellent : 12}]
        }
];

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

The solution is so simple using the map function , which looks like the following:

map(apressBooks,(book) => {
        return {title: book.title,author:book.author}
})

which is going to return the result as you would expect. The object in the returned array will be having only two properties: one is title and another one is author, as you have specified in your function:

[ { title: 'C# 6.0', author: 'ANDREW TROELSEN' },
  { title: 'Efficient Learning Machines', author: 'Rahul Khanna' },
  { title: 'Pro AngularJS', author: 'Adam Freeman' },
  { title: 'Pro ASP.NET', author: 'Adam Freeman' } ]

Not always do we just want to transform all our array contents into a new one. Rather we want to filter the content of array and then do the transformation!

Meet the next function in the queue called filter.

filter

Imagine we want to get the list of books whose rating is more than 4.5? How we are going to achieve this? Definitely not a problem for map to solve. But we need a similar to map, which just checks a condition, before pushing the results into the results array.

So first we’ll take another look at the map function (from Listing 5-2):

const map = (array,fn) => {
  let results = []
  for(const value of array)
      results.push(fn(value))

  return results;
}

Now here we need to check a condition or predicate before we do this:

. . .
        results.push(fn(value))
. . .

so let’s add that into a separate function called filter as shown in Listing 5-5:

Listing 5-5. filter Function Definition

const filter = (array,fn) => {
  let results = []
  for(const value of array)
     (fn(value)) ? results.push(value) : undefined

  return results;
}

Now with the filter function in place, we can solve our problem in hand like the following way:

filter(apressBooks, (book) => book.rating[0] > 4.5)

which is going to return you the expected result:

[ { id: 111,
    title: 'C# 6.0',
    author: 'ANDREW TROELSEN',
    rating: [ 4.7 ],
    reviews: [ [Object] ] } ]

That’s perfect! We are constantly improving the way to deal with arrays using these higher-order functions. Before we go further looking into the next functions on the array, we are going to see how to chain the projection function (map,filter) to get our desired results in complex situations.

concatAll

Let’s now tweak the apressBooksa bit, so that we have a data structure that looks like the following as shown in Listing 5-6:

Listing 5-6. Updated apressBooks Object with Book Details

let apressBooks = [
        {
                name : "beginners",
                bookDetails : [
                        {
                               "id": 111,
                               "title": "C# 6.0",
                               "author": "ANDREW TROELSEN",
                               "rating": [4.7],
                               "reviews": [{good : 4 , excellent : 12}]
                        },
                        {
                               "id": 222,
                               "title": "Efficient Learning Machines",
                               "author": "Rahul Khanna",
                               "rating": [4.5],
                               "reviews": []
                        }
                ]
        },
        {
            name : "pro",
            bookDetails : [
                        {
                               "id": 333,
                               "title": "Pro AngularJS",
                               "author": "Adam Freeman",
                               "rating": [4.0],
                               "reviews": []
                        },
                        {
                               "id": 444,
                               "title": "Pro ASP.NET",
                               "author": "Adam Freeman",
                               "rating": [4.2],
                               "reviews": [{good : 14 , excellent : 12}]
                        }
                ]
        }
];

Now let’s take up the same problem that we had in the previous section - to get the title and author for the books whose rating is above 4.5. We can start solving the problem by first mapping over data:

map(apressBooks,(book) => {
        return book.bookDetails
})

which is going to return us the value:

[ [ { id: 111,
      title: 'C# 6.0',
      author: 'ANDREW TROELSEN',
      rating: [Object],
      reviews: [Object] },
    { id: 222,
      title: 'Efficient Learning Machines',
      author: 'Rahul Khanna',
      rating: [Object],
      reviews: [] } ],
  [ { id: 333,
      title: 'Pro AngularJS',
      author: 'Adam Freeman',
      rating: [Object],
      reviews: [] },
    { id: 444,
      title: 'Pro ASP.NET',
      author: 'Adam Freeman',
      rating: [Object],
      reviews: [Object] } ] ]

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

And that’s where concatAll function comes in! The job of concatAll function is simple enough that it needs to concatenate all the nested arrays into a single array! You can also call concatAll as a flatten method. The implementation of concatAll looks like the following (Listing 5-7):

Listing 5-7. concatAll function Definition

const concatAll = (array,fn) => {
  let results = []
  for(const value of array)
     results.push.apply(results, value);

  return results;
}

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

The main goal of ‘concatAll’ is to un-nest the nested arrays into a single array. The below code explains the concept in action:

concatAll(
        map(apressBooks,(book) => {
                return book.bookDetails
        })
)

which is going to return us the result we expected:

[ { id: 111,
   title: 'C# 6.0',
   author: 'ANDREW TROELSEN',
   rating: [ 4.7 ],
   reviews: [ [Object] ] },
 { id: 222,
   title: 'Efficient Learning Machines',
   author: 'Rahul Khanna',
   rating: [ 4.5 ],
   reviews: [] },
 { id: 333,
   title: 'Pro AngularJS',
   author: 'Adam Freeman',
   rating: [ 4 ],
   reviews: [] },
 { id: 444,
   title: 'Pro ASP.NET',
   author: 'Adam Freeman',
   rating: [ 4.2 ],
   reviews: [ [Object] ] } ]

Now we can go ahead and easily do a filter with our condition like this:

let goodRatingCriteria = (book) => book.rating[0] > 4.5;
filter(
        concatAll(
                map(apressBooks,(book) => {
                        return book.bookDetails
                })
        )
,goodRatingCriteria)

which is going to return the expected value:

[ { id: 111,
   title: 'C# 6.0',
   author: 'ANDREW TROELSEN',
   rating: [ 4.7 ],
   reviews: [ [Object] ] } ]

Brilliant! We have seen how designing a higher-order function within the world of 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 Array in the upcoming sections.

reduce Function

In order to give a solid example of reduce function and where it’s been used, let’s look at the problem of finding the summation of the given array. To start with, suppose we have an array called ‘’:

let useless = [2,5,6,1,10]

We need to find the sum of the given above array, but how we can achieve that? A simple solution would be the following:

let result = 0;
forEach(useless,(value) => {
   result = result + value;
})
console.log(result)
=> 24

With the above 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. But what if we need to find the product of all the elements in the given array? In that case we will be setting up 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.

Since we are going to repeat the above process for all array-reducing operations, can’t we abstract away these into a function? You can – that’s where reduce function comes in. The implementation of our reduce function looks like the following shown in Listing 5-8:

Listing 5-8. reduce Function First Implementation

const reduce = (array,fn) => {
        let accumlator = 0;
        for(const value of array)
                accumlator = fn(accumlator,value)

        return [accumlator]
}

Now with reduce function in place, we can solve our summation problem using it like this:

reduce(useless,(acc,val) => acc + val)
=>[24]

Great. But what if we want to find a product of the given array? Our reduce function is going to fail, mainly due to the fact that we are using an accumulator value to 0. So our product result will be 0 too:

reduce(useless,(acc,val) => acc * val)
=>[0]

We can solve this by rewriting our reduce function from Listing 5-8 such that it takes an argument for setting up the initial value for the accumulator. Let’s do this right away in Listing 5-9:

Listing 5-9. reduce Function Final Implementation

const reduce = (array,fn,initialValue) => {
        let accumlator;

        if(initialValue != undefined)
                accumlator = initialValue;
        else
                accumlator = array[0];

        if(initialValue === undefined)
                for(let i=1;i<array.length;i++)
                        accumlator = fn(accumlator,array[i])
        else
                for(const value of array)
                accumlator = fn(accumlator,value)
        return [accumlator]
}

We have made the changes to our 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. Cool.

Now let’s try our product problem using the reduce function:

reduce(useless,(acc,val) => acc * val,1)
=>[600]

Now we’ll use reduce in our running example, apressBooks. Bringing apressBooks (updated in Listing 5-6 ) in here, for easy reference, we have this:

let apressBooks = [
        {
                name : "beginners",
                bookDetails : [
                        {
                                "id": 111,
                                "title": "C# 6.0",
                                "author": "ANDREW TROELSEN",
                                "rating": [4.7],
                                "reviews": [{good : 4 , excellent : 12}]
                        },
                        {
                                "id": 222,
                                "title": "Efficient Learning Machines",
                                "author": "Rahul Khanna",
                                "rating": [4.5],
                                "reviews": []
                        }
                ]
        },
        {
            name : "pro",
            bookDetails : [
                        {
                                "id": 333,
                                "title": "Pro AngularJS",
                                "author": "Adam Freeman",
                                "rating": [4.0],
                                "reviews": []
                        },
                        {
                                "id": 444,
                                "title": "Pro ASP.NET",
                                "author": "Adam Freeman",
                                "rating": [4.2],
                                "reviews": [{good : 14 , excellent : 12}]
                        }
                ]
        }
];

On a good day, your boss comes to your desk and asks you to implement the logic of finding the number of good and excellent reviews from our apressBooks. And you think, this is a perfect problem that can be solved easily via reduce function. Remember that our apressBooks contains array inside array (as we saw in the previous section), so we need to concatAll to make it a flat array. Since reviews are a part of bookDetails, we don't name a key, so we can just map bookDetails and concatAll in the following way:

concatAll(
        map(apressBooks,(book) => {
                return book.bookDetails
        })
)

Now let’s solve our problem using reduce:

let bookDetails = concatAll(
        map(apressBooks,(book) => {
                return book.bookDetails
        })
)

reduce(bookDetails,(acc,bookDetail) => {
        let goodReviews = bookDetail.reviews[0] != undefined ? bookDetail.reviews[0].good : 0
        let excellentReviews = bookDetail.reviews[0] != undefined ? bookDetail.reviews[0].excellent : 0
        return {good: acc.good + goodReviews,excellent : acc.excellent + excellentReviews}
},{good:0,excellent:0})

which is going to return the following result:

[ { good: 18, excellent: 24 } ]

Now let’s walk down the reduce function to see how this magic happened. The first point to note here is that we are passing an accumulator to an initialValue, which is nothing but:

{good:0,excellent:0}

In our reduce function body, we are getting the good and excellent review details (from our bookDetail object) and storing it in the corresponing variables namely, goodReviews and excellentReviews:

let goodReviews = bookDetail.reviews[0] != undefined ? bookDetail.reviews[0].good : 0
let excellentReviews = bookDetail.reviews[0] != undefined ? bookDetail.reviews[0].excellent : 0

With that in place, we can walk through our reduce function call trace to understand better what’s happening. For the first iteration, goodReviews and excellentReviews will be the following:

goodReviews = 4
excellentReviews = 12

and our accumulator will be the following:

{good:0,excellent:0}

as we have passed the initial line. Once reduce function executes the line:

  return {good: acc.good + goodReviews,excellent : acc.excellent + excellentReviews}

our internal accumulator value gets changed to:

{good:4,excellent:12}

And we are done with the first iteration of our array. In the second and third iterations, we don't have reviews; hence, both goodReviews and excellentReviews will be 0, but not affecting our accumulator value, which remains the same:

{good:4,excellent:12}

and in our final fourth iteration, we will be having goodReviews and excellentReviews as:

goodReviews = 14
excellentReviews = 12

and accumulator value being:

{good:4,excellent:12}

and now when we execute the line:

return {good: acc.good + goodReviews,excellent : acc.excellent + excellentReviews}

our accumulator value changes to:

{good:18,excellent:28}

Since we are done with iterating all our array content, the latest accumulator value will be returned, which is the result!

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

zip Function

The task of the zip function is to merge two given arrays. As with 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.

The implementation of zip looks like the following (Listing 5-12):

Listing 5-12. zip Function Definition

const zip = (leftArr,rightArr,fn) => {
        let index, results = [];

        for(index = 0;index < Math.min(leftArr.length, rightArr.length);index++)
                results.push(fn(leftArr[index],rightArr[index]));

        return results;
}

zip is a very simple function; we just iterate over the two given arrays. Since here we are dealing with two array details, we get the minimum length of the given two arrays using Math.min:

. . .
Math.min(leftArr.length, rightArr.length)
. . .

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

Suppose we want to add the two contents of the array, then we can do via zip like the following:

zip([1,2,3],[4,5,6],(x,y) => x+y)
=> [5,7,9]

Now let’s solve the same problem that we have solved in the previous section. Find the total count of good and excellent review for Apress collection. Since the data are split into two different structures, we are going to use zip to solve our current problem:

//same as before get the
//bookDetails
let bookDetails = concatAll(
        map(apressBooks,(book) => {
                return book.bookDetails
        })
)

//zip the results
let mergedBookDetails = zip(bookDetails,reviewDetails,(book,review) => {
  if(book.id === review.id)
  {
    let clone = Object.assign({},book)
    clone.ratings = review
    return clone
  }
})

Let us break down what’s happening in the zip function. The result of the zip function is nothing but the same old data structure we had, precisely, mergedBookDetails:

[ { id: 111,
    title: 'C# 6.0',
    author: 'ANDREW TROELSEN',
    rating: [ 4.7 ],
    ratings: { id: 111, reviews: [Object] } },
  { id: 222,
    title: 'Efficient Learning Machines',
    author: 'Rahul Khanna',
    rating: [ 4.5 ],
    reviews: [],
    ratings: { id: 222, reviews: [] } },
  { id: 333,
    title: 'Pro AngularJS',
    author: 'Adam Freeman',
    rating: [ 4 ],
    reviews: [],
    ratings: { id: 333, reviews: [] } },
  { id: 444,
    title: 'Pro ASP.NET',
    author: 'Adam Freeman',
    rating: [ 4.2 ],
    ratings: { id: 444, reviews: [Object] } } ]

The way we have arrived at this result is very simple; while doing the zip operation we are taking the bookDetails array and reviewDetails array. We are checking if both the ids match, and if so we clone a new object out of the book and call it a clone:

. . .
 let clone = Object.assign({},book)
. . .

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

So once we took up the clone, we added to it a ratings key with review object as its value:

clone.ratings = review

and 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 usages are very powerful.

unary Function

A function is called unary if it takes a single function argument. For example, function identity is a unary function:

Listing 6-1. unary Identity Function

const identity = (x) => x;

The above function (Listing 6-1) takes only one argument x, so we can call the above function as a unary function.

Binary Function

A function is called binary if it takes two arguments. For example, in Listing 6-2, function add is called a binary function:

Listing 6-2. binary add Function

const add = (x,y) => x + y;

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

And now as you can guess there are ternary functions that take three arguments and so on. But JavaScript does allow a special type of function that we call a variadic function, which takes a variable number of arguments.

variadic Functions

A variadic function is a function that takes a variable number of arguments. Remember that we had arguments in older versions of JavaScript, which we can use to capture the variable number of arguments?

Listing 6-3. variadic Function

function variadic(a){
        console.log(a);
        console.log(arguments)
}

if we call the function variadic like this:

variadic(1,2,3)
=> 1
=> [1,2,3]

As you can see in the above output (Listing 6-3), using arguments we are able to capture the additional arguments one could call on a function. Using this technique, we used to achieve the variadic functions in ES5 versions. However, starting with ES6, we have a new operator called Spread Operator that we can use to achieve the same result.

Listing 6-4. variadic Function Using Spread Operator

const variadic = (a,...variadic) => {
        console.log(a)
        console.log(variadic)
}

Now if we call the above function we get exactly what we would expect:

variadic(1,2,3)
=> 1
=> [2,3]

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 ... spread operator! ES6 style is more concise as it clearly mentions that a function does take variadic arguments for processing.

Now that we have some common terminologies in mind with respect to functions, it’s time to turn our attention into the fancy term Currying!

Currying Use Cases

To begin with, we’ll start simple. Imagine we have to create a function for creating tables. For example, we need to create tableOf2, tableOf3, tableOf4 and so on.

We can achieve the same via the following in Listing 6-6:

Listing 6-6. tables Function without Currying

const tableOf2 = (y) => 2 * y
const tableOf3 = (y) => 3 * y
const tableOf4 = (y) => 4 * y

with that in place, the functions can be called this:

tableOf2(4)
=> 8
tableOf3(4)
=> 12
tableOf4(4)
=> 16

Now you see that you can generalize the tables concept into a single function like this:

const genericTable = (x,y) => x * y

and then you can use genericTable to get tableOf2 like the following:

genericTable(2,2)
genericTable(2,3)
genericTable(2,4)

and the same for tableOf3 and tableOf4. But if you notice the pattern, we are filling up 2 in the first argument for tableOf2, 3 for tableOf3, and so on! Perhaps you are thinking that we can solve this problem via curry? Let’s build tables from genericTable using curry:

Listing 6-7. tables Function Using Currying

const tableOf2 = curry(genericTable)(2)
const tableOf3 = curry(genericTable)(3)
const tableOf4 = curry(genericTable)(4)

now you can do your testing with these curried version of tables:

console.log("Tables via currying")
console.log("2 * 2 =",tableOf2(2))
console.log("2 * 3 =",tableOf2(3))
console.log("2 * 4 =",tableOf2(4))

console.log("3 * 2 =",tableOf3(2))
console.log("3 * 3 =",tableOf3(3))
console.log("3 * 4 =",tableOf3(4))

console.log("4 * 2 =",tableOf4(2))
console.log("4 * 3 =",tableOf4(3))
console.log("4 * 4 =",tableOf4(4))

which is going to print the value we expect:

Table via currying
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
3 * 2 = 6
3 * 3 = 9
3 * 4 = 12
4 * 2 = 8
4 * 3 = 12
4 * 4 = 16

A logger Function - Using Currying

The previous section example helped you to understand what currying does. But let’s use a bit more complicated example in this section. As developers when we write code, we do a lot of logging at several stages of the application. We could write a helper logger function that looks like the following (Listing 6-8):

Listing 6-8. Simple loggerHelper Function

const loggerHelper = (mode,initialMessage,errorMessage,lineNo) => {
        if(mode === "DEBUG")
                console.debug(initialMessage,errorMessage + "at line: " + lineNo)
        else if(mode === "ERROR")
                console.error(initialMessage,errorMessage + "at line: " + lineNo)
        else if(mode === "WARN")
                console.warn(initialMessage,errorMessage + "at line: " + lineNo)
        else
                throw "Wrong mode"
}

and when any developer from our team needs to print an error to the console from Stats.js file, he/she can use the function like the following:

loggerHelper("ERROR","Error At Stats.js","Invalid argument passed",23)
loggerHelper("ERROR","Error At Stats.js","undefined argument",223)
loggerHelper("ERROR","Error At Stats.js","curry function is not defined",3)
loggerHelper("ERROR","Error At Stats.js","slice is not defined",31)

and 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 the above calls better via currying. Can we use our curry function that is defined in the previous section? Unfortunately no; the reason is the curry function that we have designed can handle only the binary functions, not a function like loggerHelper that takes 4 arguments.

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

Revisit Curry

We all know that we can curry (Listing 6-5 ) only a function. How about many functions? It’s simple but important to have it in our implementation of curry. Let’s add the rule first:

Listing 6-9. Revisting curry Function Definition

let curry =(fn) => {
    if(typeof fn!=='function'){
        throw Error('No function provided');
    }
};

With that check in place, if others call our curry function with an integer like 2, etc., they get back the error! That’s perfect! The next requirement to our curried function is that if anyone provided all arguments to a curried function, we need to execute the real function by passing the arguments. Let’s add that (Listing 6-10):

Listing 6-10. curry Function Handling Arguments

let curry =(fn) => {
    if(typeof fn!=='function'){
        throw Error('No function provided');
    }                                                                              

    return function curriedFn(...args){
      return fn.apply(null, args);
    };
};

Now if we have function called multiply:

const multiply = (x,y,z) => x * y * z;

we can use our new curry function like the following:

curry(multiply)(1,2,3)
=> 6
curry(multiply)(1,2,0)
=> 0

So let’s look at how it really works; we have added the logic in our curry function like this:

return function curriedFn(...args){
        return fn.apply(null, args);
};

The returned function is a variadic function, which returns the function result by calling the function via apply along by passing the args:

. . .
fn.apply(null, args);
. . .

With our curry(multiply)(1,2,3) example, args will be pointing to [1,2,3] and since we are calling apply on fn, it’s equivalent to:

multiply(1,2,3)

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

Now let us get back to the problem of converting the n argument function into a nested unary function (that’s the definition of curry itself)!

Listing 6-11. curry Function Converting n arg Function to unary Function

let curry =(fn) => {
    if(typeof fn!=='function'){
        throw Error('No function provided');
    }

    return function curriedFn(...args){

      if(args.length < fn.length){              
        return function(){              
          return curriedFn.apply(null, args.concat( [].slice.call(arguments) ));              
        };              
      }              

      return fn.apply(null, args);
    };
};

We have added the part:

if(args.length < fn.length){
        return function(){
          return curriedFn.apply(null, args.concat( [].slice.call(arguments) ));
        };
}

Let’s understand what’s happening in this piece of code, one by one:

args.length < fn.length

This particular 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.

Once we enter the if block, we used the apply function to call the curriedFn recursively like this:

curriedFn.apply(null, args.concat( [].slice.call(arguments) ));

The snippet:

args.concat( [].slice.call(arguments) )

is important. Using the concat function, we are concating the arguments that are passed one at a time and calling the curriedFn recursively. Since we are combining all the passed arguments and calling it recursively, we will meet a point in which the line:

 if (args.length < fn.length)

condition fails. As the argument list length (‘args’) and function argument length (fn.length) will be equal, thus skipping the if block and calling up:

return fn.apply(null, args);

which is going to yield the functions’ full result!

With that understanding in place, we can use our curry function to invoke the multiply function:

curry(multiply)(3)(2)(1)
=> 6

Perfect! We have created our own curry function.

let curriedMul3 = curry(multiply)(3)
let curriedMul2 = curriedMul3(2)
let curriedMul1 = curriedMul2(1)

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

Now let’s solve our logger function using the defined curry function. Bringing up the function here for easy reference (Listing 6-8):

const loggerHelper = (mode,initialMessage,errorMessage,lineNo) => {
        if(mode === "DEBUG")
                console.debug(initialMessage,errorMessage + "at line: " + lineNo)
        else if(mode === "ERROR")
                console.error(initialMessage,errorMessage + "at line: " + lineNo)
        else if(mode === "WARN")
                console.warn(initialMessage,errorMessage + "at line: " + lineNo)
        else
                throw "Wrong mode"
}

The developer used to call the function:

loggerHelper("ERROR","Error At Stats.js","Invalid argument passed",23)

Now let’s solve the repeating first two arguments problem via curry:

let errorLogger = curry(loggerHelper)("ERROR")("Error At Stats.js");
let debugLogger = curry(loggerHelper)("DEBUG")("Debug At Stats.js");
let warnLogger = curry(loggerHelper)("WARN")("Warn At Stats.js");

Now we can easily refer to the above curried functions and use them under the respective context:

//for error
errorLogger("Error message",21)
=> Error At Stats.js Error messageat line: 21

//for debug
debugLogger("Debug message",233)
=> Debug At Stats.js Debug messageat line: 233

//for warn
warnLogger("Warn message",34)
=> Warn At Stats.js Warn messageat line: 34

That’s brilliant! We have seen how curry function helps in the real world to remove a lot of boilerplates in function calls! Don't forget to say thanks to the closures concept, which is backing up the curry function.

Finding number in Array Contents

Imagine we want to find the array content that has a number. We can solve the problem via the following code snippet:

let match = curry(function(expr, str) {
  return str.match(expr);
});

The returned match function is a curried function. We can give the first argument expr a regular expression /[0-9]+/ that will indicate whether the content has a number in it.

let hasNumber = match(/[0-9]+/)

Now we will create a curried filter function:

let filter = curry(function(f, ary) {
  return ary.filter(f);
});

Now with hasNumber and filter in place, we can create a new function called findNumbersInArray:

let findNumbersInArray = filter(hasNumber)

Now you can test it:

findNumbersInArray(["js","number1"])
=> ["number1"]

That’s great!

squaring an Array

We know how to square contents of an array. We have also seen the same problem in previous chapters. We use map function and pass on square function to achieve the solution to our problem. But here we can use the curry function to solve the same problem in another way:

let map = curry(function(f, ary) {
  return ary.map(f);
});

let squareAll = map((x) => x * x)

squareAll([1,2,3])
=> [1,4,9]

As you can see in the above 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, etc.

Partial Application

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

Imagine we want to do a set of operations after every 10 ms. Using the setTimeout function, we can do this:

setTimeout(() => console.log("Do X task"),10);
setTimeout(() => console.log("Do Y task"),10);

As you can see, we are passing on 10 for every one of our setTimeout function calls. Can we hide that from the code? Can we use curry function to solve this problem? The answer is no. The reason is that the curry function applies the argument from the leftmost to rightmost lists! Since we want to pass on the functions as needed and keep 10 as a constant (which is most of the argument list), we can't use curry as such. One workaround is that we can wrap our setTimeout function so that the function argument becomes the rightmost one:

const setTimeoutWrapper = (time,fn) => {
  setTimeout(fn,time);
}

Then we can use our curry function to wrap our setTimeout to a 10-second delay:

const delayTenMs = curry(setTimeoutWrapper)(10)
delayTenMs(() => console.log("Do X task"))
delayTenMs(() => console.log("Do Y task"))

which will work as we needed it to. But the problem is we have to create wrappers like setTimeoutWrapper, which will be an overhead! And that’s where we can use partial application techniques!

Implementing partial Function

In order 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.

The implementation of partial function looks like the following (Listing 6-12):

Listing 6-12. partial Function Definition

const partial = function (fn,...partialArgs){
  let args = partialArgs;
  return function(...fullArguments) {
    let arg = 0;
    for (let i = 0; i < args.length && arg < fullArguments.length; i++) {
      if (args[i] === undefined) {
        args[i] = fullArguments[arg++];
        }
      }
      return fn.apply(null, args);
  };
};

Let’s quickly use the partial function with our current problem:

let delayTenMs = partial(setTimeout,undefined,10);
delayTenMs(() => console.log("Do Y task"))

which will print to the console as you expect. Now let’s walk through the implementation details of partial function. Using closures, we are capturing the arguments that are passed onto the function for the first time:

partial(setTimeout,undefined,10)

//will lead to
let args = partialArgs
=> args = [undefined,10]

And we return a function that will remember the args value (yeah, again we are using closures!). The returned function is super easy. It takes an argument called fullArguments. So we call functions like delayTenMs by passing the argument:

delayTenMs(() => console.log("Do Y task"))

//fullArguments points to
//[() => console.log("Do Y task")]

//args using closures will have
//args = [undefined,10]

Now in the for loop we iterate and create the necessary arguments array for our function:

if (args[i] === undefined) {
      args[i] = fullArguments[arg++];
  }
}

Now let’s start with value i as 0:

//args = [undefined,10]
//fullArguments = [() => console.log("Do Y task")]
args[0] => undefined === undefined //true

//inside if loop
args[0] = fullArguments[0]
=> args[0] = () => console.log("Do Y task")

//thus args will become
=> [() => console.log("Do Y task"),10]

As you can see in the above 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)!

Remember that we can apply partial for any function that has n arguments. To make the point concrete, let’s look at an example. In JavaScript we use the following function call to do JSON pretty print:

let obj = {foo: "bar", bar: "foo"}
JSON.stringify(obj, null, 2);

As you can see, the last two arguments for the function call stringify are always going to be the same null,2. We can use partial to remove the boilerplate:

let prettyPrintJson = partial(JSON.stringify,undefined,null,2)

and then you can use prettyPrintJson to print the json:

prettyPrintJson({foo: "bar", bar: "foo"})

which will give you the output:

"{
  "foo": "bar",
  "bar": "foo"
}"

Currying vs. Partial Application

We have seen both of these techniques. So the question is when to use which one? The answer depends on how your API is been defined. If your API is defined as such map,filter then we can easily use the curry function to solve our problem. But as discussed in the previous section, 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 fit option would be to use partial functions! After all, we use curry or partial to make function arguments/ function setup easy and more powerful!

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

And that brings us to the end of our discussion!

Unix Philosophy

Unix philosophy is a set of ideas that originated by Ken Thompson. One part of the Unix philosophy is this:

• Make each program do one thing well. To do a new job, build afresh rather than complicate old programs by adding new “features.”

This is exactly what we are doing as part of creating our functions. Functions as we have seen until now in the books are supposed to take an argument and return a data. Yes, functional programming does follow Unix philoshopy. Kudos!

The second part of the philosophy is this:

• Expect the output of every program to become the input to another, as yet unknown, program.

Hmmm, 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 Unix platform that were built by following these philosophies.

For example, cat is a command (or you can think of it as a function) that is used to display the contents of a text file to a console. Here the cat command takes an argument (as similar to a function), that is, the file location, etc., and returns the output (again as similar to a function) to the console. So we can do the following:

cat test.txt

Which will print to the console?

Hello world

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

We can do the following with the grep command :

grep 'world' test.txt

which will return us the matching content, in this case:

Hello world

We have seen two very simple functions: grep and cat that are is built by following the Unix philosophy. Now we can take some time to understand this quote:

• Expect the output of every program to become the input to another, as yet unknown, program.

Imagine you to want to send the data from the cat command as an input to the grep command in order to do a search. We know that the cat command will return the data; and also we know that the grep command takes the data for processing the search operation. Thus, using the Unix | (pipe symbol), we can achieve our task:

cat test.txt | grep 'world'

which will return the data as expected:

Hello world

The above example might be trivial, but it conveys the idea behind the quote:

• Expect the output of every program to become the input to another, as yet unknown, program.

As our example shows, the grep command or a function receives the output of a cat command or a function. What we have done here is that we have created a new function altogether without any effort! Of course 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?

This is how we are going to solve it:

cat test.txt | grep 'world' | wc

which is going to return the data as we expect! As the above examples show, we are creating a new function as per our need on the fly from our base functions! In other words, we are composing a new function from our base function(s). Note that the base function needs to obey this rule:

• Each base function needs to take an argument and return data!

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/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, “Being Functional on Arrays, under the section “Chaining Operations,” we saw how to chain the data from a map and filter to solve the problem in hand. Let’s quickly revisit the problem and the solution we have taken.

We had an array of objects, whose structure looks like the following:

Listing 7-1. Apress book object structure

let apressBooks = [
    {
        "id": 111,
        "title": "C# 6.0",
        "author": "ANDREW TROELSEN",
        "rating": [4.7],
        "reviews": [{good : 4 , excellent : 12}]
    },
    {
        "id": 222,
        "title": "Efficient Learning Machines",
        "author": "Rahul Khanna",
        "rating": [4.5],
        "reviews": []
    },
    {
        "id": 333,
        "title": "Pro AngularJS",
        "author": "Adam Freeman",
        "rating": [4.0],
        "reviews": []
    },
    {
        "id": 444,
        "title": "Pro ASP.NET",
        "author": "Adam Freeman",
        "rating": [4.2],
        "reviews": [{good : 14 , excellent : 12}]
    }
];

The problem was to get the title and author object out of our apressBooks for which the review is greater than 4.5. Our solution to that current problem looks like the following:

Listing 7-2. Getting author details using map

map(filter(apressBooks, (book) => book.rating[0] > 4.5),(book) => {
    return {title: book.title,author:book.author}
})

for which we have got the result as the following:

[
        {
                title: 'C# 6.0',
                author: 'ANDREW TROELSEN'
        }
]

The code to achieve the solution tells an important point. The data out of our filter function is passed into the map function as its input argument! Yeah, you have guessed it correctly. Does it sound like the exact 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 compose function.

compose Function

In this section, let’s create our first compose function. Creating a new compose function is easy and straightforward. compose function needs to take the output of one function and give it as input to another function. Let’s put them up in in a function:

Listing 7-3. compose function definition

const compose = (a, b) =>
  (c) => a(b(c))

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 the argument c. When we call the return 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 as input of function a. And that’s exactly what a compose function definition is!

Great, 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! But that’s not the case always, as there can be functions that have multiple arguments! How we are going to compose those functions? Is there something we can do about it?

Yes, we can do it using either curry or partial function that we have defined in the previous chapter! As you can recall from the section “Revisiting map,filter.” From this chapter, we have the following code to solve our problem in hand (Listing 7-2):

map(filter(apressBooks, (book) => book.rating[0] > 4.5),(book) => {
    return {title: book.title,author:book.author}
})

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 do take two arguments: the first argument is the array, and the second argument being the function to operate on that array. So we can't compose these two functions directly.

However we can take help from partial functions. Remember that the above code snippet does work on the apressBooks object. Pulling it out here again for easy reference:

let apressBooks = [
    {
        "id": 111,
        "title": "C# 6.0",
        "author": "ANDREW TROELSEN",
        "rating": [4.7],
        "reviews": [{good : 4 , excellent : 12}]
    },
    {
        "id": 222,
        "title": "Efficient Learning Machines",
        "author": "Rahul Khanna",
        "rating": [4.5],
        "reviews": []
    },
    {
        "id": 333,
        "title": "Pro AngularJS",
        "author": "Adam Freeman",
        "rating": [4.0],
        "reviews": []
    },
    {
        "id": 444,
        "title": "Pro ASP.NET",
        "author": "Adam Freeman",
        "rating": [4.2],
        "reviews": [{good : 14 , excellent : 12}]
    }
];

Now let’s say we have many small functions in our code base for filtering the books based out of different ratings like the following:

let filterOutStandingBooks = (book) => book.rating[0] === 5;
let filterGoodBooks = (book) => book.rating[0] > 4.5;
let filterBadBooks = (book) => book.rating[0] < 3.5;

and we do have many projection functions like:

let projectTitleAndAuthor = (book) => { return {title: book.title,author:book.author} }
let projectAuthor = (book) => { return {author:book.author}  }
let projectTitle = (book) => { return {title: book.title} }

Now to solve our problem – To get Books titles and authors for 4.5 above rating, we can use compose and partial as in the following:

let queryGoodBooks = partial(filter,undefined,filterGoodBooks);
let mapTitleAndAuthor = partial(map,undefined,projectTitleAndAuthor)

let titleAndAuthorForGoodBooks = compose(mapTitleAndAuthor,queryGoodBooks)

Let’s take some time to understand the position of 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 can't compose them directly.

That’s the reason we have used partial function to partially apply the second argument for both map and filter as you can see here:

partial(filter,undefined,filterGoodBooks);
partial(map,undefined,projectTitleAndAuthor)

Here we have passed filterGoodBooks function to query the books that have ratings over 4.5 and passed projectTitleAndAuthor function to take the title and author property from the apressBooks object! Now the returned partial application will expect only one argument, which is nothing but the array itself! Now with these two partial functions in place, we can compose them via compose as we already have done:

Listing 7-4. Using compose function

let titleAndAuthorForGoodBooks = compose(mapTitleAndAuthor,queryGoodBooks)

Now the function titleAndAuthorForGoodBooks expects one argument in our case that is apressBooks; let’s pass the object array to it:

titleAndAuthorForGoodBooks(apressBooks)
=> [
        {
                title: 'C# 6.0',
                author: 'ANDREW TROELSEN'
        }
]

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

In the same example, what if we want to get only the titles of the books with those above a 4.5 rating? Ah ha, it’s so simple:

let mapTitle = partial(map,undefined,projectTitle)
let titleForGoodBooks = compose(mapTitle,queryGoodBooks)

//call it
titleForGoodBooks(apressBooks)
=> [
        {
                title: 'C# 6.0'
        }
]

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

compose many function

Currently our version of compose function does compose only 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.

Remember that we need to send the output of each function as an input to another function (by remembering the last executed function output recursively). We can use reduce function, which we have used in previous chapters to reduce the n of function calls one at a time. The rewritten compose function now looks like the following:

Listing 7-5. compose many function

const compose = (...fns) =>
  (value) =>
    reduce(fns.reverse(),(acc, fn) => fn(acc), value);

The important line of the function is:

reduce(fns.reverse(),(acc, fn) => fn(acc), value);

reduce([1,2,3],(acc,it) => it + acc,0)
=> 6

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. And notably the initial accumulator value is nothing but a value variable, which will be the first input to our function!

With the new compose function in place, let’s go and test it with our old example. In the previous section we composed a function to count words given in a string:

let splitIntoSpaces = (str) => str.split(" ");
let count = (array) => array.length;
const countWords = compose(count,splitIntoSpaces);

//count the words
countWords("hello your reading about composition")
=> 5

Now imagine we want to find out whether the word count in the given string is odd or even. We already have a function for it:

let oddOrEven = (ip) => ip % 2 == 0 ? "even" : "odd"

Now with our compose function in place, we can compose these three functions to get what we really want:

const oddOrEvenWords = compose(oddOrEven,count,splitIntoSpaces);
oddOrEvenWords("hello your reading about composition")
=> ["odd"]

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

pipe function is just replica of our compose function, the only change is that the data flow:

Listing 7-6. pipe function definition

const pipe = (...fns) =>
  (value) =>
    reduce(fns,(acc, fn) => fn(acc), value);

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 right to left).

Let’s quickly check our implementation of pipe function by rerunning the same example in previous section:

const oddOrEvenWords = pipe(splitIntoSpaces,count,oddOrEven);
oddOrEvenWords("hello your reading about composition");
=> ["odd"]

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 the 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 in different data flow! You can use either pipe or compose in your code base, but not both, as it can lead to confusion between your team members! Stick to one style of composing. :)

Odds on Composition

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

Let’s tackle one after the other.

compose(f, compose(g, h)) == compose(compose(f, g), h);

//compose(compose(f, g), h)

let oddOrEvenWords = compose(compose(oddOrEven,count),splitIntoSpaces);
let oddOrEvenWords("hello your reading about composition")
=> ['odd']

//compose(f, compose(g, h))

let oddOrEvenWords = compose(oddOrEven,compose(count,splitIntoSpaces));
let oddOrEvenWords("hello your reading about composition")
=> ['odd']

let countWords = compose(count,splitIntoSpaces)
let oddOrEvenWords = compose(oddOrEven,countWords)

or
let countOddOrEven = compose(oddOrEven,count)
let oddOrEvenWords = compose(countOddOrEven,splitIntoSpaces)

or
...

Debugging Using tap Function

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

Let’s create a simple function called identity. The aim of this function is to take the argument and return the same argument; hence the name identity:

const identity = (it) => {
        console.log(it);
        return it
}

Here we have added a simple console.log to print the value this function receives and also return it as it is! Now imagine we have the following call:

compose(oddOrEven,count,splitIntoSpaces)("Test string");

When you execute the above code, what if count function throws an error? How will you know what value does count function receive as its argument? And that’s where our little identity function comes into picture. We can add

identity in the flow where we see the error like:

compose(oddOrEven,count,identity,splitIntoSpaces)("Test string");

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

Functor Is a Container

Simply put, functor is a container that holds the value in it. We have seen this in the definition stating that Functor is a plain object. So let’s go ahead and create a simple container that can hold any value we pass onto it, and we call it a Container :

Listing 8-1. Container Definition

const Container = function(val) {
        this.value = val;
}

You might be wondering why we didn't write the Container function using our arrow syntax:

const Container = (val) => {
        this.value = val;
}

The above code will be fine, but the moment we try to apply new keyword on our Container, we will be getting the back an error like this:

Container is not a constructor(...)(anonymous function)

Why is that? Well, technically, in order to create a new Object, the function should have the internal method [[Construct]] and the property prototype. Sadly, the Arrow function doesn't have both! So here we are falling back to our old school friend function, which has the internal method [[Construct]], and it also has access to the prototype property.

Now with Container in place, we can go ahead and create a new object out of it:

Listing 8-2. Playing With Container

let testValue = new Container(3)
=> Container(value:3)

let testObj = new Container({a:1})
=> Container(value:{a:1})

let testArray = new Container([1,2])
=> Container(value:[1,2])

Nothing fancy here; Container is just holding the value inside it. We can pass any data type in JavaScript to it and Container will hold it. Before we move on, we can create a util method called of in the Container prototype, which will save us in writing the new keyword to create a new Container. The code looks like the following:

Listing 8-3. of method definition

Container.of = function(value) {
  return new Container(value);
}

With this of method in place, we can rewrite the above code (Listing 8-2) snippets like this:

Listing 8-4. Creating Container with of

testValue = Container.of(3)
=> Container(value:3)

testObj = Container.of({a:1})
=> Container(value:{a:1})

testArray = new Container([1,2])
=> Container(value:[1,2])

It is worth noting that Container can contain nested Containers too:

Container.of(Container.of(3));

is going to print:

Container {
        value: Container {
                value: 3
        }
}

Now that we have defined that the Functor is nothing but a Container that can hold the value, let’s revisit the definition of 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.

Functor Implements Method Called map

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

map function takes the value out of the Container and applies the passed function on that value and again put back the result in the Container. Let’s visualize using the following image (Figure 8-1):

Figure 8-1. Mechanism of Container And map Function

The above image tells the way map function is going to work with our Container object. It takes the value in the Container; in this case the value is 5, and pass on that value to the passed function double (this function just doubles the given number), and the result is being put back again to Container. With that understanding in place, we can implement the map function:

Listing 8-5. map function definition

Container.prototype.map = function(fn){
  return Container.of(fn(this.value));
}

As shown above, the above map function just simply does what we have discussed in our image! It’s simple and elegant! Now to make the point concrete, let’s put our image piece into code action:

let double = (x) => x + x;
Container.of(3).map(double)
=> Container { value: 6 }

Note that the map returns the result of the passed function again in the container, which allows us to chain the operation:

Container.of(3).map(double)
                           .map(double)
                           .map(double)

=> Container {value: 24}

Now implementing Container with our map function, we can make complete sense of Functor definition:

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

Or in other words:

• Functor is an object, which implement a map contract!

Well that’s Functor for you. But you might be wondering what Functor is useful for? We are going to answer that in the upcoming section.

Implementing MayBe

MayBe is a type of Functor, which means it’s going to implement a map function but in a different way. Let’s start with a simple MayBe, which can hold the data (very similar to Container implementation):

Listing 8-6. MayBe Function Definition

const MayBe = function(val) {
  this.value = val;
}

MayBe.of = function(val) {
  return new MayBe(val);
}

We just created MayBe, which resembles the Container implementation. Now as stated earlier, we have to implement a map contract for the MayBe, which looks like this:

Listing 8-7. MayBe’s map function definition

MayBe.prototype.isNothing = function() {
  return (this.value === null || this.value === undefined);
};


MayBe.prototype.map = function(fn) {
  return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this.value));
};

The map function does very similar things to the Container (simple Functor) map function. MayBe's map first checks whether the value in the container is null or undefined before applying the passed function using the isNothing function, which takes care of null/undefined checks:

(this.value === null || this.value === undefined);

Note that map puts back the result of applying the function back in the container:

return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value));

Now it’s time to see MayBe in action.

Simple Use Cases

As we discussed in the previous section, MayBe does checks the null, undefined before applying the passed function in map. This is a very powerful abstraction that takes care of error handling! To make this concrete, here’s a simple example:

MayBe.of("string").map((x) => x.toUpperCase())

which returns

MayBe { value: 'STRING' }

The most important and interesting point to note here:

Listing 8-8. Creating our first MayBe

(x) => x.toUpperCase()

doesn't care if x is null or undefined or that it has been abstracted by the MayBe functor! What if the value of the string is null? Then the code looks like the following:

MayBe.of(null).map((x) => x.toUpperCase())

we will be getting back:

MayBe { value: null }

Wow, our code now 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.

//implementation of map
MayBe.prototype.map = function(fn) {
  return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this.value));
};

In a normal imperative way, we would have done this:

let value = "string"
if(value != null || value != undefined)
        return value.toUpperCase();

The above code does exactly the same thing, but look at the steps required to check if the value is null or undefined, even for a single call! And also using MayBe, we don't care about those sneaky variables to hold the resulting value! Remember that we can chain our map function as desired:

Listing 8-9. Chaining with map

MayBe.of("George")
     .map((x) => x.toUpperCase())
     .map((x) => "Mr. " + x)

gives back:

MayBe { value: 'Mr. GEORGE' }

It’s so pleasant to watch! Before we close this section, we need to talk about two more important properties of MayBe.

The first one is that even if your passed function to map returns null/undefined, MayBe can take care of it! In other words, in the whole chain of map calls, it is fine if a function returns null or undefined. To illustrate the point, let’s tweak the last example:

MayBe.of("George")
     .map(() => undefined)
     .map((x) => "Mr. " + x)

Note that our second map function returns undefined; however, running the above code will give this result:

MayBe { value: null }

as expected!

The second important point is that all map functions will be called regardless if it receives null/undefined. We’ll pull out the same code snippet (Listing 8-9) that we have used in the previous example:

MayBe.of("George")
     .map(() => undefined)
     .map((x) => "Mr. " + x)

The point here is that even though the first map does return undefined:

map(() => undefined)

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

Since MayBe is a type of container that can hold any values, it can also hold values of type Array. Imagine you have written an API to get the top 10 subreddit data based on types like top, new, hot:

Listing 8-10. Getting Top 10 SubReddit Posts

let getTopTenSubRedditPosts = (type) => {
    let response
    try{
       response = JSON.parse(request('GET',"https://www.reddit.com/r/subreddits/" + type + ".json?limit=10").getBody('utf8'))
    }catch(err) {
        response = { message: "Something went wrong" , errorCode: err['statusCode'] }
    }
    return response
}

request comes from the package sync-request. This will allow us to fire a request and get the response in synchronous fashion. This is just for illustration, and I don't recommend using synchronous calls in production.

getTopTenSubRedditPosts function just hits the URL and gets back the response. If there are any issues in hitting the reddit API, it sends back a custom response of the format:

. . .
response = { message: "Something went wrong" , errorCode: err['statusCode'] }
. . .

and if we call our API like this:

getTopTenSubRedditPosts('new')

we will be getting back the response in this format:

{"kind": "Listing", "data": {"modhash": "", "children": [], "after": null, "before": null}}

where children property will have an array of JSON objects. It will look something like this:

"{
  "kind": "Listing",
  "data": {
    "modhash": "",
    "children": [
      {
        "kind": "t3",
        "data": {
          . . .
          "url": "https://twitter.com/malyw/status/780453672153124864",
          "title": "ES7 async/await landed in Chrome",
          . . .
        }
      }
    ],
    "after": "t3_54lnrd",
    "before": null
  }
}"

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.

With MayBe in place, we can go ahead and implement the logic as such:

Listing 8-11. Getting Top 10 SubReddit Posts using MayBe

//arrayUtils from our library
import {arrayUtils} from '../lib/es6-functional.js'

let getTopTenSubRedditData = (type) => {
    let response = getTopTenSubRedditPosts(type);
    return MayBe.of(response).map((arr) => arr['data'])
                             .map((arr) => arr['children'])
                             .map((arr) => arrayUtils.map(arr,
                                (x) => {
                                    return {
                                        title : x['data'].title,
                                        url   : x['data'].url
                                    }
                                }
                            ))
}

Let's break down how getTopTenSubRedditData works. First we are wrapping the result of the reddit API call within the MayBe context using MayBe.of(response). Then we are running a series of functions using MayBe's map:

. . .
.map((arr) => arr['data'])
.map((arr) => arr['children'])
. . .

This will return the children array object from the response structure:

{"kind": "Listing", "data": {"modhash": "", "children": [ . . . .], "after": null, "before": null}}

And in the last map, we are using our own ArrayUtils's map to iterate over the children property and return only the title and URL as needed:

. . .
.map((arr) =>
        arrayUtils.map(arr,
    (x) => {
        return {
            title : x['data'].title,
            url   : x['data'].url
        }
    }
. . .

Now if we call our function with a valid reddit name like new:

getTopTenSubRedditData('new')

we get back the response:

MayBe {
  value:
   [ { title: '/r/UpliftingKhabre - The subreddit for uplifting and positive stories from India!',
       url: 'https://www.reddit.com/r/upliftingkhabre' },
     { title: '/R/JerkOffToCelebs - The Best Place To Jerk Off To Your Fave Celebs',
       url: 'https://www.reddit.com/r/JerkOffToCelebs' },
     { title: 'Angel Vivaldi channel',
       url: 'https://qa1web-portal.immerss.com/angel-vivaldi/angel-vivaldi' },
     { title: 'r/SuckingCock - Come check us out for INSANE Blowjobs! (NSFW)',
       url: 'https://www.reddit.com/r/suckingcock/' },
     { title: 'r/Just_Tits - Come check us out for GREAT BIG TITS! (NSFW)',
       url: 'https://www.reddit.com/r/just_tits/' },
     { title: 'r/Just_Tits - Come check us out for GREAT BIG TITS! (NSFW)',
       url: 'https://www.reddit.com/r/just_tits/' },
     { title: 'How to Get Verified Facebook',
       url: 'http://imgur.com/VffRnGb' },
     { title: '/r/TrollyChromosomes - A support group for those of us whose trollies or streetcars suffer from chronic genetic disorders',
       url: 'https://www.reddit.com/r/trollychromosomes' },
     { title: 'Yemek Tarifleri Eskimeyen Tadlarımız',
       url: 'http://otantiktad.com/' },
     { title: '/r/gettoknowyou is the ultimate socializing subreddit!',
       url: 'https://www.reddit.com/r/subreddits/comments/50wcju/rgettoknowyou_is_the_ultimate_socializing/' } ] }

The above response might not be the same for the readers, as the response will change from time to time.

The beauty of the getTopTenSubRedditData method is how it handles unexpected input that can cause null/undefined errors in our logic flow. What if someone calls your getTopTenSubRedditData with a wrong reddit type? Remember that it will return the JSON response from Reddit:

{ message: "Something went wrong" , errorCode: 404 }

That is, the data – children property – will be empty! Let’s try this by passing the wrong reddit type and see how it responds:

getTopTenSubRedditData('new')

which returns:

MayBe { value: null }

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

We have seen the problem Either is going to solve for us; now let’s see its implementation :

Listing 8-12. Either Functor Parts Definition

const Nothing = function(val) {
  this.value = val;
};

Nothing.of = function(val) {
  return new Nothing(val);
};

Nothing.prototype.map = function(f) {
  return this;
};

const Some = function(val) {
  this.value = val;
};

Some.of = function(val) {
  return new Some(val);
};

Some.prototype.map = function(fn) {
  return Some.of(fn(this.value));
}

The implementation has two functions, namely, Some and Nothing. You can see that Some is just a copy of a Container with a name change. The interesting part is with Nothing. Nothing is also a Container, but its map doesn't run over a given function but rather just returns:

Nothing.prototype.map = function(f) {
  return this;
};

In other words, you can run your functions on Some but not on Nothing (not a technical statement right? :)

Here’s a quick example:

Some.of("test").map((x) => x.toUpperCase())
=> Some {value: "TEST"}

Nothing.of("test").map((x) => x.toUpperCase())
=> Nothing {value: "test"}

As shown in the above code snippet, calling map on Some runs over the passed function. However, in Nothing, it just returns the same value back test. And we will wrap these two objects into Either object like this:

Listing 8-13. Either Definition

const Either = {
  Some : Some,
  Nothing: Nothing
}

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

Reddit Example Either Version

The MayBe version of reddit example looks like (Listing 8-11):

let getTopTenSubRedditData = (type) => {
    let response = getTopTenSubRedditPosts(type);
    return MayBe.of(response).map((arr) => arr['data'])
                             .map((arr) => arr['children'])
                             .map((arr) => arrayUtils.map(arr,
                                (x) => {
                                    return {
                                        title : x['data'].title,
                                        url   : x['data'].url
                                    }
                                }
                            ))
}

on passing a wrong reddit type, say, for example, unknown:

getTopTenSubRedditData('unknown')
=> MayBe {value : null}

we get back MayBe of null value. But we didn't know the reason why null was returned! We know that getTopTenSubRedditData uses getTopTenSubRedditPosts to get the response. Now that Either in place, we can create a new version of getTopTenSubRedditPostsusing Either:

Listing 8-14. Get Top Ten Subreddit Using Either

let getTopTenSubRedditPostsEither = (type) => {

    let response
    try{
       response = Some.of(JSON.parse(request('GET',"https://www.reddit.com/r/subreddits/" + type + ".json?limit=10").getBody('utf8')))
    }catch(err) {
        response = Nothing.of({ message: "Something went wrong" , errorCode: err['statusCode'] })
    }
    return response
}

Note that we have wrapped the proper response with Some and error response with Nothing! Now with that in place, we can modify our reddit API to:

Listing 8-15. Get Top Ten Subreddit Using Either

let getTopTenSubRedditDataEither = (type) => {
    let response = getTopTenSubRedditPostsEither(type);
    return response.map((arr) => arr['data'])
                             .map((arr) => arr['children'])
                             .map((arr) => arrayUtils.map(arr,
                                (x) => {
                                    return {
                                        title : x['data'].title,
                                        url   : x['data'].url
                                    }
                                }
                            ))
}

The above code is just literally the MayBe version, but it’s just not using MayBe, rather it’s using Either's type.

Now let's call our new API with the wrong reddit data type:

getTopTenSubRedditDataEither('new2')

which will return:

Nothing { value: { message: 'Something went wrong', errorCode: 404 } }

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

On a closing note, we can try our new version with a valid reddit type:

getTopTenSubRedditDataEither('new')

It will give back the expected response in Some:

Some {
  value:
   [ { title: '/r/UpliftingKhabre - The subreddit for uplifting and positive stories from India!',
       url: 'https://www.reddit.com/r/upliftingkhabre' },
     { title: '/R/JerkOffToCelebs - The Best Place To Jerk Off To Your Fave Celebs',
       url: 'https://www.reddit.com/r/JerkOffToCelebs' },
     { title: 'Angel Vivaldi channel',
       url: 'https://qa1web-portal.immerss.com/angel-vivaldi/angel-vivaldi' },
     { title: 'r/SuckingCock - Come check us out for INSANE Blowjobs! (NSFW)',
       url: 'https://www.reddit.com/r/suckingcock/' },
     { title: 'r/Just_Tits - Come check us out for GREAT BIG TITS! (NSFW)',
       url: 'https://www.reddit.com/r/just_tits/' },
     { title: 'r/Just_Tits - Come check us out for GREAT BIG TITS! (NSFW)',
       url: 'https://www.reddit.com/r/just_tits/' },
     { title: 'How to Get Verified Facebook',
       url: 'http://imgur.com/VffRnGb' },
     { title: '/r/TrollyChromosomes - A support group for those of us whose trollies or streetcars suffer from chronic genetic disorders',
       url: 'https://www.reddit.com/r/trollychromosomes' },
     { title: 'Yemek Tarifleri Eskimeyen Tadlarımız',
       url: 'http://otantiktad.com/' },
     { title: '/r/gettoknowyou is the ultimate socializing subreddit!',
       url: 'https://www.reddit.com/r/subreddits/comments/50wcju/rgettoknowyou_is_the_ultimate_socializing/' } ] }

That’s all about Either.

If you are from a Java background, you can sense that Either is very similar to Optional in Java 8. In fact, Optional is a functor!

Implementation of the First Step

Let’s implement the solution step by step. In this section, we’ll implement the solution for the first step. The first step involves hitting the Reddit search API endpoint along with our search query. Since we need to fire the HTTP GET call, we will be requiring the sync-request module that we used in the previous chapter.

Let’s pull out the module by and hold it in a variable for future use:

let request = require('sync-request');

Now with the request function, we could fire HTTP GET call to our Reddit Search API endpoint. Let’s wrap the search steps in a specific function, which we call searchReddit:

Listing 9-2. searchReddit function definition

let searchReddit = (search) => {
    let response
    try{
       response = JSON.parse(request('GET',"https://www.reddit.com/search.json?q=" + encodeURI(search)).getBody('utf8'))
    }catch(err) {
        response = { message: "Something went wrong" , errorCode: err['statusCode'] }
    }
    return response
}

Now we’ll walk down the code in steps:

1. We are firing the search request to the URL endpoint https://www.reddit.com/search.json?q = as shown here:

   response = JSON.parse(request('GET',"https://www.reddit.com/search.json?q=" + encodeURI(search)).getBody('utf8'))

   Note that we are using the encodeURI method for escaping special characters in our search string.

2. Once the response is a success, we are returning back the value.

3. In case of error, we are catching it in a catch block and getting the error code and returning the error response like this:

   . . .
   catch(err) {
           response = { message: "Something went wrong" , errorCode: err['statusCode'] }
       }
   . . .

   With our little function in place, we go ahead and test it:

   searchReddit("Functional Programming")

   which will return the result:

   { kind: 'Listing',
     data:
      { facets: {},
        modhash: '',
        children:
         [ [Object],
           [Object],
           [Object],
           [Object],
           [Object],
           [Object],
           [Object],
           [Object],
           . . .
        after: 't3_terth',
        before: null } }

That’s perfect! We are done with step 1! Let’s go and implement step 2.

Implementing the decond Step For each search children object, we need to get its permalink value to get the list of comments. We can write a separate method for getting s list of comments for the given URL. We call this method getComments. The implementation of getComments is simple, which looks like the following:

Listing 9-3. getComments function definition

let getComments = (link) => {
    let response
    try {
        response = JSON.parse(request('GET',"https://www.reddit.com/" + link).getBody('utf8'))
    } catch(err) {
        response = { message: "Something went wrong" , errorCode: err['statusCode'] }
    }

    return response
}

getComments implementation is very similar to our searchReddit. Let’s walk down in steps and see what getComments does:

1. It fires the HTTP GET call for the given link value. For example, if the link value is passed as:

   r/IAmA/comments/3wyb3m/we_are_the_team_working_on_react_native_ask_us/.json

   getComments then will fire a HTTP GET call to the URL:

   https://www.reddit.com/r/IAmA/comments/3wyb3m/we_are_the_team_working_on_react_native_ask_us/.json

   which is going to return the array of comments. As before, we are a bit defensive here and catching any errors within the getComments method in our favorite catch block. And finally we are returning back the response.

Quickly we’ll test our getComments, by passing the below link value:

r/IAmA/comments/3wyb3m/we_are_the_team_working_on_react_native_ask_us/.json

getComments('r/IAmA/comments/3wyb3m/we_are_the_team_working_on_react_native_ask_us/.json')

for the above call we get back:

[ { kind: 'Listing',
    data: { modhash: '', children: [Object], after: null, before: null } },
  { kind: 'Listing',
    data: { modhash: '', children: [Object], after: null, before: null } } ]

the result. Now with both APIs ready, it’s time to go and merge these results.

Merging Reddit Calls. Now we have defined two functions, namely, searchReddit and getComments (Listing 9-2 and Listing 9-3 respectively), which does it tasks and return the response as seen in the previous sections. In this section, let’s write a higher-level function, which takes up the search text and use these two functions to achieve our end goal.

We’ll call the function we create as mergeViaMayBeand its implementation looks like the following:

Listing 9-4. mergeViaMayBe function definition

let mergeViaMayBe = (searchText) => {

    let redditMayBe = MayBe.of(searchReddit(searchText))
    let ans = redditMayBe
               .map((arr) => arr['data'])
               .map((arr) => arr['children'])
               .map((arr) => arrayUtils.map(arr,(x) => {
                        return {
                            title : x['data'].title,
                            permalink : x['data'].permalink
                        }
                    }
                ))
               .map((obj) => arrayUtils.map(obj, (x) => {
                    return {
                        title: x.title,
                       comments: MayBe.of(getComments(x.permalink.replace("?ref=search_posts",".json")))
                    }
               }));

   return ans;
}

Let’s quickly check our function by passing the search text functional programming:

mergeViaMayBe('functional programming')

the above call will give the result:

MayBe {
  value:
   [ { title: 'ELI5: what is functional programming and how is it different from OOP',
       comments: [Object] },
     { title: 'ELI5 why functional programming seems to be "on the rise" and how it differs from OOP',
       comments: [Object] } ] }

For better clarity I have reduced the number of results in the output of the above call. The default call will give back 25 results, which will take a couple of pages to put in the output of mergeViaMayBe. From here on, I will be displaying only minimal output in the book. Kindly note that the source code example does call and print all of the 25 results.

Great! Now let’s step back and understand in detail what mergeViaMayBe function does.

The function first calls the searchReddit with searchText value. The result of the call is wrapped in MayBe:

let redditMayBe = MayBe.of(searchReddit(searchText))

and once the result is wrapped inside a MayBe type, we are free to map over it as you can see in the code.

To remind us of the search query (which our searchReddit will call), it will send back the result in the following structure:

{ kind: 'Listing',
  data:
   { facets: {},
     modhash: '',
     children:
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        . . .
        [Object],
        [Object] ],
     after: 't3_terth',
     before: null } }

In order to get the permalink (which is in our children object), we need to navigate to data.children. This is exactly demonstrated in the code:

redditMayBe
         .map((arr) => arr['data'])
         .map((arr) => arr['children'])

Now we got the handle to children array. Remember that each children has an object with the following structure:

{ kind: 't3',
  data:
   { contest_mode: false,
     banned_by: null,
     domain: 'self.compsci',
     . . .
     permalink: '/r/compsci/comments/3mecup/eli5_what_is_functional_programming_and_how_is_it/?ref=search_posts',
     locked: false,
     stickied: false,
     . . .
     visited: false,
     num_reports: null,
     ups: 134 } }

We need to get only title and permalink out of it; since it’s an array, we run Array's map function over it:

.map((arr) => arrayUtils.map(arr,(x) => {
        return {
            title : x['data'].title,
            permalink : x['data'].permalink
        }
    }
))

Now we have both title and permalink, our last step is to take permalink and pass it to our getComments function, which will fetch the list of comments for the passed value. This is seen here in the code:

.map((obj) => arrayUtils.map(obj, (x) => {
        return {
            title: x.title,
           comments: MayBe.of(getComments(x.permalink.replace("?ref=search_posts",".json")))
        }
}));

Since the call of getComments can get an error value, we are wrapping it again inside a MayBe:

. . .
      comments: MayBe.of(getComments(x.permalink.replace("?ref=search_posts",".json")))
. . .

That's it!

Throughout the full process we haven't come outside our MayBe type. We run our all map function happily on our MayBe type without worrying about it too much! We have solved our problem so elegantly with MayBe, didn’t we? There is a slight problem with our MayBe functor that is used this way. Let’s talk about it in next section.

Problem of So Many maps

If you count the number of map calls on our MayBe in our mergeViaMayBe function, its 4! You might be thinking what is the big deal about it? Who cares about the number of map calls! Do we?

Let’s try to understand the problem of many chained map calls like in mergeViaMayBe. Now imagine we want to get a comments array that is returned from mergeViaMayBe.

We’ll pass our search text functional programming in our mergeViaMayBe function:

let answer = mergeViaMayBe("functional programming")

after the call answer:

MayBe {
  value:
   [ { title: 'ELI5: what is functional programming and how is it different from OOP',
       comments: [Object] },
     { title: 'ELI5 why functional programming seems to be "on the rise" and how it differs from OOP',
       comments: [Object] } ] }

Now let’s get the comments object for processing. Since the return value is MayBe, we can map over it:

answer.map((result) => {
      //process result.
})

The result (which is the value of MayBe) is an array that has title and comments, so let’s map over it using our Array's map: