Fun with Functional Programming!

What you need to know?

JavaScript

Functions in JS

Coding background

Basic logical thinking (The most important)

What functional programming is?

A programming paradigm that helps you to write a clean and concise code by making sure that your code is divided into smaller pure functions. Some aspects that we should of functional programming are:-

Functions are pure. The function returns the same output as the input provided.

No data mutation happens at any level.

No side-effects while data gets processed.

Easier to test the functions.

Implementation

Enough talking let us get on to the coding part. So below we have a small problem statement. We have a string "Innovation distinguishes between a leader and a follower.!!" and we have to write a function that will return the below result

["INNOVATION","DISTINGUISHES","BETWEEN","LEADER","AND","FOLLOWER"]

So usually we go about writing a function the hardcore way, and write the implementation as below:

let str = 'Innovation distinguishes between a leader and a follower.!!'

let prepareString = function () {
  let str1 = str.trim();
  let str2 = str1.replace(/[?.,!]/g, '')
  let str3 = str2.toUpperCase();
  let arr = str3.split(" ");
  for(let i = 0; i < arr.length; i++) {
     if(arr[i] === 'A' || arr[i] === 'AN' || arr[i] === 'THE') {
       arr.slice(i,1);
     }
  } 
  return arr;
}

If you observe the above solution you could see that we have written the implementation in such a way that it actually mutates the original state of the data that is the string

str = "Innovation distinguishes between a leader and a follower.!!"

which we don't want to happen. So the question is

Can we make our code more readable?

Can we divide our code into smaller functions? And the answer is "Yes".

Let's solve the above problem in a functional way.

const str = 'Innovation distinguishes between a leader and a follower.!!'

const trimString = str => str.replace(/^\s*|\s*$/g, '');

const noPunction = str => str.replace(/[?.,!]/g, '');

const capitalizeStr = str => str.toUpperCase();

const splitStr = str => str.split(" ");

const noArticles = str => (str !== 'A' && str !== 'AN' && str !== 'THE');

const filterArticles = arr => arr.filter(noArticles);

So in the above code you can see that we have divided our single function into multiple functions which makes code much more readable and easy to test. So If you do

console.log(filterArticles(splitStr(capitalizeStr(noPunction(trimString(str))))));

You should get the desirable result. Now the problem in the above code is that it still seems to be quite not readable. Let's try to implement some kind of piping mechanism which can execute the functions in an order to get us the desired result

const compose = (...fns) => (x) => fns.reduce((value, currentFunction) => currentFunction(value), x);
const prepareString = compose(trimString, noPunction, capitalizeStr, splitStr, filterArticles);

Now if you try to do

console.log(prepareString(str));

you get the below output

["INNOVATION","DISTINGUISHES","BETWEEN","LEADER","AND","FOLLOWER"]

You see the above code is much more readable and easier to test. And not to forget that the code is much more modular.

Functional programming is gaining a lot of popularity lately, and it is a good time to learn this programming paradigm. Though it has to remember that you won't be able to use the FP paradigm for all the scenarios.

I hope you guys liked the article.

Let me know what you think about Functional Programming in general. The above is just one example, I will come up with a few more in the upcoming posts.

Happy learning!!!