reduce Array Method | JavaScript Tutorial

the array reduce method executes a callback function on every elements of an array and it will return one single output value think of it like getting an array of items and then adding all of the items inside one resulting value the best example for this will be we have a numbers array with five numbers inside and we want to add these numbers up into a total variable let's do that and see how produced works so total will be numbers that reduce now this reduce takes in two parameters a callback function and the initial value which we're going to start when the iteration starts so callback and initial value now in our example the total should start with zero right and we get the callback let's write a callback here let's change it to sub okay so change is the South now this callback receives four parameters the accumulator the value the index and the array these three parameters are used in the other higher-order functions we learned like map filter some every and so on so forth but this one is the new one these will keep track of the value which will be returned at the end and it will be initialized with the initial value we provide here now in order to add up all the numbers we're going to need to return the accumulator plus the value so we're getting the value at every step and we're adding it's inside the accumulator but also inside that accumulator we need to add accumulator at that step so let's remove this because we don't need it and go over step by step how this works initially the accumulator will be zero and we're going to add one this will be one enemy it will be stored inside the accumulator next we're going to get to and we're going to return accumulator which is not 1 plus 2 which will be 3 so these now the accumulator will become 3 next step it will be 3 plus the value 3 which will be 6 and it will be stored inside accumulator next step will be 4 4 plus 6 will be 10 and it will store inside accumulator and next step is 5 plus 10 will be 15 and that's the last step and then it will be returned and stored inside the total and now if we console that flog the total you can see we get 15 which is nice because now to add 6 we get 21 if we get 7 we get 28 so all the numbers will be nicely added this is optional if we don't provide 0 here the initial value will be the first value from the array and that iteration will be skipped all right let's see some other examples so we can understand better how the reduce works but basically the main idea is this you have an array of elements either numbers strings objects arrays whatever and you want to compress them inside one returning value that value can also be a number a string an array or an object whatever you want but basically that's how the logic behind this works let's see another example what if we want to get the maximum from an array let's change this to the maximum and let's change this to call back so we don't need to rewrite the function name always alright so we get the callback and we store the maximum which will be retired now what are we going to do here well keep in mind that we need an initial value so let's do minus infinity because that's the lowest point we can pick and now inside this function we want to return always the bigger value between the value we have from the array or the accumulator which we're going to use to store the maximum value at the current step all right so if accumulator is bigger than value then we want to return the accumulator otherwise we want to return the value which will be stored in the accumulator which will be used in the next iteration all right let's see how this works we should get 7 because 7 is the biggest if we put here 10 we should get 10 which is awesome so again we get the accumulator which initially is minus infinity so we're picking the low load number the lowest number and then we're checking if this is bigger than the current value which is 10 in this example then we return the accumulator but in our case this is minus infinity so we're going to return the value now this value will be stored inside the accumulator which will be used in the next iteration and so on and so forth make sense I hope so let's use it in another example I'm going to paste in an array of objects and then we're going to write a reduce function or that array all right so now we have a little store which has a three kind of products laptops desktops and mobiles we have the value for each laptop which is one thousand and we have the amount of laptops we have same for all the products now what we want to do is to find out what's the word of all the products we have in our store and the reduce method is perfect for that so let's write the function to get the total value store put the value from store store that reduce and here we need to pass in the callback function let's do it in line with an arrow function so we get accumulator and we get the value or the item in this key all right and now we want to start with zero that's the initial total we have and here we want to return keep in mind that the arrow function here returns the value of accumulator plus the item that you times item that count all right then let's put this in parentheses okay so every time we're going to multiply the value of the item with the count of the item and then we're adding it inside the accumulator and returning it and now console that flog the total value stored should be fourteen thousand you can do the math but that's the right number I promise okay so that's another example of how the reduce method works keep in mind again that it will take an array and it can compress it to one single value I hope you enjoyed this tutorial and I'll see you in the next one bye [Music]

Channel: Florin Pop

Views: 11,991

Rating: 4.9024391 out of 5

Keywords: javascript, javascript tutorial, javascript tutorial for beginners, array method, javascript arrays, higher order function, learn javascript, javascript array methods, reduce, javascript reduce, learn reduce, reduce array method, reduce HOF

Id: IXp06KekEjM

Length: 8min 18sec (498 seconds)

Published: Fri Apr 03 2020