Reduce: 10 Different Examples. JavaScript Fundamentals.

[@ayissinkejoelnarcisse9185]

Great video. Thanks a lot Mr Leigh 🙏

[@ericzorn3735]

For anyone learning JavaScript I find this absolutely imperative. Amazing video!

[@leighhalliday]

Thank you very much, Eric! Glad you enjoyed it :)

[@prinzadamz]

True ✌

[@metasavagex]

This is why you're awesome, definitely showing the power of reduce, other tutorials just play around with it with adding values. Thank you for this 🔥 content!

[@leighhalliday]

Thanks James! Glad you found it useful!

[@piyushaggarwal5207]

Reduce is really cool man. Fun fun function guy told us that reduce can do map, filter and everything but didn't tell how. Saving your video for watching in detail later.

[@alasdair7196]

BROOOOOO!! I have never understood how to use reduce, like at all...I do now. Thank you so much. Liked, saved and subscribed!

[@adibirta]

20:23 These kind of moments are priceless :)) Great video! Thanks!

[@leighhalliday]

:D Thanks!!

[@newmagicfilms]

Finally.... after all these years as a developer, I clearly understand it! Thank you!

[@0xmarrakesh288]

Thank you a lot, friend! It was getting hard to wrap my head around the concenpt but now I finally get it! :)

[@danielluna7648]

This could be the single most helpful video I've seen all year. I had no idea how powerful reduce was. Get the concept of the accumulator down and it makes so many difficult tasks much easier. Great video. I would love to see more of these on other object and array functions. This was 🔥🔥🔥🔥🔥🔥

[@PavanSibal]

The best reduce tutorial. Thank you.

[@MicheleBloodphd]

If you are struggling to wrap your head around JavaScript's REDUCE method, this is the video you want to watch. No need to look any farther. THIS IS THE ONE!

[@MakdoKro]

Big ty !!! thats the 1st video about reduce() which gives a good full explanation !

[@mrkhoros]

Your dominance over arrays and objects is incredible. Please put more videos about these simple methods with these types of usages. Thanks.

[@leighhalliday]

Haha... thanks :D But there's no need for anything else, only reduce!! Haha. Stay tuned for more vids in the future ;)

[@lucasae4140]

This is the first reduce tutorial I found that actually shows the value and versatility of reduce. hats off to you. I've been studying the methods shown in this video and I think my brain has bled at least a full gallon. this is such good and difficult study material. Thank you!

[@ianfinley3012]

Best description I have seen opening this up. Worlds ahead of anything else out there. Thank you!

[@FromTheHeart-777]

Omgggg ty. Everyone else's tutorials just have a set of numbers in their example. Your tutorial is more realistic on what is common. Thanks so much for having the intuition to have this tutorial. Subscribed!!

[@leighhalliday]

Haha... thanks :) Glad you enjoyed it! I try to use realistic examples whenever possible.

[@Rob34570]

Me too, instant sub! Thanks for the realistic examples, exactly what I was looking for

[@21agdmnm]

every freaking reduce video on youtube use the same example.. sum of some numbers.. FINALLY .reduce explained well!

[@mrWorldwideJuan]

For anyone learning JS right now, this is a must-watch. Thanks for sharing it!

[@leighhalliday]

Thanks Juan! Glad it helped :)

[@araazizi7908]

This video single handedly taught me A LOT of stuff that used to make JS look like a big question mark in my head lol kudos

[@eraldoabedini4642]

One of the best videos so far

[@thydevdom]

THANK YOU THANK YOU THANK YOU! My instructor kept telling me that my code was fine but needed to implement reduce and shorten my code. You are a life saver. No other video made sense.

[@leighhalliday]

Reduce is like having super powers!

[@cliffclof]

@21:14 i think this is what he meant by hand implement a reduce. Nice overview.

[@jpetty5542]

Great vid! Very good examples and explanations. By far this was the best video on reduce I found.... And I've watched a lot lmao. Thanks again

[@viqtorione]

Wonderful. Crystal clear. Thank you.

[@dimimav4418]

Hey Leigh thank you for the video. I was a little confused with the all and any over 18 implementations but i will watch again and try to wrap my head around!

[@leighhalliday]

Thanks Jim! Maybe I just didn't explain it very well :D Play around with it on your own and try to come up with some examples.. that's how you'll get more comfortable with it!

[@slickchick8292]

I finally understand how to use reduce. I have been so scared of using it. Thank you for this video.

[@leighhalliday]

Nice! Glad it helped :) Do not fear reduce!

[@diogosoares1309]

Loved the flatten one and the counting! Your simplicity explaining is superb, Leigh!

[@leighhalliday]

Thank you so much Diogo! I love playing with data like this.

[@kissromeorichard]

Thank you so much for the explanation and examples! Yep, you definitely made me like reduce and not hate it :D

[@rezahosseini7851]

I finally did it! I finally learned reduce!! Thank you!

[@leighhalliday]

I'm proud of you Reza!! Thanks for your support :)

[@Ahmed-cy4jp]

This is my very favorite tutorial. I finally learned how this awesome method works, and in fact I built my own version of reduce and it basically returned the exact same outputs that the built-in reduce method returns! Thank you so much

[@leighhalliday]

Nice!! That’s awesome Ahmed! Glad it helped.

[@Ahmed-cy4jp]

@@leighhalliday I used all the examples you shared on this video, to make sure it produces the same output, and it actually did :D

[@victorlindh3129]

Awesome examples! Thank you so much for this!

[@soltiscd]

This is the way to learn and understand. Love all your content.

[@leighhalliday]

Thank you very much, Salty!

[@mehinhuseynova1426]

Thank you. Explanation and examples are perfect.

[@leighhalliday]

Thanks Mehin!

[@rorycawley]

Great vid, thank you Leigh.

[@x4r7]

best reduce explanation

[@marcellvieira3713]

Spectacular! Greetings from Venezuela

[@leighhalliday]

Thank you! Right back at you from Canada :)

[@videostothepoint5505]

Superb explanation. Thank you.

[@omedjamal1056]

Thanks for this great explanation.

[@leighhalliday]

You're very welcome! Glad you enjoyed it Omed!

[@Booboosik]

For "max age" @7:50 use Math.max with comparing to -Infinity (negative infinity), that will make any negative number larger than the initial comparison.

[@leighhalliday]

Thanks!! Good trick! Or you can use the first value of the array

[@ridl27]

thank you. probably the only one array method that I always trying to avoid lol xD but now, hopefully, I will use it as much as I can! :D

[@leighhalliday]

Embrace the reduce!!

[@MariaMartinez-bz7zw]

Great video! Thank you so much!

[@fernandoortiz1849]

thank you for not using a freaking sum of nums example to explain reduce, thumbs up!

[@abelmurua6980]

Amazing video! Awesome examples. Im having issues with moderno js where you dont use else or curly braces, etc.. so I watse time on that. This helps.

[@demarco6967]

This is very helpfull. thanks so much leigh 🔥😄

[@leighhalliday]

Thanks Primordial!! Glad you enjoyed it :)

[@CoryTheSimmons]

>Reduce may be the most versatile function in JavaScript 1000% agree. Almost every other function can be replicated with reduce. I reach for this pattern almost anytime I need to cleanup an array of objects: ```js arrOfObjs.reduce((acc, curr) => { const freshObj = {} freshObj.someKey = curr.someVal acc.push(freshObj) return acc }, []) ```

[@gidmanone]

couldn't you simply map?

[@leighhalliday]

Thanks Cory! To gidmanone's point, yup I think you could use map for this if you are doing a 1 for 1 mapping of array elements to array elements.

[@vaylx2253]

Hey Leigh, I can't believe it took my so long to discover this channel! This video is an absolute blessing 💛 One question for you, in the "Convert to ID => Person Lookup (dict)" reduce function, you used the computed property name shorthand by writing: "[person.id] : person" to set the key to "person.id". Kindly, could you tell me how to achieve this without using the shorthand? Like how would you implement this manually? Many thanks!

[@leighhalliday]

Hey Vayl! You can totally do it in multiple lines... something like this? acc[person.id] = person; return acc;

[@emersonaraujo406]

Congratulations for always bringing us top content. Thanks for your work.

[@leighhalliday]

Much appreciated!

[@juhandvan]

thank bro, i really love this tutorial

[@leighhalliday]

Thank you Juhand! Glad you enjoyed it!

[@thetech3624]

I had a question at 15:29, the count occurrences example. Is the accumulator always a number but returns what you want (in that case an object) at the end? Sort of like a double functioning tool? Also, what did you mean by '2 or 5' at 15:16? And overall, I'm not really sure how `acc[order.status]` returns a number. All help is appreciated, thank you.

[@erikshumkov4848]

Thanks for sharing, great examples! Now it's time to implement some of these.

[@leighhalliday]

Oh yea! Reduce is so useful! I hardly ever use recursion, but I use reduce almost daily.

[@adityadubey5204]

Thankyou so much for this really needed this :)

[@leighhalliday]

Glad it helped! :)

[@joelexperienced]

hey man! thanks for the practice :)

[@pegahfallah3770]

this was a great video

[@rajeshsahu3073]

Well explained video..Your way of teaching is cool..Could you please make a video on how to implement multilevel (3 to 4 levels deep) menu in react?

[@leighhalliday]

Hey Rajesh! I'll keep it in mind, but I tend to shy away from the purely UI frontend stuff because that isn't my strong area :D

[@TheBayouCritter]

This is great, thanks so much. I don't quite get why we need a separate function on the flatten example, is reduce just not capable of calling itself?

[@leighhalliday]

No, i don’t believe you can call yourself in a reduce… need a separate named function.

[@coolworx]

I love reduce... const activities = ['hiking', 'cycling', 'programming', 'photography', 'fishing', 'hunting', 'camping' ]; const list = activities.reduce((ul, activity) => { const li = document.createElement('LI'); li.innerText = activity; ul.appendChild(li); return ul; }, document.createElement('UL'));

[@SLRModShop]

Brilliant video, everyone else is showing the bare minimum...

[@danielluna7648]

Question: for short circuiting the accumulator once you find what you're looking for, couldn't you still use reduce, but when you find what you're looking for, assign that value to accumulator, break, then return the accumulator with that new assigned value?

[@misterl8129]

no, reduce cannot be broken. Just classic for and foreach

[@misterl8129]

@@capslock3250 totally right i get the wrong names lol, thx

[@OsamaQarem]

you explain so well!!

[@leighhalliday]

Thank you Osama!

[@elkhanhamet2561]

thank you Leigh!!!

[@leighhalliday]

You're very welcome :)

[@gregfletcher2360]

Hey Leigh! Great video, Here's my solution to the condition reducer. I would like to see a better method since I only just hacked it together in a minute. function conditionalReducer(array, cb, initial, condition) { let acc = initial; for (let i = 0; i < array.length; i += 1) { acc = cb(acc, array[i], i, array); if (condition === acc) return acc; } return acc; }

[@leighhalliday]

Thanks Greg!! I added my condition to the repo I shared in the description :D no idea if it's a good one haha!

[@gregfletcher2360]

@@leighhalliday Sweet. I'll check it out! Thanks for the video again! I love the quality of the content!

[@thanapolraktham2291]

Thanks a lot!

[@AndersonSilvaMMA]

Thanks for your video!

[@leighhalliday]

You're welcome!! Didn't realize Anderson Silva was a JS developer! Love your fights! Obrigado!

[@seenaranjith]

great videos. I have a question about result = people.reduce((acc, person) => { return { ...acc, [person.id]: person }; }, {});. If we are grouping names instead of id and have more than one same name, how can we rewrite this code?.

[@finnbit1155]

I just watched your mapbox video and I was wondering if you could have the website open so anyone can add markers and add to thoughs details?

[@leighhalliday]

Hey Finn!! I think you'd want to: 1) Listen to click event on map... to get the coordinates. 2) Ask the user for the details they want to place in this marker. 3) Send this data to a backend to store it somewhere... otherwise it's lost 4) Add this marker to your array/state of markers so that when it re-renders it is shown on the map.

[@akashnag3879]

this is the answer to me reduce method quest. everyone just shows how to just add elements of an array.. that's it

[@leighhalliday]

Haha... I tried to make it practical... reduce has so many uses!

[@emrahburak8684]

Wow. Thanks.

[@leighhalliday]

You're very welcome Emrah!

[@gradientO]

Can you do a video on some react ui components, like Material UI?

[@leighhalliday]

Hey g g! Maybe at some point in the future... I'm 90% backend dev, so I prefer to stay away from the super visual stuff... it isn't where I feel confident.

[@mouradaouinat8721]

amazing video

[@leighhalliday]

Thank you Mourad!

[@CarlosSz]

Amazing video! Can you please make a video like this with filter? 👀

[@leighhalliday]

To recreate filter using reduce, or just to cover filter in general? Here's a minimal reduce example: array.reduce((acc, element) => { if (true) return [...acc, element] return acc }, []);

[@s21ekosn8]

reduce is the most powerful js array method 😃

[@abessesmahi4888]

God bless you

[@leighhalliday]

Thanks, Abesse!

[@migom6]

Let's go!

[@leighhalliday]

We goin!

[@justinnguyen8320]

You're a beast

[@leighhalliday]

Haha, thanks :D

[@haytham6776]

leigh what theme you're using in vscode .?

[@leighhalliday]

I think I'm using One Monokai

[@creative-commons-videos]

theme name please :)

[@leighhalliday]

One Monokai

[@creative-commons-videos]

@@leighhalliday thank you :)

[@pankajdaira9723]

aaaaaaaawwwwwwwwwwweeeeeeeeoooooooossssssssooooommmmmmeeeee.....

[@soniablanche5672]

for the max age, I don't think negative ages make sense lol

[@leighhalliday]

10 years before your parents met, were you -10 years old, or null? :D

[@joostschuur]

Huh. Math.max() treats null as zero, so that would not have helped make the max age one shorter here. Math.max(null, -1) returns zero. Annoying ;)

[@leighhalliday]

Ahh... I guess you could filter out non-numeric values prior to using Math.max

[@sumanthprabhu11]

I'm not gonna like this video as it has currently 666 likes and i'm superstitious. Otherwise great video

[@leighhalliday]

Hey!! You can like it now, it's above that number :D

[@sumanthprabhu11]

@@leighhalliday Did It!