JavaScript Array Reduce in 4 Minutes

JavaScript's array reduce is awe-inspiring and fiendishly cryptic.
Use it to reduce a whole array into one value. Want to learn more? Do so in 4 minutes!

[Cael]

This is probably the 4th or 5th different resource I've look at trying to understand reduce. The explanation starting at 1:15 is easily the most concise and beginner friendly explanation I've come across. It's what finally made everything click. Thank you!

[PeteGivens]

Thanks! First explanation I've seen that made me understand what the optional second parameter does

[AgentZeroNine]

Best explanation on reduce I've found so far.

[patrickgomes]

Took me a while to get how the object with key/value pairs was formed and returned, but your distilled, clear explanation served very well! Thanks!

[saugatkarki]

Awesome video! I was getting a little confused with Array Reduce but not anymore! Thanks!

[kkmetcom]

couldn't learn it from freecodecamp, that was very easy from you, thanks man!

[heathersmith]

Thank you for this! Reduce is so weird.

[diycaptions]

Thanks.
This interactive transcript courtesy of www.diycaptions.com
0:00 Good morning. Good afternoon.
0:03 Or maybe good evening for you. Today, we're going to talk all about
0:07 JavaScript array reduce. Now reduce is a native function
0:11 all JavaScript arrays, as well as arrays in other programming languages,
0:15 which reduces the entire array – which is a list of values –
0:18 to just one value. This is easier to demonstrate.
0:21 So we'll get started. To code along at home, open your developer tools on any
0:26 page
0:26 with Ctrl+Shift+I on a PC, or Command+
0:29 Option+I on a Mac. Make sure that you're using Chrome in order to
0:34 use the Chrome Developer Tool. So with Developer Tools open, let's make an array
0:39 to test on. And we'll say var array
0:42 == – and we're just going to make an array of a bunch
0:45 of numbers. That looks good. So we see we have our array.
0:49 And now, if you press array.dot, you see a list
0:52 of all the functions that are available to native JavaScript arrays.
0:56 We're interested in reduce. So reduce
1:00 takes an argument. And hat function is an argument with two values.
1:03 And that function will be called repeatedly
1:06 over the elements of the array. And a will be –
1:10 let's say with this, the first time it runs, a will be equal to 1,
1:13 and b will be equal to 2. It will take those as arguments
1:17 and and b, combine those into one value, and the next time, it will pass those
1:21 as a, and the third
1:24 argument of the array, or the number 3. So let's demonstrate this, in case
1:29 reduce is getting a bit confusing. So we'll say array.reduce function a
1:35 return a plus b. And that returns 28.
1:39 28 is the sum of the entire array. And we've reduced it to just one number.
1:43 We can also say array reduce return a times b.
1:48 And this is the product of all the numbers in the array. A it was easier than doing a for
1:52 loop
1:53 by far. However, array reduce is even more powerful than this.
1:57 Now array.reduce takes an argument.
2:00 And the first argument is a function. But the second argument can be
2:04 anything. And that will be passed in as a
2:07 the first time if it's provided.
2:10 In other words, if I provide this object literal here as the second argument for
2:14 reduce,
2:15 the first time it runs, a will be that empty
2:18 object literal, and b will be the number 1.
2:22 It will then combine those two numbers and pass whatever is returned
2:25 to the next step. So we can say
2:29 var array.reduce – and we'll pass an object and we'll say
2:32 a and the key of a, known as b,
2:36 we're gonna make that equal to
2:39 b times b. So i'ts going to be a series of square roots.
2:44 And then we have to say return a, which is our object. So the object a will be
2:48 passed
2:49 in each stack and will run this each time. And finally, it will return
2:53 the object at the very end. So let's run this. And here, we've created an object where
2:58 each number in our array
2:59 is its square root. And the key is its number itself.
3:02 That's pretty cool. So with that, that's all you need to know, pretty much,
3:07 about array.reduce. it's very powerful.
3:10 A lot of the times, it may be abstracted to say
3:14 filter or find low dash QQ
3:17 abstracts array reduce, because it's complicated and hard to understand.
3:21 But now you understand it. So you can be better prepared to either write your
3:26 own reviews,
3:26 or choose the library that suits you best. Hope that helped. And remember to
3:30 subscribe to this channel for lots more
3:32 fast and awesome front-end tutorial videos.

[crazyghost]

I'm a bit confused about how in your reduce square example an empty object and the first element in the array combine to make a 1:1 key value pair. can you help clear this up for me? Great tutorial btw!

[willywonka]

I finally understand this!!!! Thank you!

[hacksaw_raw]

Thank you man. This is a very nice explanation

[zoverlvx]

Thank you kindly. That was super helpful.

[sumankharel]

I name you reduce whisperer dude! Thanks

[patrickgomes]

I thought of trying to use reduce to return not one object, as it does here, but an array of objects (like: [ {1:1}, {2:4}, {3:9} ... ] ), so I tried the following:
array.reduce((a, b)=> { a.push({b:b*b}); return a}, [ ])
I do get an array of objects, but in each object, the 'key is 'b'. How can I get the compiler to not treat the b there literally?
P.S. Yeah, this is starting to feel like stackoverflow :D

[shivoskate]

I like how the thumbnail says "in 5 minutes", yet the description says in 4 minutes, while its 3.37 mins xD

[perdaboy]

So fucking simple. Damn the w3school explanation of this.

[psikosen]

Thanks man can you do for each, I get it a bit but sometimes it confuses the heck outta me lol. Also how do you call objects from other classes?

[haleemulhassan]

I have a question regarding these high order functions. Been trying to completely get rid of simple for loop from my code, but im having a hard time doing so, because of the extreme control a simple for loop provides for any solution you want. I really want to find a high order function that loops over an array, but gives you control over where to start and end the iteration process. For example if i want to loop an array from position [2] to [5] only, and return an object(array, string, number, anything really, depending on the situation), how can i do that through functional javascript?

*Map* and *Filter* iterate over every element of array from its beginning to end, and also return an array. *Reduce* does give you extra control in that you can return an object, but it also loops over all elements of array so you have no complete control there either. *forEach* doesnt return anything at all. Any suggestions regarding this issue? Thanks!

[hofimastah]

How does the function know what's a and what's b?