Map filter and reduce method in Javascript

In this segment, we will discuss about the array methods which are map(), filter() and reduce(). These methods can be used on arrays as opposed to using the traditional for loop syntax, which can be used to iterate over the array and perform some operation.

Let’s first look at the map() method in the next video.

For example, you are having a website which lets users order food online. You have stored the details of some restaurants in the database. Each restaurant has the details of the menu items served by it, which the customers can order. Corresponding to each menu item, there is the price of that menu item. Now, imagine that the restaurant starts giving discount of 10% on all its menu items. This means that the price of each menu item of the restaurant needs to be reduced by 10%. How will you do this using the map() method given that you are provided with the price of each menu item in an array?

Well, you can use the map() method to iterate over the entire array given to you for the prices of the menu items served by the restaurant. Then, while iterating over each item in the array, you can reduce the price of the item by 10%.

Thus, the map() method is used when you wish to apply a common function to all the elements in the given array. The function takes a parameter which results into each element in the array. The resultant value is an array containing all the elements after the given function has been applied on each original element.

In the next video, let’s look at the filter() method.

Extending the example that we took earlier where you are having a website which lets users order food online. Now, imagine that a customer wants to search for names of all the restaurants which give atleast 10% discount to its customers. How can you achieve the code for this given that you are provided with an array of objects where each object contains the details of the restaurant which includes the name and the discount (in percentage) offered?

Well, you can use the filter() method to iterate over the entire array given to you for the discount offered by each restaurant. Then, while iterating over each item in the array, you can check whether the discount is greater than or equal to 10 or not. If yes, you can simply return that item’s name from the array. Thus, the resultant value will be an array consisting of the names of all the restaurants which give atleast 10% discount on its menu items.

The filter() method is used when you wish to filter some elements from the given array. You simply need to pass a function which takes a parameter which results into each element in the array. The function body specifies the filter condition and the resultant value is an array containing all the filtered elements.

In the next video, let’s look at the reduce() method.

Again extending the example that we took earlier where you are having a website which lets users order food online. Now, imagine that you need to display the average rating provided to the restaurant by the customers? How can you achieve this in the code given that you are provided with an array consisting of the rating given by each customer?

Well, you can use the reduce() method to iterate over the entire array given to you for the rating given by each customer. Then, while iterating over each item in the array, you can reduce the array to find the sum of all the ratings given by all the customers. At the end, you simply need to divide this sum by the total number of items in the array, which represents the number of customers. Thus, the resultant value will be the average of the ratings given by all the customers to the restaurant.

The reduce() method is used when you wish to reduce the array down to a specific value. You simply need to pass a function that takes two parameters. The first parameter is the accumulator, in which the result keeps on getting stored after the function is applied on each element in the array. The second parameter is the element which corresponds to each element in the array, starting from the second element. The resultant value is the value of the accumulator.