JavaScript Array Reduce

once again with our array of numbers let's say we want to calculate the sum of all these numbers in this array this would be similar to calculating the total cost of all the items in a shopping cart so each numbers here could represent the price of an item in a shopping cart of course we wouldn't have a negative number there but you got the point so here's a very simple algorithm for calculating the sum of all the numbers in this array we start with declaring a variable called sum and we initialize it to zero next we loop over this array get each element or each number and add it to some something like this for let n of numbers now we're going to add n to sum so we can write an expression like this sum equals sum plus n or a better way is to use the addition assignment operator so you can exclude the second sum so this is exactly like the statement we had before and finally we display sum on the console so we get 5 now there is a cleaner and more elegant way to write the same code using the reduce method in arrays so all these arrays have this reduce method and with this method we can reduce all these elements in an array into a single value that single value can be a number it can be a string it can be an object it can be anything in this example we want to reduce all these elements into a single number that is the sum of all the numbers in this array so let's see how we can use the reduced method this method takes a callback function with two parameters accumulator and current value so here I'm using an arrow function like this this accumulator parameter here is exactly like this song we have here it's something that we initialize and then this callback function is executed multiple times each time this current value will be set to one element in this array okay so in each call we want to get this current value and add it to an accumulator so we simply return the sum of accumulator plus current value now internally this reduce method will get this result and store it in the accumulator you will see that in a second now one last thing we need to do here is to initialize this accumulator to zero so as the second argument to the reduce method we pass zero note that this reduce method has two arguments the first argument is a callback function and the second argument is the initial value for the accumulator finally we get the result as a single value in this case some now we don't need this code anymore and finally let's bring let's consult our log here save the changes you can see we get the same result five but let's see what exactly is happening here so initially we said accumulator to zero so I'm going to set a equals zero in the first round current value will be set to the first number so C equals one now we add this together so we get one and a will be set to one after this callback function is executed so as a result a will be one now in the second round a is one current value will be set to the second number in this array so minus one now once again we add them together so a will be zero after the second call now the third call so a is zero the current value is going to be set to the third element in this array so - and as a result a will be two and finally in the last call we start with a set to two and current value will be three okay so the result will be five and that's why we saw five on the console so essentially with this reduce method we start with an accumulator then we loop through this array and convert all these elements into a single value which is in this case accumulator or the sum of all the numbers in this array now we can make this code even shorter we can exclude the initialization of the accumulator and with this accumulator will be set to the first element so let me show you what will happen a will initially be set to 1 and current value will be set to minus 1 that is exactly like our second call here right so as a result a will be set to zero now in our second round a will be zero and current value will be 2 because in the previous call current value was here so now we're here so current value will be 2 and as a result a will be 2 and finally in the last call a will be 2 and current value will be 3 the last element in this array and once again we get fine so if this supply an initial value we'll have one more call if we don't the first element in this array will be used as the initial value so this is how the reduce method works and finally to make this code a little bit shorter we can get rid of this return keyword because we have a single line and we are simply returning a value so remove the return the semicolon and the curly braces put everything on a single line like this so with this single line of code we reduce the numbers array and this is how our reduction algorithm works we simply get the current value and add it to accumulator this is far cleaner and more elegant than declaring a song and then looping over this array like let n of numbers and then add and to the sum that's a very old way of writing code hi guys thank you for watching my javascript tutorial this tutorial is part of my JavaScript course where you learn all the essential JavaScript features that every web and mobile application developer must know if you're an absolute beginner or have some experience in JavaScript and are looking for a fun and in-depth course that teaches you the fundamentals of JavaScript this course is for you this course is also packed with tons of exercises that help you master what you learned in the course in fact many of these exercises are questions that come up in technical programming interviews so if you're pursuing a job as a front-end or a back-end developer or if you simply want to have a more in-depth understanding of JavaScript I highly encourage you to enroll in the course for a limited time you can get this course with a discount using the link in the video description click the link to find out more about the course and in row

Channel: Programming with Mosh

Views: 183,034

Rating: 4.9446716 out of 5

Keywords: Javascript, web development, web developer, front end, front-end, back-end, back end, mobile development, mobile developer, es6, learn javascript, javascript programming, programming, array, reduce, code with mosh, programming with mosh

Id: g1C40tDP0Bk

Length: 7min 42sec (462 seconds)

Published: Tue May 15 2018