Reduce: 10 Different Examples. JavaScript Fundamentals.

Рет қаралды 28,644

Күн бұрын

Reduce may be the most versatile function in JavaScript. You can use it to map an array, to count an array, to sum values, to find the min or max value, to find a specific record, to flatten an array, to convert from an array to an object, and the list goes on. This is a love story for reduce.
In this video we will use reduce in 10 different ways and also learn how to build our own reduce function to discover how it works underneath the hood.
Source Code
github.com/leighhalliday/redu...
Ken's Tweet
static-tweet.now.sh/125333731...
Documentation
developer.mozilla.org/en-US/d...
Learn JavaScript, React & more with Treehouse (affiliate link)
treehouse.7eer.net/c/1214671/...

Пікірлер: 138

@ericzorn3735 4 жыл бұрын

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

@leighhalliday 4 жыл бұрын

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

@prinzadamz 4 ай бұрын

True ✌

@newmagicfilms 2 жыл бұрын

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

@adibirta 3 жыл бұрын

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

@leighhalliday 3 жыл бұрын

:D Thanks!!

@metasavagex 3 жыл бұрын

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 3 жыл бұрын

Thanks James! Glad you found it useful!

@danielluna7648 2 жыл бұрын

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 🔥🔥🔥🔥🔥🔥

@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!

@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.

@21agdmnm Жыл бұрын

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

@ianfinley3012 2 жыл бұрын

Best description I have seen opening this up. Worlds ahead of anything else out there. 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! :)

@alasdair7196 2 жыл бұрын

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

@MakdoKro 2 жыл бұрын

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

@mrkhoros 4 жыл бұрын

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

@leighhalliday 4 жыл бұрын

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!

@PavanSibal 4 ай бұрын

The best reduce tutorial. Thank you.

@diogosoares1309 3 жыл бұрын

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

@leighhalliday 3 жыл бұрын

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

@rezahosseini7851 4 жыл бұрын

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

@leighhalliday 4 жыл бұрын

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

@araazizi7908 2 жыл бұрын

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

@viqtorione Жыл бұрын

Wonderful. Crystal clear. Thank you.

@victorlindh3129 Жыл бұрын

Awesome examples! Thank you so much for this!

@dimimav4418 4 жыл бұрын

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 4 жыл бұрын

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!

@rorycawley 2 жыл бұрын

Great vid, thank you Leigh.

@mrWorldwideJuan 2 жыл бұрын

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

@leighhalliday 2 жыл бұрын

Thanks Juan! Glad it helped :)

@ayissinkejoelnarcisse9185 6 күн бұрын

Great video. Thanks a lot Mr Leigh 🙏

@MariaMartinez-bz7zw 2 жыл бұрын

Great video! Thank you so much!

@soltiscd 4 жыл бұрын

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

@leighhalliday 4 жыл бұрын

Thank you very much, Salty!

@eraldoabedini4642 Жыл бұрын

One of the best videos so far

@kissromeorichard 2 жыл бұрын

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

@slickchick8292 2 жыл бұрын

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

@leighhalliday 2 жыл бұрын

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

@erikshumkov4848 3 жыл бұрын

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

@leighhalliday 3 жыл бұрын

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

@jpetty5542 2 жыл бұрын

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

@BestBeatMakerEver 3 жыл бұрын

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 3 жыл бұрын

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

@Rob34570 3 жыл бұрын

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

@videostothepoint5505 2 жыл бұрын

Superb explanation. Thank you.

@mehinhuseynova1426 2 жыл бұрын

Thank you. Explanation and examples are perfect.

@leighhalliday 2 жыл бұрын

Thanks Mehin!

@thydevdom 3 жыл бұрын

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 3 жыл бұрын

Reduce is like having super powers!

@Ahmed-cy4jp 2 жыл бұрын

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 2 жыл бұрын

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

@Ahmed-cy4jp 2 жыл бұрын

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

@juhandvan 4 жыл бұрын

thank bro, i really love this tutorial

@leighhalliday 4 жыл бұрын

Thank you Juhand! Glad you enjoyed it!

@cliffclof 2 жыл бұрын

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

@ridl27 4 жыл бұрын

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 4 жыл бұрын

Embrace the reduce!!

@joelmounts3336 2 жыл бұрын

hey man! thanks for the practice :)

@emersonaraujo406 4 жыл бұрын

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

@leighhalliday 4 жыл бұрын

Much appreciated!

@marcellvieira3713 3 жыл бұрын

Spectacular! Greetings from Venezuela

@leighhalliday 3 жыл бұрын

Thank you! Right back at you from Canada :)

@adityadubey5204 2 жыл бұрын

Thankyou so much for this really needed this :)

@leighhalliday 2 жыл бұрын

Glad it helped! :)

@thanapolraktham2291 2 жыл бұрын

Thanks a lot!

@elkhanhamet2561 3 жыл бұрын

thank you Leigh!!!

@leighhalliday 3 жыл бұрын

You're very welcome :)

@x4r7 2 жыл бұрын

best reduce explanation

@OsamaQarem 4 жыл бұрын

you explain so well!!

@leighhalliday 4 жыл бұрын

Thank you Osama!

@omedjamal1056 3 жыл бұрын

Thanks for this great explanation.

@leighhalliday 3 жыл бұрын

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

@AndersonSilvaMMA 4 жыл бұрын

Thanks for your video!

@leighhalliday 4 жыл бұрын

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

@pegahfallah3770 3 жыл бұрын

this was a great video

@abelmurua6980 2 жыл бұрын

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 3 жыл бұрын

This is very helpfull. thanks so much leigh 🔥😄

@leighhalliday 3 жыл бұрын

Thanks Primordial!! Glad you enjoyed it :)

@fernandoortiz1849 2 жыл бұрын

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

@emrahburak8684 3 жыл бұрын

Wow. Thanks.

@leighhalliday 3 жыл бұрын

You're very welcome Emrah!

@SLRModShop 2 жыл бұрын

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

@vaylx2253 2 жыл бұрын

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 2 жыл бұрын

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

@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'));

@CoryTheSimmons 4 жыл бұрын

>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 4 жыл бұрын

couldn't you simply map?

@leighhalliday 4 жыл бұрын

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.

@rajeshsahu3073 4 жыл бұрын

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 4 жыл бұрын

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

@migom6 4 жыл бұрын

Let's go!

@leighhalliday 4 жыл бұрын

We goin!

@mouradaouinat8721 4 жыл бұрын

amazing video

@leighhalliday 4 жыл бұрын

Thank you Mourad!

@Booboosik 3 жыл бұрын

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 3 жыл бұрын

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

@CarlosSz 4 жыл бұрын

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

@leighhalliday 4 жыл бұрын

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 }, []);

@gregfletcher2360 4 жыл бұрын

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 4 жыл бұрын

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 4 жыл бұрын

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

@justinnguyen8320 3 жыл бұрын

You're a beast

@leighhalliday 3 жыл бұрын

Haha, thanks :D

@TheBayouCritter 2 жыл бұрын

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 2 жыл бұрын

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

@abessesmahi4888 4 жыл бұрын

God bless you

@leighhalliday 4 жыл бұрын

Thanks, Abesse!

@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.

@akashnag3879 3 жыл бұрын

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

@leighhalliday 3 жыл бұрын

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

@gradientO 4 жыл бұрын

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

@leighhalliday 4 жыл бұрын

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.

@s21ekosn8 2 жыл бұрын

reduce is the most powerful js array method 😃

@finnbit1155 4 жыл бұрын

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 4 жыл бұрын

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.

@haytham6776 4 жыл бұрын

leigh what theme you're using in vscode .?

@leighhalliday 4 жыл бұрын

I think I'm using One Monokai

@danielluna7648 2 жыл бұрын

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 2 жыл бұрын

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

@misterl8129 2 жыл бұрын

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

@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?.