Functional Programming in JavaScript with map, filter, reduce

JavaScript is a multi-paradigm language. Paradigm is the style of writing code, We can follow Object Oriented Programming Paradigm as well Functional Programming Paradigm in JavaScript. In Today’s writing we will be exploring Functional Programming Paradigm with JavaScript Object Array’s built-in methods. So Let’s get Started

Functional Programming Paradigm is based on some principles like pure function, immutability, higher order functions, first-class citizens etc. but we are not going to talk about these concepts because it’s beyond the scope of today’s topic.

if we follow FP paradigm we will be benefited by having less bugs, easier to reason about because we will be writing less line of code as well we will get opportunity to re-use our code more than ever.

Today We will discuss 3 Array methods which supports FP paradigm and those are map, filter, reduce

map is a higher order-function in js that takes an array and returns the transformed version of that array. Let’s visualize it

const developers = [
{name: 'Meer', role: 'Front-End Developer'},
{name: 'Tushar', role: 'Back-End Developer'},
{name: 'Abrar', role: 'Database Designer'}]

Let’s transform this developers array’s every items with map method

const transformedDevelopers = developers.map(developer => {
return `${developer.name} is a ${developer.role} `
});

See! we get an transformed array of strings from the developers array without changing itself

filter also a higher-order function in js that takes an array and returns a new shorter array in size than original array based on criteria inside filter function. Let’s visualize

const fullStackDevelopers= [
{name: 'Meer', workingExperience: 5},
{name: 'Abrar', workingExperience: 6},
{name: 'Karim', workingExperience: 1},
{name: 'Juwel', workingExperience: 2},
{name: 'Kismot', workingExperience: 8}
];

So we have an array named fullStackDevelopers. With the help of filter method we will be filtering developers have experience more than 5 years by writing a statment inside function

const filteredDevelopers = fullStackDevelopers.filter(fullStackDeveloper => {
 return fullStackDeveloper.workingExperience > 5;
})

So Here we are getting a new array with only 2 developers without changing the real fullStackDevelopers array based on a criteria we wrote inside filter function. now we can capture this new filtered array in a variable and use.

reduce is another useful higher-order function in js which has two arguments one is accumulator and another is value, it takes an array and returns a single value, Let’s see how it works

const myDeveloperSalaries= [
{month: 'jan', salary: 3343},
{month: 'feb', salary: 5323},
{month: 'march', salary:894},]

const my3MonthsTotalDeveloperSalary = myDeveloperSalaries.reduce((total, month ) => {
 return total += month.salary 
}, 0)

Here in reduce method we are taking two argument one is the function that adds every months salary with the total variable and returns, and the second argument of the reduce method is the initial value of the total variable, we set it to 0 and added every months salary with this in order to get the total salary.

Learning is my passion and I love sharing what i know, please let me know if there is something wrong, I’m always happy to learn something from you.
So we discussed 3 very useful higher-order functions in JavaScript, Let me know if there any suggestion of writing something new on JavaScript , I’ll definitely try.