Maybe this meme will help you remember the uses of Map, Filter and Reduce, for Life. :D

Pretty simple, right?

Here we go

Filter:- The filter() method creates a shallow copy of a portion of a given array, that contains the same elements as the ones from the original array (with some filtered out).

const arr = [3, 5, 8, 10, 6, 1]; 
 
// return all the elements from the array which is >= 5 
const newArr = arr.filter(element => element >= 5); 
 
console.log(newArr); 
// expected output:- [5, 8, 10, 6]; 

Map:- The map() method is a copying method. It calls a provided callbackFn function once for each element in an array and constructs a new array from the results.

const arr = [2, 5, 3, 9]; 
 
// double each element present in the array 
const newArr = arr.map(elem => elem * 2); 
 
console.log(newArr); 
// expected output:- [4, 10, 6, 81] 

Reduce:- The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

const arr = [2, 5, 3, 9]; 
 
const initial = 0; 
const sumWithInitial = arr.reduce( 
	(prev_val, curr_val) => prev_val + curr_val, 
	initial 
); 
 
console.log(sumWithInitial); 
// expected output:- 19(0 + 2 + 5 + 3 + 9) 

forEach:- The forEach() method executes a provided function once for each array element. Unlike map(), forEach() always returns undefined and is not chainable. forEach() does not mutate the array on which it is called, but the function provided as callbackFn can.

const arr = [2, 5, 9]; 
 
arr.forEach(element => console.log(element)); 
 
// expected output:- 2 5 9 

There are other methods like at, every, fill, find, findIndex, includes, slice, splice, and many more. You can read more about them here:- Array - JavaScript | MDN

If you like it don’t forget to upvote.

Have a good day.

map()

The map() method creates a new array with the results of calling the function once for every element of the array. Example - Finding square root of the numbers

Without map

var numbers = [4, 9, 16, 25]; 
var result = []; 
for (let i = 0; i < numbers.length; i++) { 
  result.push(Math.sqrt(numbers[i])); 
} 
console.log(result); 

With map

var numbers = [4, 9, 16, 25]; 
var x = numbers.map(Math.sqrt); 
console.log(x); 

reduce()

The reduce() method reduces the array to a single value and called once for every element of the array. Example - Subtract the numbers in the array, starting from the beginning

Without reduce

var numbers = [175, 50, 25]; 
var sum = numbers[0]; 
for (let i = 1; i < numbers.length; i++) { 
	sum = sum - numbers[i]; 
} 
console.log(sum); 

With reduce

function myFunc(total, num) { 
  return total - num; 
} 
var numbers = [175, 50, 25]; 
var data = numbers.reduce(myFunc); 
console.log(data); 

filter()

The filter() method creates an array filled with all array elements that qualified a test scenario. Example - Filtering with age >= 18

Without filter

var ages = [32, 33, 16, 40]; 
var result = []; 
for (let i = 0; i < ages.length; i++) { 
	if (ages[i] >= 18) 
		result.push(ages[i]); 
} 
console.log(result); 

With filter

function checkAdult(age) { 
  return age >= 18; 
} 
var ages = [32, 33, 16, 40]; 
var data = ages.filter(checkAdult); 
console.log(data); 

I hope it’s clear to you, the difference it makes using these functions rather than the traditional way !

I think the answer is a matter of style and way of thinking. Using [math]map[/math] enables a more declarative, functional style.

One the one hand, [math]map[/math] is more declarative. You convey the intent to perform an operation over a collection (the what) whatever this may be (array, map, set, list, etc) versus actually looping and indexing each element (the how). The first approach abstracts over the collection used, whereas the second exposes the type of collection used—[math]map[/math] is an abstraction.

In addition, using [math]map[/math] takes advantage of functors. Functors are immutable operations over types in that the “container” used to store the information (array, map, set, list, etc.) is not mutated.

Also, [math]map[/math] is portable. Because it’s meant to abstract the underlying iterator and looping syntax, it’s portable to any programming language.

There’s some theoretical stuff in computer science that involves the study of algebraic monoids. A list or string is what’s known as a “free monoid” over some set of symbols—called the alphabet, it’s basically the type of the elements in a list.

There are lots of different concepts you can study with monoids, and it turns out many of them are pretty useful in programs. For example, “mapping” from one list to another—this is creating a new list by applying a function to every element of an old list and preserving the sequence.

It also turns out that essentially all of these operations are specific variations on a more general pattern, called a “fold”. The basic idea of a fold is to take a function that takes two arguments, call them type A and type B, and returns a type A, along with an element of type A and a list of type B, and applies the function to each element in the list with the “current” A element to produce a new A element. The fold then returns the final A element.

Mapping over a list, summing a list of numbers, computing the length of a list, filtering a list to keep only elements that match some predicate, and many many other operations are examples of folds.

The reduce method is an implementation of “fold” for JavaScript arrays being used to represent lists.

map:

• Purpose: Transforms each element in an array by applying a provided function.
• Syntax: array.map(function(currentValue, index, arr), thisValue)currentValue: The current element being processed.index (optional): The index of the current element.arr (optional): The original array.thisValue (optional): A value to use as this during the callback execution.
• Return value: A new array with the transformed elements.
• Example:

const numbers = [1, 2, 3, 4, 5]; 
const doubledNumbers = numbers.map(function(number) { 
    return number * 2; 
}); // doubledNumbers: [2, 4, 6, 8, 10] 

filter:

• Purpose: Creates a new array containing only elements that pass a test implemented by a provided function.
• Syntax: array.filter(function(currentValue, index, arr), thisValue)Same parameters as map.
• Return value: A new array with the filtered elements.
• Example:

const evenNumbers = numbers.filter(function(number) { 
    return number % 2 === 0; 
}); // evenNumbers: [2, 4] 

Key differences and use cases:

• Transformation vs. Selection: map transforms every element, while filterchooses specific elements based on a condition.
• New Array Creation: Both methods create a new array; they don't modify the original array.
• Chaining: You can often chain map and filter together for more complex data manipulation.

Additional considerations:

• Arrow functions provide a concise syntax for callback functions.
• Consider using forEach for side effects without creating a new array.
• reduce can be used for more complex transformations and aggregations.

Remember, choosing the right method depends on your specific data manipulation needs. If you have further questions or require more tailored examples, feel free to ask!

I saw this question and thought, is it ? Is it really ? I had a co-worker that refused to acknowledge any information on a similar issue, he was certain that a backwards for loop would always be faster. I will give the guy a credit, he is super smart, I will not deny that perhaps at very early ages, pre javascript compilers that it might have been, so his code always uses backward for loops, always. Extremely annoying. I made a huge array, and did tests running a few million times, and they were equal.

So, I think that people don’t know how to write for loops.

I honestly think it is because people check length in every loop. I made two version, first I make an array:

a = []; 
for (var i = 0, c = 10000; i < c; i++) { a.push(i); } 

Then I do a for loop

forloop = function() { 
 b1 = new Date(); 
 for (var i=0, c=a.length; i<c; i++) {}; 
 b2 = new Date();  
 console.log("time : ", b2.getTime()-b1.getTime()); 
} 

Then I do a map loop

maploop = function() { 
 b1 = new Date();  
 a.map(function(i) {}); 
 b2 = new Date(); 
 console.log("time : ", b2.getTime()-b1.getTime()); 
} 

I of course run each loop a number of times. And frankly I am not seeing much if any difference.

> forloop() 
time : 0 
…. 
> maploop() 
time : 0 

Each operation takes 0–1 milli second. I think the once in a while 1ms time is frankly the date creation part, not the loops by themselves.

I am quite sure you can find more scientific ways.

This is how way to many people do for loops

var i = 0; 
// a is declared like in the first code 
for (i = 0; i < a.length; i++) {}; 

This example will check the length of a array for every iteration.

“experience has suggested”? Strange words.

I would understand more “I have measured”… :-)

Actually, my own experience suggests… the contrary. ;-) And I don’t trust my own judgment more than your! :-D

You don’t use map, filter and all to have speed gains. You use them because they are readable, easier to understand, more compact, etc.

Beside, it probably totally depends on the browser, its JS engine, its version (they improve it daily, etc.

Why it could be slower? Perhaps because it does the same job, but adds a function call on each loop!

Why it could have the same speed? Because the JS engine might be smart enough to inline this function call…

Why it could be faster? Because the engineers recognized it becomes a frequent pattern, and spent some time to particularly optimize this use case, or trigger the Jit compiler early, etc.

Why it is not important (or rarely)? Because you will rarely notice a real difference in speed in the real world. User won’t see if an operation was completed in 2 ms instead of 3!

This can be relevant if you process gigabytes of data on Node.js, but then you will use a real profile, not gut feelings… ;-) And beware, because some optimizations can be made irrelevant by a new version of the engine!

Last note: I don’t think this applies to Array.prototype.map and similar, ie. the native JS functions. But if you use Lodash’s functions instead, and chain them, it can indeed be faster.

By chaining, I mean instead of doing var a = _.filter(data, f1); var b = _.map(a, f2); etc., you do var r = _(data).filter(f1).map(f2).value();

It can be faster because Lodash will shortcut some operations, avoiding to make intermediary arrays, etc.

.map() allows you to create a new array by iterating over the original array and allowing you to run some sort of custom conversion function. The output from .map() is a new array.

.reduce() allows you to iterate over an array accumulating a single result or object.

These are specialized iterators. You can use them when this type of output is exactly what you want. They are less flexible than a ‘for’ loop (for example, you can't stop the iteration in the middle like you can with a ‘for’ loop), but they are less typing for specific types of operations and for people that know them, they are likely a little easier to see the code's intent.

I have not myself tested the performance of .map() and .reduce() versus a ‘for’ loop, but have seen tests for .forEach() which showed that .forEach() was actually slower in some browsers. This is perhaps because each iteration of the loop with .forEach() has to call your callback function, whereas in a plain for loop, you do not have to make such a function call (the code can be directly embedded there). In any case, it is rare that this type of performance difference is actually meaningful and you should generally use whichever construct makes clearer, easier to maintain code.

If you really wanted to optimize performance, you would have to write your own test case in a tool like jsperf and then run it in multiple browsers to see which way of doing things was best for your particular situation.

Another advantage of a for loop is that it can be used with array-like objects such as an HTMLCollection which are not actual arrays and thus don't have methods like .reduce() and .map().

There are two ways of changing data. The first method is to directly mutate the values stored in a variable.

The second way is to create a new object and copy the values of the first variable with the desired changes. This is a concept known as immutability. This second technique is what methods like slice() and map() do.

Avoiding data mutations allows programmers to keep references to older versions of the object and allows them to change to different states when needed.

One technique is is not necessarily better than the other. Here’s a discussion similar to the question you’re asking on SE.

If immutable objects are good, why do people keep creating mutable objects?

If you only need those two things, I would not recommend using a library.

That said, I strongly recommend familiarizing yourself with Lodash. It is packed with very powerful utility functions that can often be combined to perform complex operations on your datasets, using very little code.

The creator of Lodash, John Dalton, is so obsessed with performance that Microsoft hired him to be in charge of JavaScript benchmarks, I think on their Edge browser.

Lodash is used by nearly everyone in the JavaScript community. As with most popular libraries, the common practice is to first attempt to use the native methods. If they're available, it will use them and exit the library. If they're not available, it will provide code to achieve the desired outcome.

Guys like John have made it their job to ensure your operations run as fast as possible, consistently, and without issue across browsers. I recommend outsourcing that labor by using a library like Lodash.

Array.prototype.filter() - Array.prototype.map()

Filter, as the name implies, takes each element of an array, and returns a resulting array, where some elements of the original array might have been filtered out.

It takes a predicate, a function telling for each element if it must be kept or not. If the function returns a falsy value, the element is filtered out.

Here, since it returns contact.email, it filters out contact objects without an e-mail field (or with a null or empty value).

Map takes each element of an array, and transforms it. It returns a resulting array, of same size than the original, with the transformed elements.

Here, for each contact, it creates a React element, using the contact's information.

Let's say we have the text for the State of the Union address and we want to count the frequency of each word. You could easily do this by storing each word and its frequency in a dictionary and looping through all of the words in the speech. However, imagine if we have the text for all of Wikipedia (say, a billion words) and we wanted to do the same thing. Our poor computer would be stuck looping for ages!

MapReduce is a programming model that allows tasks (like counting frequencies) to be simultaneously (parallel) performed on many (distributed) computers. Now, instead of one computer having to loop through a billion words we can now have 1,000 computers simultaneously looping through only a million words each -- that's a 1000x time improvement!

There are two parts to MapReduce: map(), and reduce().

Map() takes in a word and "emits" a key and value pair. In this case, key = a word, and value = 1 (we just have one instance of the word). For instance, the phrase "bright yellow socks" would emit ("bright", 1), ("yellow", 1), and (“socks”, 1). Map() is called for every single word -- all one billion of them.
(You might be asking why we did this very redundant step. Bear with me for a second!)
Now, we have one billion key-value pairs. What do we do with these?

This is where Reduce() comes in. All of the key-value pairs with the same key are combined and fed into Reduce(). Let's take "hello" for instance, and say that there are 500,000 occurrences of the word in Wikipedia. Then, we have 500,000 key-pairs that are passed into a single Reduce() call. Now, all we have to do is loop through 500,000 ("hello", 1) pairs and sum up all of the values. This is much easier than having to loop through a billion. Reduce() then "emits" another key-value pair; this time, it's ("hello", 500000), or the word, and the total sum of the values associated with that word. Repeat the Reduce() call for every other word, and we've got the frequency for every word!

By distributing this massive job to many computers, if any one of these computers fail for any reason, we can just restart the specific segment it was working on. Imagine if this happened on a single computer!

Note that this is a very simple example. MapReduce has been used on many problems that can be fit into this Map()/Reduce() model, such as Google's search index, machine learning, and statistical analysis.

MapReduce is a distributed computing paradigm. It has gained a lot of popularity as it provides a simple model for distributed computing, while ensuring data persistence and availability.
Conceptual Model:
As the name suggests, MapReduce consists of 2 components:

1. Map
2. Reduce

A programmer needs to specify:

1. The input file. It contains a set of 1 or more key value pairs.
2. The Map Function.
3. The reduce Function.

Map:

• Input: The Map function takes a range of <key, value> pairs as input.
• Output: 0, 1 or more intermediate <key, value> pairs. The Keys outputted from Map function are different from input keys.

The Map function will also group the intermediate <key, value> pairs based on the key.
Reduce:

• Input: Intermediate set of <key, value> pairs, grouped by the key, as outputted from Map function.
• Output: The reduce function will combine the values for each distinct key. It will output a set of distinct key and their corresponding combined value, <distinct key, combined value>. It can combine the keys using any mathematical function, like addition, multiplication, etc.

Example:
We have a huge document, split across several machines/nodes. We want to determine the number of times each word appears in the document.
For this example, the input <key, value> is the document and the document content.
The Mapreduce system will split the entire document into several chunks.
The chunks are split across several nodes. To ensure availability and persistence, each chunk is replicated 2x or 3x. Mapreduce implementations, like Google File System (GFS), Hadoop Distributed File System (HDFS), ensure this step.

Map Function:

• The map function will parse through the entire chunk and read each word.
• For each word, it will provide a count of 1.
• Output of map function will be a set of words, each with a count of 1. Thus, the key is a word in the file chunk, the value is 1.
• The MapReduce system will also automatically group the <key, value> pairs by the key, using a partition function (usually a hash function).

Reduce Function:

• For each word, the reduce function will add all the counts.
• The Output of reduce will be a set of distinct words, with its total count across the document.

Source: Mining Massive Datasets - Jure Leskovec, Anand Rajaraman, Jeff Ullman

Array prototype functions are not required at all to use arrays. You could be stubborn and insist on making your life harder and your code less maintainable by reinventing the wheel, but why do this:

let array = [1,2,3,4,5]; 
let array2 = []; 
 
for(let i = 0; i < array.length; ++i) 
    array2[i] = array[i] * array[i]; 

when you can instead do the much more simple and idiomatic:

let array = [1,2,3,4,5]; 
let array2 = array.map(x => x * x); 

Don’t try to be clever. Cleverness is poison. Clean, idiomatic, readable, maintainable code is the way to go.

Idioms are essentially “code memes”. They’re recognizable patterns that increase readability. Mostly by virtue of repeated use.

TL;DR - because what you think is clever big brain uber hacker code is actually garbage and your peers will hate you for it. Let’s see less of that and more of memes.

Code sample using the reduce function:

const myArrayOfObjects = [ 
    { myKey: 1, data: 'some data' }, 
    { myKey: 2, data: 'some data' }, 
    { myKey: 3, data: 'some data' }, 
    { myKey: 4, data: 'some data' }, 
    { myKey: 5, data: 'some data' }, 
    { myKey: 6, data: 'some data' }, 
    { myKey: 7, data: 'some data' }, 
]; 
 
const myMap = myArrayOfObjects.reduce( 
    (accumulator, currentObject) => ({ 
        ...accumulator, 
        [currentObject.myKey]: currentObject, 
    }), 
    {} 
); 
 
console.log(myMap); 
 
// output: 
// { 
//     '1': { myKey: 1, data: 'some data' }, 
//     '2': { myKey: 2, data: 'some data' }, 
//     '3': { myKey: 3, data: 'some data' }, 
//     '4': { myKey: 4, data: 'some data' }, 
//     '5': { myKey: 5, data: 'some data' }, 
//     '6': { myKey: 6, data: 'some data' }, 
//     '7': { myKey: 7, data: 'some data' } 
//   } 

Repeated keys will be overwritten, so take into account that if you have repeated keys only the last one will remain.

The map(). filter() and reduce() are the functions which brings a shorthand approach to python programming. These functions could be replaced by list comprehensions or loops. All of these functions are releated to the lamda functions as they use function object as first argument, and this object could be from a pre-defined function like [def add(x, y)].

We’ll discuss these functions in brife but with complete knowldge about their functionality with an example for each:

1. The map() Function : The map() function iterates through all items in the given iterable and executes the function we passed as an argument on each of them, and the result will be in boolean where the condition gets staisfied ouput will be True else it will be False.
   Syntax like :

map(function, iterable(s)) 

with this function we can pass as many itretables to the functions we want. A peice of code to help you understand better:

def findA(s): 
    return s[0] == "A" 
 
fruit = ["Apple", "Peach", "Pear", "Apricot", "Lemon"] 
map_result = map(findA, fruit) 
 
print(list(map_result)) 

Output looks like:

[True, False, False, True, False] 

2. The filter() Function: Just like map() filter() function also take two arguments first one is a function and second is an itretables. Output consists of only the condition which is satisfied.

def findA(s): 
    return s[0] == "A" 
 
fruit = ["Apple", "Peach", "Pear", "Apricot", "Lemon"] 
map_result = map(findA, fruit) 
 
print(list(map_result)) 

Output looks like:

['Apple', 'Apricot'] 

Which is a shorter list compared to map()

3. The redue() Function: It does not return a new list based on the function and iterable we've passed. Instead, it returns a single value. But in python 3 reduce is not a inbuilt function you can import it from functools module.
reduce() works by calling the function we passed for the first two items in the sequence. The result returned by the function is used in another call to function alongside with the next (third in this case), element.

from functools import reduce 
 
def add(x, y): 
    return x + y 
 
list = [2, 5, 10, 1] 
print(reduce(add, list)) 

Output looks like:

18 

JavaScript doesn’t have a “map” type, because it doesn’t need one. Every object is already a map from its attribute names to their values. You can do this:

dict = { 
  first: 'John', 
  middle: 'Q', 
  last: 'Smith' 
} 
 
console.log(dict.first)    // will log John 
console.log(dict['first']) // same thing 
 
dict = new Object() 
dict['first'] = 'John' 
dict['middle'] = 'Q' 
dict.last = 'Smith' 
 
console.log(dict.first)    // will log John 
console.log(dict['first']) // same thing 

Objects map keys (names) to values, so you can look up or replace a value if you know its name.

Arrays are sequences of values in a particular order, so you can look up or replace a value by its index.

Arrays are almost just objects where the keys are numbers starting from 0. However, you stick an extra prototype, Array, into the chain ahead of Object (or get that automatically when you use the […] syntax), which means you get some extra array-specific methods.

arr = [10, 20, 30] 
console.log(arr[1]) // will log 20 
 
arr = new Array() 
arr.push(10) // Don't have to specify that this is element 0 
arr.push(20) // or that this is element 1 
arr.push(30) // or that this is element 2 
console.log(arr[1]) // same again 
 
// Can't do this with a mapping; it wouldn't make sense 
console.log(arr.join('/')) // 10/20/30 

Have you tried running it?

It'll produce the array [7, 'ate', 9].

The filter() method creates a new array with only the elements that pass the test implemented by the callback.

So what happens behind the scenes is that we make a new empty array and iterate through the values in [7, "ate", "", false, 9]. Each time we're running a test to see if that element should go into the result array. The test could be anything, but in this case it's just casting to boolean, ie it'll be true, and the value will get included, if and only if it counts as "truthy" in javascript.
An empty string isn't truthy, neither of course is the boolean false. Those are the only elements which don't get included.

So that's why that's that.

As to why the bouncer() function is being passed a second parameter of a empty string... who knows, eh.

The choice of using a map or array in JavaScript depends on the specific use case. Maps are good for storing key-value pairs, while arrays are good for storing ordered collections of values.

In general, if you need to store key-value pairs and access them by key, a map is a better choice. If you need to store a large amount of data in a sorted order, an array is a better choice.

Here are some additional things to consider when choosing between a map and an array:

• The size of the data. If the data is small, an array may be a better choice, as it is easier to work with. If the data is large, a map may be a better choice, as it is more efficient.
• The need for iteration. If you need to iterate over the data, an array may be a better choice, as it is easier to do. If you only need to access elements by key, a map may be a better choice.
• The need for sorting. If you need to sort the data, an array may be a better choice, as it is easier to do. If you do not need to sort the data, a map may be a better choice.

Map, filter and reduce are “high-order functions”, which means a function that takes a function as an input argument or returns a function as output. Map, filter and reduce all take a function as an argument. This is a technique which originated in functional programming, but is now common in many languages.

Another reason these functions are “functional” is that they do sequence operations without any observable side effects. In imperative programming, you normally operate on the members of a sequence with a loop, which requires mutating values in place. In complex loops, state can potentially become difficult to keep track of. Factoring sequence operations through map, filter and reduce will often help produce a solution that requires fewer observable side effects and mutations. ideally, it means that sequence operations will become referentially transparent and hopefully easier to reason about—though I have seen some crazy uses of reduce, which, though referentially transparent, were anything but easy to reason about.