For loops are messy! Share it on LinkedIn! Due to that reason we were introduced with these three , namely 🗺️Map, 🥅Filter & ✂️Reduce. higher order functions But before going into the functions, let’s clear out what are higher order functions and Functional Programming. Photo by on Roman Mager Unsplash Functional programming? Functional programming is a programming paradigm — a style of building the structure and elements of computer programs — that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data — Wikipedia Photo by on Yeshi Kangrang Unsplash Higher Order Functions Higher order functions are functions that that takes other functions as arguments or return them. In simple words, if a function is returning another function or taking a function as an argument to operate upon, than that function is called a Higher Order Function. All of the , and operate upon arrays but behave very differently. map filter reduce Let’s dive in! Array.prototype.map() || map() || 🗺️ The method creates a new array with the results of calling a provided function on every element in the calling array → MDN **map()** Photo by on Capturing the human heart. Unsplash var arr = [5, 7, 4, 12];let map = arr.map(x => x * 7);console.log(map); The above codes takes in each element of the array ,multiplies it with 7 and puts it in a new array(done by internally) map the same with a for loop var arr = [5, 7, 4, 12];var map=[];var i=0;for(i=0;i<arr.length;i++){map.push(arr[i]*7)}console.log(map); From 3 lines we directly went to 7 lines of code, which is more than double. calls a provided function upon each element in the array and constructs a new array from the results. is called only for indexes for which the array contains a value. map callback callback builds a new array and never changes/mutates the old one, it just iterates over the old array, but the mutation can be done if the callback is programmed to do so. map When the function starts iterating over the array a range which is the length of the array is set and if new elements are added to the array during this time, won’t access them. map map Let’s dissect it- - The parameters taken by the function is a callback function which in turn takes parameters Parameters map currentValue, index & array. → It is the current element which is processed by the map. currentValue _optional_→The array on which the was called upon. array| map _optional_→ The index of the current element which is being processed in the array. index| Return- returns a new array with the values processed by the callback. map Array.prototype.filter() || filter() || 🥅 The method creates a new array with all elements that pass the test implemented by the provided function→MDN **filter()** Photo by on Wade Austin Ellis Unsplash var cars = ['Mclaren','Lamborghini','Ferrari','Porsche','Mercedes','Corvette'];let car = cars.filter(e => e.length > 7);console.log(car); The above codes takes in each element of the array, checks if the element length is greater then 7 and puts it in a new array(done by internally) filter the same with for loop. var cars = ['Mclaren','Lamborghini','Ferrari','Porsche','Mercedes','Corvette'];let car=[]for(let i=0;i<cars.length;i++){if(cars[i].length>7)car.push(cars[i]);}console.log(car); From 3 lines to 8 lines calls a provided function upon each element in the array and constructs a new array from the results. only returns the value which satisfy the condition or in other words is evaluated to true. is called only for indexes for which the array contains a value. filter callback callback callback builds a new array and never changes/mutates the old one, it just iterates over the old array. filter When the function starts iterating over the array a range which is the length of the array is set and if new elements are added to the array during this time, won’t access them. filter filter Let’s dissect it- - The parameters taken by the function is a callback function which in turn takes parameters Parameters filter currentValue, index & array. → It is the current element which is processed by the . currentValue filter _optional_→The array on which the was called upon. array| filter _optional_→ The index of the current element which is being processed in the array. index| Return- returns a new array with the values processed by the callback. filter true Array.prototype.reduce() || reduce() || ✂️ The method executes a function (that you provide) on each member of the array resulting in a single output value→MDN **reduce()** reducer Photo by on Plush Design Studio Unsplash const arr = [3, 4, 2, 9];const reduce=(accumulator, currentValue)=>accumulator+currentValue;console.log(arr.reduce(reduce));console.log(arr.reduce(reduce, 7)); In the above code, we create a reduce function which will be passed as a callback to the function. The function returns the addition of all the elements in the array. The stores the sum of the elements after every iteration and represents the value currently processed. The default value of the accumulator is 0 and can also be user defined as done in the second as 7. The accumulator is returned as a final result. .reduce() accumulator currentValue console.log with for loop const arr = [3, 4, 2, 9];var a=0;for(leti=0;i<arr.length;i++){a+=arr[i];}console.log(a); From 3 lines we go to 7 lines. calls a provided function upon each element in the array and is called only for indexes for which the array contains a value. reduce callback The is given 4 arguments callback accumulator currentValue currentIndex array The first time when the is called just before processing the first value the will be the first element in the array while the will have the value of the first element of the array or the value which is specified by the user in the function. callback currentValue accumulator reduce If the accumulator is provided a value then will start the from index 1 and skip the first index as already has the value of the first index. If initially the value is provided the will start from the first index. reduce callback accumulator callback The first time the callback is called, and can be one of two values. If is provided in the call to , then will be equal to , and will be equal to the first value in the array. If no is provided, then will be equal to the first value in the array, and will be equal to the second. accumulator currentValue initialValue reduce() accumulator initialValue currentValue initialValue accumulator currentValue If the array is empty and no initial value is given to the , a is thrown. accumulator TypeError It is usually safer to provide an initial value because there are three possible outputs without , as shown in the following example. initialValue Let’s dissect it- - The parameters taken by the function is a callback function which in turn takes parameters Parameters reduce accumulator, index, array & currentValue. → It is the current element which is processed by the . currentValue reduce _optional_→The array on which the was called upon. array| reduce _optional_→ The index of the current element which is being processed in the array. index| **accumulator|**optional→ Value to use as the first argument on the first call of the . callback Return- returns the value left after reduce is done( ). reduce accumulator Chaining .map(), .reduce(), and .filter() || 🗺️🥅✂️ As we have seen reduce, filter and map are quite powerful on their own, but the cherry on top of the cake is that they all work on arrays and thus can be chained together. Photo by on Katherine Chase Unsplash Let’s take an example- var cars = [{name: "Lamborghini",maxSpeed:320,beauty:99},{name: "Lamborghini",maxSpeed:340,beauty:99},{name: "Ferrari",maxSpeed:310,beauty:99},{name: "Porsche",maxSpeed:330,beauty:99},{name: "Lamborghini",maxSpeed:300,beauty:99}]; The above is the data we will be working with. We have to find the total score of all the Lamborghini’s. Its a one liner- Result- With a for loop we had to create 3 loops which will be quite a mess. The code works like- The filter finds all the cars whose name is filter- Lamborghini. The map works on the array returned by the filter and sums up the beauty and top_speed properties. map- reduce takes the array returned by the map and sums all the values thus returning the total of all the lamborghini. reduce- Conclusion Hope I made the functions quite understandable. Chaining all the 3 functions together makes this a monster as we get our results with writing clean code which is small in length and easy to debug. Clap & . Follow Google

Google

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

Map⇄Filter⇄Reduce↻

Too Long; Didn't Read

Company Mentioned

@ashaymurceilago

RELATED STORIES