If you omit the reduce's second argument, the loop will start at the second item, and the accumulator will be the value of the first item in the first iteration. This is useful if you are just adding the values in a number array. If you are trying to reduce an array of objects to a number, you shouldn't omit the second argument (specially if you are using TypeScript, that sets the .reduce() return type to the second argument's type or, if omitted, the array type)
I love this one. Short (no bullshit), but yet fully explanatory. Absolutely fits the needs of a newbie or an advanced programmer, who wants to refresh his knowledge. Thank you!
The true utility behind arr.reduce() is modifying different parts of the array based on the current value and/or index; not less typing vs. a for-loop. Because a for-loop can do all a basic arr.reduce() method can, plus it can be made faster by doing a reverse for loop.
That is a fair point. I was not trying to imply reduce it is superior, just wanted to use it for comparison. In general, js for loops are much faster than array methods.
Starting to ask myself why I wasted hours of my life learning programming concepts only to discover your channel years later, explaining them better in 100 seconds each. Thanks for refreshing my memory on this and keep 'em coming!
Filter Map Reduce (in that order) are the most common operation. (Reduce is a bad name, Sum is more appropriate.) To solve "what's the total salary of local viewers?" you just allViewers.Filter( for local ).Map( to v.salary ).Reduce( sum )
For the order total problem, which would you go for? a) . const total = orders.map(o => o.total).reduce((a, b) => a + b); b) . const total = orders.reduce((acc, o) => acc + o.total);
the first iterates over the array twice, I don't know why it wasn't mentioned but the significant power of reduce comes from it's ability to combine many maps into one iteration
When comparing it with a for loop, you say the difference is reduce() doesn't mutate the app state directly. I fail to understand exactly what you mean. If it mutating the state indirectly? And what are the benefits or use cases for doing that?
It means that you don't change the thing you put into the function. Instead, you create a new thing (an integer) which you use for the rest of the computation. This prevents you from overwriting the original array which you may not want.
Thanks for the video. Any chance you could remove the background music please? It makes it harder to hear and process what you're saying. Unlike everything else in your videos, it doesn't seem to serve a purpose.
@@Fireship I have been looking for this background music for years. I cannot find it. I love it, it just strikes something within me. Please, Fireship, if you read this, please tell me what is that music called.
Why did you use currentOrder.total instead of just currentOrder? What does `total` refer to? Is it a reference to total as a property of PaymentRequestEvent from PaymentRequest API? That's the only thing I'm gettings as result of my googling and it sort of makes sense... @edit Watched the vid once again and I immediately understood that: „hey, we're working on array of objects and this is how to access the value of certain property in object” Damn, sometimes not noticing such things is really silly :/
So basically reduce is more work (more statements) and more difficult to understand? The first programmer must learn this + implement it and all the others maintaining the code must undstand what is going on while the plain for-loop would to the same and be self-explanatory with only basic instructions?
Try *this* keyword in 100sec
This is a good idea!
wuth "bind" .. that func doesnt make sense to me
Yes please
@@danvilela 'this' is a placeholder 'bind' fills in that placeholder
@@Fireship This was a pun?
I love how you show the "vanilla" for loop in comparison. That gives complete context for reduce.
If you omit the reduce's second argument, the loop will start at the second item, and the accumulator will be the value of the first item in the first iteration.
This is useful if you are just adding the values in a number array. If you are trying to reduce an array of objects to a number, you shouldn't omit the second argument (specially if you are using TypeScript, that sets the .reduce() return type to the second argument's type or, if omitted, the array type)
That is a good point, thank you!
didn't know this, thanks
I always add the second argument as a safety measure.
Thanks for the info!
how does this work? How do you return the accumulator if you don't have access to it
I love this one. Short (no bullshit), but yet fully explanatory. Absolutely fits the needs of a newbie or an advanced programmer, who wants to refresh his knowledge. Thank you!
Try Promises in 100sec
Already have it recorded!
@@Fireship show me bruda
@@Fireship you should answer with "i promise i will!"
Wow thats a long promise resolve
@@Fireship If I could subscribe again I would, Promises have been a headache for me.
fireship: explains the reduce method in depth in 100 seconds
also fireship: tries to explain all of react in 100 seconds
The true utility behind arr.reduce() is modifying different parts of the array based on the current value and/or index; not less typing vs. a for-loop.
Because a for-loop can do all a basic arr.reduce() method can, plus it can be made faster by doing a reverse for loop.
That is a fair point. I was not trying to imply reduce it is superior, just wanted to use it for comparison. In general, js for loops are much faster than array methods.
You guys are reading my mind! I just starred replacing regular forEach loop with reduce wherever I can
Starting to ask myself why I wasted hours of my life learning programming concepts only to discover your channel years later, explaining them better in 100 seconds each. Thanks for refreshing my memory on this and keep 'em coming!
I am liking these in 100 seconds clips. Thanks.
That helped me as a Java developer too thanks.
Fireship is the type of channel whose video I'll Like before watching. Thanks!
Reducers are so useful... once you got the concept you can do really great things with them
ESModules in 100 seconds!!
It's already recorded!
Fireship YES!!
Thank you so much for this iv always struggled to understand reduce till now
The visual of your videos is just exceptional!
Love these lil commercials lol
Estos videos me enseñan mas en 100 segundos que dos horas de clase en la universidad
Thank you Fireship, for providing your VS Code theme and font in the video description!
100 secondes videos are the best thing happend on youtube
I likes this format, maybe i can apply It to my videos too.
You are doing a great job😊
My lord thank you for making this, I've always been confused about reduce. It turns out I didn't even know what it did!
100 seconds of pure knowledge..!!
As someone that uses js alot these are nice videos to help other people understand js, nice job :D
This series is eye opening.
Been working with js for a while and never really got the reduce method, thanks!
This series is gold!
I can't believe it's only been a few years that he's been making videos
Filter Map Reduce (in that order) are the most common operation. (Reduce is a bad name, Sum is more appropriate.)
To solve "what's the total salary of local viewers?" you just
allViewers.Filter( for local ).Map( to v.salary ).Reduce( sum )
Excellent description. Thank you.
Really loving these short episodes as fillers. Cheers Jeff 🙏🏻
0:52 haha! I agree `accumulator` is a fancy word too !
Yea... I'm just gonna stick with my for loop for now :) Why change something that already works and pretty much totally explains itself.
This is very helpful
Thank you really for this short this clear explanation
personally i wouldn't choose reduce() over simple loop for such use cases
Great now I've to change my shopping cart function but I like better 😁 thanks Jeff 🤓 these short tips are useful 👌
ReduceRight..... Wow. never heard of it
I'd love to learn about your console setup. I like it outputs right in there.
he uses QuokkaJS I think
It displays result inline in vs code.
So this is where it all began!
which theme you are using in VS code..??? By the I loved the video..!
Really enjoying these, excited for more 👍
FOR THE LOVE OF SATAN please make more of these type of videos I NEEEEDDDD ITTTTTT
let's do JS in 100 seconds :D
Lets do whole web develoment in 100 secs
What a good explanation. Thank you so much!
Try RxJs in 100sec
I have a few RxJS videos recorded
For the order total problem, which would you go for?
a)
. const total = orders.map(o => o.total).reduce((a, b) => a + b);
b)
. const total = orders.reduce((acc, o) => acc + o.total);
the first iterates over the array twice,
I don't know why it wasn't mentioned but the significant power of reduce comes from it's ability to combine many maps into one iteration
@@FluffehTheSheep exactly, this looks useful at first glance, but it's actually twice as slow
Love this format!
Cool ! I was wondering if the result of the console.log that prints in the rightside is an edit or an extension for VSCode
Quokka plugin
When comparing it with a for loop, you say the difference is reduce() doesn't mutate the app state directly. I fail to understand exactly what you mean. If it mutating the state indirectly? And what are the benefits or use cases for doing that?
It means that you don't change the thing you put into the function. Instead, you create a new thing (an integer) which you use for the rest of the computation. This prevents you from overwriting the original array which you may not want.
Hi Jeff, how long will the sale for the pro membership be on for?
Thank you, very informative.
PLEASE tell me the name of the song! I know it from somewhere and I've been looking for it for MONTHS! Please tell
Hi there, have you found it yet?
Lodash vs native JS functions. What is your opinion and can you make a video on that?
I am liking this 100s 👌
Wow very effective video !!
of course i will see u in the next video.
Thanks
Hi, could you share please what software do you use for: video edit, animations, graphic? Thx.
PS: I mean just for this video.
Thanks for the video. Any chance you could remove the background music please? It makes it harder to hear and process what you're saying. Unlike everything else in your videos, it doesn't seem to serve a purpose.
I hear you, that's a bit of a divisive issue. I might put up a poll soon to decide.
How about open the auto-generated subtitle? It 's very accurate. Without that drive-in-space like background music, Fireship will not be Fireship. 🤯
@@Fireship I have been looking for this background music for years. I cannot find it. I love it, it just strikes something within me. Please, Fireship, if you read this, please tell me what is that music called.
More please :)
JS generators next please :)
This is so nice , thank you.
make more 100 seconds videos
Nice format.
@fireship - is reduceRight faster than reduce similar to negative for loops being faster (due to how memory works)
Which is readable and simple? The for-loop. Use the for-loop.
These are great.
I like this format
Good to know, many more on the way :)
@@Fireship nice :)
Rule of searching for good tutorials.
Check if the video was posted by Fireship or Traversy Media :D
Thankyou!
Did you start shift pitching your newer videos lol
Do Recursion in 100sec
Recursion is next in line
you should do 200 seconds so I can comprehend what is actually going on in the video...
bricks are apparently more expensive
does JavaScript not have a sum function for arrays like Python does for lists?
Is this just about the same thing as foldl and foldr in Haskell?
Why did you use currentOrder.total instead of just currentOrder?
What does `total` refer to?
Is it a reference to total as a property of PaymentRequestEvent from PaymentRequest API?
That's the only thing I'm gettings as result of my googling and it sort of makes sense...
@edit
Watched the vid once again and I immediately understood that: „hey, we're working on array of objects and this is how to access the value of certain property in object”
Damn, sometimes not noticing such things is really silly :/
explain reduce in the shortest time :)
I finally understand
Mejor que los videos de 30min
Amazing.
So cool
Doing a quick google search shows that the reduce approach performs slower than the simple loop approach on many occasions? Any comment on this?
it is slower, I talk about it in this vid th-cam.com/video/x7Xzvm0iLCI/w-d-xo.html
amazing 🔥
It is like producing items
Suppose I have 2 keys Amount and Total and i want sum to both columns so how i can i write this in reduce functions?
even the ads are longer than the video!
not me needing to put it on 0.75% because im slow af 😂
So basically reduce is more work (more statements) and more difficult to understand? The first programmer must learn this + implement it and all the others maintaining the code must undstand what is going on while the plain for-loop would to the same and be self-explanatory with only basic instructions?
You shouldn't legally be allowed to program
Is this less efficient than a for loop
vscode color theme ??
Oh... It looks a little bit like recursion.
And that just so happens to be the next topic on the list
you can implement it using recursion :)
and what are the benefits of array reduce?
11:11 - Hoezaay..
Try sorting / filter array in 100sec
Is there a call/cc in js to escape the reduce function?
Not really. You could throw an error. A regular for loop is probably better as it can use `continue` or `break`.
Technically you can modify the array to be shorter (you may wish to start witha copy of the array)
does anyone know the extension for the emoji's he uses?
Try multi-threading in 100 seconds
🔝
reduceRight should've been called reduceLeft