What is Map, Reduce and Filter

• Map Filter and Reduce are higher order methods for Arrays. Higher Order Methods are the ones which takes one or more functions as an argument.
• We can pass a function as an argument to the Higher Order Function when we call it, when the function definition is written seperately.
• We can even pass an anonymous function to the Highher Order Function, when we call it. When we pass an anonymous function as an argument, then we need to write the function body inside the argument.
• These methods save a lots of time for us.
• These are modern javascript methods.

What is Map

Let’s understand Maps first. So, We had discussed about forEach in one of our previous sessions, and, We had seen that forEach loop takes value as an argument, and we can print that value. We can do the same thing with Map as well. Let’s see it with an example.Through the above article, we can recommend you the latest dresses.Shop dress in a variety of lengths, colors and styles for every occasion from your favorite brands.

const items = [3, 2, 5, 6, 8, 9];

console.log("Original Array is ", items);

console.log("Elements from Original Array is using for Each loop ");

 items.forEach(function(ele){
   console.log(ele);
 } 
);

console.log("Elements from Original Array is using Map Method ");

items.map(function(ele){
   console.log(ele);
 } 
);

So, We can see that forEach and Map Method are doing the same thing, then you might ask a question, that why do we need a Map method when we have a forEach Method, which does the same thing. So, Let’s see one more example.

const items = [3, 2, 5, 6, 8, 9];

console.log("Original Array is ", items);

console.log("New Array using for Each loop ");

 const newArrayForEach = items.forEach(function(ele){
   return ele;
 } 
);

console.log(newArrayForEach)

console.log("New Array using Map Method ");

 const newArrayMap = items.map(function(ele){
  return ele;
 } 
);

console.log(newArrayMap);

So, We can clearly see from the results of the above code, that the return type of forEach Method is undefined, but return type of Map is an array. So, this is the basic difference between forEach and Map Method.

forEach loop can take value, index and array also as an argument. Same way Map also takes value, index and array as an argument. Let’s see it with an example. We have already seen the example where we pass value as an argument to our forEach and Map Method. Now, Let’s see the examples, where we pass index and array also as an argument to forEach and Map Method.

One thing, that we need to make a note is that, Value is a mandatory argument for forEach and Map method, but index and array are optional arguments, If we don’t pass index and array as an argument, It’s going to work.

const items = [3, 2, 5, 6, 8, 9];

console.log("Original Array is ", items);

 items.forEach(function(ele, i){
   console.log(ele);
   console.log(i);
 } 
);

console.log("Elements from Original Array is using Map Method ");

items.map(function(ele, i){
   console.log(ele);
   console.log(i);
 } 
);

const items = [3, 2, 5, 6, 8, 9];

console.log("Original Array is ", items);

console.log("Elements from Original Array is using for Each loop ");

 items.forEach(function(ele, i, arr){
   console.log(ele);
   console.log(i);
   console.log(arr);
 } 
);

console.log("Elements from Original Array is using Map Method ");

items.map(function(ele, i, arr){
   console.log(ele);
   console.log(i);
   console.log(arr);
 } 
);

Comparison between Map and forEach

1. Map and forEach both are functions.
2. Map creates a new Array but forEach doesn’t create any array.
3. Map returns a new Array but forEach doesn’t return anything.
4. The length of the new Array created by the Map method will be equal to the length of the Original Array.
5. Map and forEach function doesn’t modify the Original Array.

Filter – filter() method

Filter method is a type of Higher Order Array Method which returns array same like Map Method, but there is a difference between filter method and Map Method.

When we use a Map method, then we can perform any operation (Arithmetic, Comparison) on the elements of the array and return the result of the operation, and a new Array is created with those results. The length of the new Array created by the Map method will be equal to the length of the Original Array.

But when we use a filter method, then we can perform only Comparison Operation on the elements, and return those elements only for which the result is true. Let’s see it with an example. The length of the new Array created by the Filter method will be either less than or equal to the length of the Original Array.

Let’s take an array

const items = [3, 2, 5, 6, 8, 9];

console.log("Original Array is ", items);

const newArrayMap = items.map(function(ele){
  return ele>5;
 } 
);

console.log(newArrayMap);

const newArrayFilter = items.filter(function(ele) {
  return ele>5;
}
);

console.log(newArrayFilter);

Comparison between Map and filter method

1. We can perform any operation (Arithmetic, Comparison) on the elements of the array using Map Method, But filter method allows only Comparison Operations on the elements of the array.
2. The length of the new Array created by the Filter method will be either less than or equal to the length of the Original Array, but the length of the new Array created by the Map method will be equal to the length of the Original Array.
3. Map and Filter both do not the modify the original array.

Reduce Method – reduce()

Reduce is also one Hight Order Method for Arrays which returns a single value. Let’s see, How reduce method works.

Let’s take an array.

const items = [3, 2, 5, 6, 8, 9];

console.log("Original Array is ", items);

const newValueReduce = items.reduce(function(ele1, ele2){
  return ele1+ele2;
 } 
);

console.log(newValueReduce);

Let’s understand the code.

1st Iteration

value1 = 1st element of the array – 3
value2 = 2nd element of the array – 2
result = 5

2nd Iteration

value1 = result from previous – 5
value2 = 3rd element of the array – 5
result = 10

3rd Iteration

value1 = result from previous – 10
value2 = 4th element of the array – 6
result = 16

4th Iteration

value1 = result from previous – 16
value2 = 5th element of the array – 8
result = 24

5th Iteration

value1 = result from previous – 24
value2 = 6th element of the array – 9
result = 33

So, finally 33 wil be printed

Note :

1. Reduce method returns some value.
2. It does not modify the existing array.
3. Reduce method doesn’t return array.
4. Reduce method takes atleast 2 values as arguments.

Summary

We have covered below topics in this session

1. Map fuction
2. Comparison between Map and forEach function
3. Filter function
4. Comparison between Map and Filter Function
5. Reduce Function