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!
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 🔥🔥🔥🔥🔥🔥
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!
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.
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!
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.
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!!
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!
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!
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
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!
>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 }, []) ```
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.
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.
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; }
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?
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?.
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.
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 }, []);
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.
For anyone learning JavaScript I find this absolutely imperative. Amazing video!
Thank you very much, Eric! Glad you enjoyed it :)
True ✌
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!
Thanks James! Glad you found it useful!
Great video. Thanks a lot Mr Leigh 🙏
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 🔥🔥🔥🔥🔥🔥
20:23 These kind of moments are priceless :)) Great video! Thanks!
:D Thanks!!
Finally.... after all these years as a developer, I clearly understand it! Thank you!
The best reduce tutorial. Thank you.
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!
Your dominance over arrays and objects is incredible. Please put more videos about these simple methods with these types of usages. Thanks.
Haha... thanks :D But there's no need for anything else, only reduce!! Haha. Stay tuned for more vids in the future ;)
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.
BROOOOOO!! I have never understood how to use reduce, like at all...I do now. Thank you so much. Liked, saved and subscribed!
Best description I have seen opening this up. Worlds ahead of anything else out there. Thank you!
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!
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.
Reduce is like having super powers!
Thank you a lot, friend! It was getting hard to wrap my head around the concenpt but now I finally get it! :)
Big ty !!! thats the 1st video about reduce() which gives a good full explanation !
Wonderful. Crystal clear. Thank you.
For anyone learning JS right now, this is a must-watch. Thanks for sharing it!
Thanks Juan! Glad it helped :)
One of the best videos so far
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!!
Haha... thanks :) Glad you enjoyed it! I try to use realistic examples whenever possible.
Me too, instant sub!
Thanks for the realistic examples, exactly what I was looking for
every freaking reduce video on youtube use the same example.. sum of some numbers.. FINALLY .reduce explained well!
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!
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!
I finally did it! I finally learned reduce!! Thank you!
I'm proud of you Reza!! Thanks for your support :)
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
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
Nice!! That’s awesome Ahmed! Glad it helped.
@@leighhalliday I used all the examples you shared on this video, to make sure it produces the same output, and it actually did :D
Loved the flatten one and the counting! Your simplicity explaining is superb, Leigh!
Thank you so much Diogo! I love playing with data like this.
Awesome examples! Thank you so much for this!
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
@21:14 i think this is what he meant by hand implement a reduce. Nice overview.
Great vid, thank you Leigh.
This is the way to learn and understand. Love all your content.
Thank you very much, Salty!
I finally understand how to use reduce. I have been so scared of using it. Thank you for this video.
Nice! Glad it helped :) Do not fear reduce!
Thank you. Explanation and examples are perfect.
Thanks Mehin!
best reduce explanation
Thank you so much for the explanation and examples!
Yep, you definitely made me like reduce and not hate it :D
Superb explanation. Thank you.
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
Embrace the reduce!!
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!
Hey Vayl! You can totally do it in multiple lines... something like this?
acc[person.id] = person;
return acc;
Thanks for this great explanation.
You're very welcome! Glad you enjoyed it Omed!
Great video! Thank you so much!
Spectacular! Greetings from Venezuela
Thank you! Right back at you from Canada :)
thank you for not using a freaking sum of nums example to explain reduce, thumbs up!
thank bro, i really love this tutorial
Thank you Juhand! Glad you enjoyed it!
>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
}, [])
```
couldn't you simply map?
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.
This is very helpfull. thanks so much leigh 🔥😄
Thanks Primordial!! Glad you enjoyed it :)
Congratulations for always bringing us top content. Thanks for your work.
Much appreciated!
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.
Thanks for sharing, great examples! Now it's time to implement some of these.
Oh yea! Reduce is so useful! I hardly ever use recursion, but I use reduce almost daily.
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.
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.
Thanks!! Good trick! Or you can use the first value of the array
this was a great video
hey man! thanks for the practice :)
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'));
thank you Leigh!!!
You're very welcome :)
Thankyou so much for this really needed this :)
Glad it helped! :)
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?
No, i don’t believe you can call yourself in a reduce… need a separate named function.
Brilliant video, everyone else is showing the bare minimum...
Thanks a lot!
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?
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
you explain so well!!
Thank you Osama!
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;
}
Thanks Greg!! I added my condition to the repo I shared in the description :D no idea if it's a good one haha!
@@leighhalliday Sweet. I'll check it out! Thanks for the video again! I love the quality of the content!
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?
no, reduce cannot be broken. Just classic for and foreach
@@capslock3250 totally right i get the wrong names lol, thx
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?.
Thanks for your video!
You're welcome!! Didn't realize Anderson Silva was a JS developer! Love your fights! Obrigado!
Wow. Thanks.
You're very welcome Emrah!
Can you do a video on some react ui components, like Material UI?
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.
leigh what theme you're using in vscode .?
I think I'm using One Monokai
reduce is the most powerful js array method 😃
this is the answer to me reduce method quest. everyone just shows how to just add elements of an array.. that's it
Haha... I tried to make it practical... reduce has so many uses!
Amazing video! Can you please make a video like this with filter? 👀
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
}, []);
God bless you
Thanks, Abesse!
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?
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.
amazing video
Thank you Mourad!
You're a beast
Haha, thanks :D
Let's go!
We goin!
theme name please :)
One Monokai
@@leighhalliday thank you :)
aaaaaaaawwwwwwwwwwweeeeeeeeoooooooossssssssooooommmmmmeeeee.....
for the max age, I don't think negative ages make sense lol
10 years before your parents met, were you -10 years old, or null? :D
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 ;)
Ahh... I guess you could filter out non-numeric values prior to using Math.max
I'm not gonna like this video as it has currently 666 likes and i'm superstitious. Otherwise great video
Hey!! You can like it now, it's above that number :D
@@leighhalliday Did It!