Map vs Reduce vs Filter in JavaScript

So these methods are part of the “functional” aspect of JavaScript. JavaScript is a strange language in a good way. Before we get into this, know that all these methods above try to replace the “for” loop, or any other type of loop you can think of.

Some of you might be saying, “I like my loops thank you very much, it is in every language out there !”. And yes that is very true, however these make writing a whole loop for something trivial a thing of the past. So lets get on with it, its not as hard as you probably things it is.

All these methods only working on arrays. And they never modify the array you apply them to. They just return a new array.

MAP

As in Mapping “X” to “Y”, or transforming X into Y. In the case of JavaScript you are making a map of your values. You basically just give it a function (could be anonymous) and it applies it to each array element, and forms a new array.

// Array you wanna do the operation on
const peopleArray = [ {Name: "Tim", BankBalance: 10},
{Name: "Leo", BankBalance: 20},
{Name: "Sam", BankBalance: 30} ];
// calling the Map function and having it return its value into
// reformattedArray. Where "obj" represents each object in the
// peopleArray
let reformattedArray = peopleArray.map((obj) =>{
let newObj = {};
newObj.Name = "Mr." + obj.Name;
newObj.BankBalance = obj.BankBalance * 1000;
return newObj;
});
console.log(reformattedArray);
// "reformattedArray" is now: [ { Name: 'Mr.Tim', BankBalance: 10000 },
// { Name: 'Mr.Leo', BankBalance: 20000 },
// { Name: 'Mr.Sam', BankBalance: 30000 } ]
// you can also get another parameter that is passed in. Known as the index
// of the object in the old array (peopleArray in this case)
reformattedArray = peopleArray.map((obj, index) =>{
let newObj = {};
newObj.MyIndex = index;
newObj.Name = "Mr." + obj.Name;
newObj.BankBalance = obj.BankBalance * 1000;
return newObj;
});
console.log(reformattedArray);
// "reformattedArray" is now:[ { MyIndex: 0, Name: 'Mr.Tim', BankBalance: 10000 },
// { MyIndex: 1, Name: 'Mr.Leo', BankBalance: 20000 },
// { MyIndex: 2, Name: 'Mr.Sam', BankBalance: 30000 } ]

view raw
MapsInJS.js
hosted with ❤ by GitHub

REDUCE

As in reducing something to its essence, or compressing something down. In the case of JavaScript you are taking all your values in an array, and compressing them into something useful.

// Here we have a list of all the transactions made by Mike
const transActionsForMike = [ {Name: "Bike", Cost: 5000},
{Name: "Apple Music", Cost: 20},
{Name: "Cook Book", Cost: 30},
{Name: "Azure Hosting", Cost: 60},
{Name: "Phone Bill", Cost: 70}];
// And we try to figure out how much Mike Spent
// "reduce" takes in three main arguments, the Accumulator (acc), the
// currentValue (curr) in the form of an anonymous function. And a inital
// value for the accumulator (in our example its 0). The accumulator acts
// like a bucket that you keep adding things to. Or keep modifying every
// interaction of the reduce function.
// Here we are taking each object in the "transActionsForMike" variable. Then
// we are accessing the cost property of each object, then continuously adding it to
// the accumulator.
// then at the very end we are returning the accumulator that gets dumped into the
// MikesSpending variable.
let MikesSpending = transActionsForMike.reduce((acc, curr) =>{
return acc + curr.Cost;
}, 0);
console.log(MikesSpending) // MikesSpending is: 5180
// Note you can make the accumulator into anything you want. That is, you can set the
// inital property of the accumulator to object or array and continously add things
// to it, to have the desired output.
// Other things that you can have "reduce" pass into your function is:
// accumulator, currentValue, currentIndex, array (yes the whole array)

view raw
ReduceInJS.js
hosted with ❤ by GitHub

FILTER

As in finding something based on a certain set of parameters. I think you guys kinda already know what this particular method does.

const transActionsForMike = [ {Name: "Bike", Cost: 5000},
{Name: "Apple Music", Cost: 20},
{Name: "Cook Book", Cost: 30},
{Name: "Azure Hosting", Cost: 60},
{Name: "Phone Bill", Cost: 70}];
// As seen in Reduce and Map, we can add more elements into the
// anonymous functions such as the index and the whole array
// filter gives us each element in the array. We then have to return
// "true" to keep it in, or "false" to get rid of it.
// In the case below we are keeping the element in the new array we are returning
// if it's cost property is less than 100 or more than 20
let MikesSmallTransactions = transActionsForMike.filter((ele) => {
return ele.Cost < 100 && ele.Cost > 20;
});
console.log(MikesSmallTransactions);
// MikesSmallTransactions is now: [ { Name: 'Cook Book', Cost: 30 },
// { Name: 'Azure Hosting', Cost: 60 },
// { Name: 'Phone Bill', Cost: 70 } ]

view raw
FilterInJS.js
hosted with ❤ by GitHub

I hope this helped you better understand Reduce, Map, and Filter πŸ™‚

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s