Map vs Reduce vs Filter in JavaScript

By Alex Rivers June 12, 2023 #Programming Tutorials

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.

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.

Filter

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

I hope this helped you better understand Reduce, Map, and Filter

	// 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 } ]

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

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

Breaking

Map vs Reduce vs Filter in JavaScript

Map

Reduce

Filter

Like this:

Related

By Alex Rivers

You Missed

TypeScript Type Conversion Mastery: Efficient Error-Free Code

Mastering Boolean Logic in TypeScript: Unlock Efficient Coding

Mastering Null and Undefined in TypeScript: A Comprehensive Guide

Redbean2: The Shape-Shifting Web Server – One Binary to Rule Six OSes

Map vs Reduce vs Filter in JavaScript

Map

Reduce

Filter

Share this:

Like this:

Related

Related posts:

By Alex Rivers

Related Post

Unlocking Flexibility: The Power of CSS env()

React onClick Handlers

ES6 Abstractions for Better Code

You Missed

TypeScript Type Conversion Mastery: Efficient Error-Free Code

Mastering Boolean Logic in TypeScript: Unlock Efficient Coding

Mastering Null and Undefined in TypeScript: A Comprehensive Guide

Redbean2: The Shape-Shifting Web Server – One Binary to Rule Six OSes