Learn JavaScript Array Reduce In 10 Minutes

[@rosseaton990]

This was the most simple and straight forward example of reduce I've seen. Thank you!

[@Vibestr]

Another good reason to set the second parameter on the reduce is if you are totaling price on an object (like in your example) and you didn't set this parameter to 0, then total would represent the object (the first item in the array) and your code would error out. Thank you for this video Kyle.

[@MrGodman1981]

Last week I was struggling with aggregate of object attributes in an array of objects due to the missing intiial value of 0 and I learned it the hard way. Also I had the groupby use case well. Thanks for simplying groupBy.

[@kelseymovies]

Thank you for this! I just took a whole course about it and got even more confused. Your video broke it down to a point where it clicks.

[@ademlayes9116]

I've watched this video twice, once before ~5 months and now after forgetting what "reduce" does... and im so thankful every time! Thank you!

[@elie8181]

very good explanation of the reduce method, it is clear and simple. I'm a french developper in training and I understood everything, thank you and good continuation for your KZbin channel

[@dasten123]

I like the reduce function. But many people use it on occasions where a simple `forEach` loop would be more appropriate, and that gives the `reduce` a bad reputation, because it seems to make things unnecessarily complicated. I think you should always be aware of that whenever you are about to use it.

[@johnjoyce]

best explanation of reduce in javascript that i have ever seen. be cautious saying amunnuh when you mean “I’m going to”. that can be difficult for non native listeners

[@_boza]

I think you said the best definition of reduce ever. "Reduce, all it does. It takes array of values whatever that is and reduces it down to one single value"

[@alirezashahmoradi7648]

I cant believe how you made it that simple. Thank you!!

[@TheDanthelion]

While I understood how reduce worked, I didn't quite get why I kept hearing how powerful it was - your object example made it very clear in a short amount of time!

[@NaroTaro]

I've been stuck on understanding reduce for 2 days now. This video cleared everything up. Thanks!

[@JuanPablodelaTorre]

I love the _reduce_ method. I use it for everything. I would brush my teeth with it if I could. If you ever _map-filter-map-find_ anything, do everyone a solid and just use _reduce._

[@InsertYourself1]

10 minutes of this is so much better than 1,000 hours of understanding the docs

[@MonsterlessonsAcademy]

The easiest explanation of reduce is that it's a same low level function as "for loop" but in completely functional way. It's safe, returns result, code is declarative and immutable and you can build other functions like filter, map,etc with it.

[@proactivex]

Typical engineer who has lost touch with what an easy explanation is.

[@kirillvoloshin2065]

@@proactivex well, I find this explanation pretty clear and straight to the point. maybe because I am too 😏

[@proactivex]

@@kirillvoloshin2065 “a completely functional way “ that’s nuanced AF. “Safe” noobs don’t know what safe is vs not safe. Not knowing when you’re in danger is kind of the essence of noobness. “Declarative and immutable” by the time you have a good grasp on all those terms you don’t need a video explaining reduce. Back to my point that engineers often forget how to explain things to people several levels below them.

[@MonsterlessonsAcademy]

@@proactivex Sorry but from my perspective reduce is not something that you learn in your first 2 weeks of programming. This is why "easy explanation" is not for people who just started. It's for people with background which want to learn reduce. You should for sure understand the difference between imperative and declarative programming as well as functional vs oop approaches.

[@MonsterlessonsAcademy]

@Anmol Pandey it's the opposite. reduce is declarative programming and for loop imperative. Imperative programming consists of a series of commands which do something and it focuses on describing each command. Declarative programming consists of expressions and not commands. We describe what needs to be done but not the each step of how it should be done.

[@SquaredIndex]

Good explanation Kyle! I think the second example should use undefined rather than null, then you can use strictly equals like so: if (groupedPeople[age] === undefined) groupedPeople[age] = []

[@caterpilar]

you can go even further using `.hasOwnProperty()` to check object key

[@jollyjoker6340]

null and undefined are falsy so if(groupedPeople[age]) is enough

[@JamesJon1187]

4:12

[@encapsule2220]

best explanation. my scalp is starting to regrow hair follicles thanks to u

[@Rift_131]

Man, you helped me solve a problem that's been kicking my butt for a LONG time. THANK YOU!

[@iooosef6006]

I'm looking forward for more videos about array, string, and object methods. Your explanations are so great.

[@athillas460]

same

[@donotlook6048]

This guy really uploaded this video 2 weeks ago and today I needed to use reduce and didn't know it worked, now i do thanks man. Whenever I need to understand something new I just type the concept + webdevsimplified and watch ur video lol

[@loumeroj]

I'm at least watching the ads cause this guy explained reduce briefly and concisely :) and nice hair btw

[@darklord8684]

after your explanation this is my fav method

[@Sun-gk8fc]

7 the video on reduce in the last 40 mins and this is as simple as you can get...superb. A like and a subscribe from me.

[@pugazhonline]

I have used reduce() many times. but clearly understand now. Thanks Kyle.

[@filipcza2]

Thanks man! Been hating the tasks which force you to use reduce so far.. feels like you randomly try until it somehow works. I really don't get why this feels so awkward to use or understand but your examples were extremely clear and helpful. Perhaps now I can stop dreading the reduce method. 😅

[@kunalmaloo8806]

best explaination i used for loop each time but now onwards i am shifting to reduce

[@vivekmodi3165]

The concept of reduce method is very well explained because it was difficult to understand the concept of this in the documentation. Thanks.

[@mayowasunusi9161]

Thank you Kyle, I saw .reduce in a TS tutorial, i had no idea how to do it, your video was straightforward

[@pcchamikara]

you REDUCED my effort of understanding the "reduce" function. 👌

[@rafaXD05]

I was looking for resources to learn about `reduce` method. Your video came in as a rescue Kyle.. 😍 You are a saviour!!

[@re.liable]

I feel lucky that I was able to intuitively understand reduce for the most part. Except that second parameter. That tripped me up hard quite a bit.

[@nabilelidrissi8541]

I've watched a fair few videos on reduce, but you have explained this wayyyy better.

[@tanvirhasanmonir1627]

Thanks Kyle for your simplified explanation with useful example

[@beepybeepy4903]

Thank you so much! This is so much clearer than other tutorails using acc, cur….

[@freudinsky]

LOL - after googling for HOURS(!!!) I finally got it - after just 3min into this video. Damn good explanation! Thank you sooo fkn much!!!

[@soniablanche5672]

The reason why you receive the array as 4th parameter is because the callback function might be inside another file or might or be outside the scope of the array, so you can't reference it in any way. AFAIK all array methods have a callback function that pass the array as an argument.

[@maelstrom57]

that's exactly right

[@scratchercatcher6760]

Thank you VERY MUCH! All CLEAR NOW FOR ME and you made video without any extra "bloggers show off". My like to you and subscription.

[@vinicius2336SP]

Dude... you're amazing! Thanks a lot! You're so much better than my teacher LOL Thanks for your content! I'll be buying your course soon. :) Have a nice day!

[@simple8810]

reduce is like different and complex from other array methods,but you made clear that for us thanks

[@mr__info___]

You truly simplify the web. thank you!

[@jollyjoker6340]

6:57 Took me a while to make this work; you can write this as const toArray = (arr, elem) => arr ? [...arr, elem] : [elem] const grouper = (grouped, { age, name }) => ({...grouped, [age]: toArray(grouped[age], name)}) console.log(people.reduce(grouper, {})) assuming you want a list of names instead of the full objects, as specced at 5:49. At least destructuring the age and name is clear enough; some of the syntax may be a bit obscure.

[@SiddhantaPaul80]

That's an impressive straight forward explanation! Really liked the analogy with forEach Loop.

[@tomgu1809]

reduce doesn't only apply for total, total from your addition statement. If you change + to -. it will deduct from initial value by each item .

[@davidasteed]

excellent last bit about "make sure to give reduce() a default starting accumulator value, else your code will fail if given an empty array" however: what is the rationale using "==" operator, vs. strict equality "===" ?: that is standard practice in nearly 100% of operational JS code I've worked on

[@princecharles-amachree7329]

Was legit looking for this today and my man ends up making a video on it. Coincidence? I think not

[@The1stKing]

Haha, just what i needed. 😆 I literally just youtube-ed how to use reduce function.

[@mattplaygamez]

You deserve more subscribers

[@MrLiquitorleaveit]

Incredibly well explained! Thanks so much! 🙏

[@VenkateshMogili]

Thank you kyle, got more clarity on Reduce method now❤😊😊👍

[@odilanmaevidence9545]

All i gotta say is Thank you mate, you're awesome!

[@shvideo1]

Perfect content coverage on reduce. You are amazing! Thank you for sharing.

[@snansahmarov1524]

Thank you Kyle. You are great !

[@Unknown-so7qv]

Nice video bro, i finally have understood how to filter objects by a key with reduce thx man .

[@johnadriandodge]

Shalom Mr. K, outstanding explanation! Thank you Shalom

[@EdisonSeas]

Very well explained, crystal clear. Thanks for this content!

[@ardinhelios5677]

Please make more of these byte sized vides (pun intended) just like Kevin Powell does for CSS

[@galihhad]

Thank you, I understand it much better now!

[@RonnieNissan]

items.map((it) => it.price).reduce((a, b) => a + b, 0)

[@YannMetalhead]

Simple and direct, great explanation.

[@bubboob]

When initialising to an empty object or an array you can still use const and forEach const groupedPeople = {}; people.forEach(p => { groupedPeople[p.age] ?groupedPeople[p.age].push(p) : groupedPeople[p.age] = [p] });

[@richcaro3132]

You have given a simple solution for sorting people of similar age. No one is smarter than everyone. Thank you

[@Nicholas-qy5bu]

Reduce is the equivalent of a for loop with a cache system scoped to the loop. Instead of the outter scope like in your example. You cannot reference the accumulator variable outside of the reduce loop, but it returns its value. All the javascript array loop function can be done with a simple for loop, but you will have to understand every loop to understand the code. A reduce loop will create a new data structure, so you know it will change an array into something else. Or it can be used to chain promises ( which was not mention in the video ). A filter loop will filter an array, a map loop will iterate over each member and probably modify them, etc ... It improves the code readability, thats the main reason to use them, the second being that it is faster and require less code than recreating some loop function from scratch.

[@avi12]

The reduce method is a double-edged sword, as explained by a Google Developers video: kzbin.info/www/bejne/p5Kqm4ZtYtaKsMk On the one hand, the reduce method is handy On the other hand, it might reduce the readability (see the pun?)

[@parahumanoid]

I wonder if we should name the object "vague" and the parameter -- "readability": const x = vague.reduce((overall, readability)=>{ ....}, 0)

[@ngyang5113]

u are amazing, all ur video is concise and easy to understand

[@xiampiii]

Thank you for a great and easy to understand explanation

[@eugene4296]

This is amazing, and really helpful. I have immediately subscribed. And I think I love you sir. :)

[@mouhamaddiop1144]

The eternal question I ask myself is: why the "sum" method does not exist natively in javascript.

[@hellosugaree]

So you can make yourself feel like a code ninja for using array methods and arrow functions when needing to add numbers.

[@mouhamaddiop1144]

@@hellosugaree I will immediately take out my nunchaku to do it xD

[@mizaelparedesvielma8221]

As the get method for arrays. You can obviously implement it yourself, but I understand you

[@mykalimba]

A native sum method is very specific to arrays that contain only numbers. In theory, JavaScript could add native array methods for _thousands_ of specific use cases, but it would become a bloated confusing mess. They keep it simple instead.

[@mouhamaddiop1144]

@@mykalimba I understand your reasoning but why in ruby language for example, there is a "sum" method on an array of values? the ruby language has a reduce method as in JavaScript, though

[@mjohnson2807]

JavaScript is getting so advanced people are forgetting that for loops exists... Which total coding and execution time appear to be faster on the for loop

[@Aram64]

Reduce is the most powerful method of Array. Actually, I think, they should've named it something like transform, because name reduce doesn't quite fit to represent the whole power of this method.

[@chiimaero]

Also, since we have 100% control the returned value, ´reduce´ can actually return an expanded version of the original array, so this name is definitely not a fitting one...

[@Nicholas-qy5bu]

@@chiimaero It comes from a term in functionnal programming, it reduces multiple value into a single value, in this case all values from an array to whatever you fancy, even if it is a new array. It is still a single new value.

[@gg-gn3re]

It's javascript, naming it something that made sense wouldn't make sense. Have to keep the language bad!

[@themanshaper]

Dude your explanations are so good. Thank you!

[@hayfachouchene1285]

amazing explanation ! good job

[@elkhanhamet2561]

Amazing explanation. Thank you Kyle!!!🙂

[@tijanisylla1348]

Im always learning from Kyle ! This is an amazing !!!!

[@hathumkittitus9663]

Thanks, I never set seccond parameter but from now I will alway set it 😍🥰

[@hathumkittitus9663]

I mean that zero

[@travel2react567]

Thanks a lot for such a detailed video.

[@Ranjithkumar-ll5rb]

you are my life saver! Thank you🙏

[@fatimazboujrar]

thank you so much , you've covered everything 🤩

[@shahhuzaifa2746]

Thank you so much. I saw many videos on YT of reducing the items to a single value (easy one), but NO one explained about the grouping items into categories. This literally save so much processing power. I was using two loops of approx 1000 items and approx 100 items each to categorize. But this reduce method of categorizing is so much efficient. Thanks for explaining the concept :)

[@musaamuhsen]

Dude this just saved me. Thanks!

[@bartoszsowa5140]

you made it clear, thank you

[@joelcool1027]

Thanks bro. I'm a JavaScript developer and never understood this function. You truly "simplified" it

[@parahumanoid]

nice clean style. I was uncomfortable with no semicolons at first, but now I see how it makes reading lighter, the overall look of the code less cumbersome.

[@stylesg7818]

Thank you so much! It's make so much sense now.

[@codingwithkenny6492]

You are awesome, Kyle! Your videos have helped me learn so much about Javascript👍

[@dr__ey]

thanks so much for this explanation!!! it really helped

[@Kae201]

This video was really helpful and clear. Thank you!

[@meysamrezania54]

That was pretty cool explanation

[@cfhall54]

Much appreciated! This can definitely be a time saver

[@2pacgamer]

very clear, thx for this one !!

[@AbhishekKumar-cd4gg]

loved the seccond example , love from india .

[@sociopatchcoder5582]

this is the most difficult array method i ever come across. i used it in my recent project . hard time to grasp. . thanks for elaborating it in simply

[@jssecrets]

Thank you Kyle!

[@ts.wizard]

Thanks a ton for demonstrating the advanced features as well and the consequence of leaving the default parameter empty. That's not something everyone out here does.

[@phloreen795]

While I really appreciate your tutorials, I'd like to tell you that not using `;` is very confusing and even if not necessary, the `{ }`curly brackets, where they would make things more explicit. It's just me, I know, but would make my life much easier. But thanks for dealing with reduce() method. Keep on!

[@MiSt3300]

This is a perfect explanation, thank you!

[@andzisimabaso5622]

This is just awesome! Finally, I get it.

[@johnwellgroup]

Thank you very muh for really breaking this topi. you are the best

[@feritperliare2890]

I use It mostly for summing object properties

[@samichpower]

Your hair is always on point 🔥

[@ramonmaximiliano3557]

Excellent video!

[@josephwong2832]

I believe Jake and Surma did a video on this once where reduce made a bunch of code overly complicated and noted most of the time you're only using the looping portion (like in example 2 here) so why not just use a regular loop?