Reduce: Mother of all Javascript Array Methods? (Part 5)

Reduce is considered the hardest of the Array functions, is it? Let's try demystifying this super powerful Array method and give you the power to create anything you want from an arry.
Quokka: quokkajs.com/
Code: github.com/jherr/arrays-made-...
👉 What's my theme? Night Wolf [black]
👉 What's that font? Operator Mono
👉 I'm a host on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
00:00 Introduction
00:35 Reducing to a single value
06:50 Reducing to an array
11:55 Reducing to an object
15:55 Reduce can make all the other array methods
18:40 Entries, keys and values
21:00 Reduce for sequential async
22:51 Review
23:25 Outroduction
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
#javascript #arrays

[@muhammadyousufhere]

Can't believe!! You literally have summed up almost everything Js in one video.

[@dgcp354]

One of your typescript challenges where to do everything other methods do with reduce method, I was blown away when I learned it

[@mikef.606]

This is better than Netflix.

[@lazarstanev866]

I have no doubt this is the most underestimated channel on KZbin. You are doing an amazing job and in every video I'm learning something new. Thank you very much!

[@user-ze1zp9cp5u]

Reduce is my favourite method for arrays. So powerful especially when initializing an object but at same time looping through the array. Love the series!

[@AbdelhameedG]

Amazing Jack, Keep it up you are definitely the leader of JS/TS/React/Frontend community.

[@basharkhadra2929]

100% coverage of reduce functionality. Thanks a lot 👍

[@LuisFelipe-td8qk]

Come on, Jack! You are a blessing for all programmers. Thank you so much, I think I'm about to finish all of your videos.

[@user-gh6tc1bf9h]

absolutely complete stuff !! keep going !

[@johannsebastianbach3411]

Wow that async reduce hack sure is smart!! Great video as always!!

[@shinmessiah]

Great content and explanation sir as per usual

[@mdrahiem_dev]

I wasn't confident about reduce method till now.. thanks much for the video..

[@designdeveloprepeat651]

Great video as always!

[@marcelsdev]

Great comparison examples! "Mother" will be proud! :D

[@theyreMineralsMarie]

Reduce in JavaScript is actually really easy because the parameters arent typed. You can just throw anything in for the identity and then change it however you want on each iteration. I like using reduce to convert and array of objects to an object with specific keys.

[@adamlerman4173]

Thank you for another awesome video!

[@maltegb]

Great Content, keep up!

[@MrPlaiedes]

Great video man!

[@hooked-to-coding]

As I understand it and experienced while coding, .reduce() starts at index 1 when you use it to create a single string from an array of strings. Checking if index > 0 at min 06:01 doesn't really change anything because there is index 0. You might as well left is that way: => str + ", " + name Correct me, if I got it wrong. But thank you nevertheless for all you free and valuable videos. You and Dave Gray are my top resources when it comes to Java Script or React and both of you deserve so much more likes and followers!

[@asadsiddique5527]

Hay Jack, can you tell me how are your printing array values just before it?

[@MarkDekkersLife]

I love your teaching even more than your music. Thanks Macklemore!!

[@jherr]

What, what, what ... what?

[@burgasdragonheirsilentgods]

Amazing !

[@mani8586]

Perfect video for Reduce...the mother of all functions 😅

[@ryosukekureha4873]

잭 형 최고!

[@nkrpradhan]

You are too good Jack!! The way you have compared all the array functions with reducer. Reduce indeed can replace most of the array functions which helps in grasping the concepts. Thanks. What vs extension you are using to see the output on the vscode screen?

[@jherr]

Quokka

[@nkrpradhan]

@@jherr Thanks, Jack. Your videos add a lot of depth to my knowledge.

[@vigyanhoon]

No doubt reduce is mother of all but it is also mother of all complex looking code too! :)

[@jeyosman1]

what extention are you using to see the values live?

[@ahmedmuhammedelsaid5345]

the best ever

[@GurbyTheGreat]

The problem with reduce is that unless the function inside is extremely simple, readibility is sacrificed. You are better off using for...of or for...in

[@aksyonov100]

Nice video Jack as usually! As you said reduce should be used with caution, don't just use it everywhere because it's cool. Good example with lookup, complexity with for-of is O(n) but with reduce you will get O(n^2) .

[@jherr]

Not sure about that since the object by key lookup is O(1)

[@aksyonov100]

@@jherr spread operator is O(n). Every iteration you create a new object and copy everything with spread operator. You can try it on 10000 elements

[@jherr]

@@aksyonov100 fair enough. You could just do a direct assignment. So I just chose O(n^2) in my implementation. 😂

[@aksyonov100]

@@jherr It's quite common mistake and I blame redux for that :-)

[@jherr]

@@aksyonov100 thank you for keeping me honest. :)

[@maenam4520]

This reduces JavaScript in a one shoot ! From where you’ve got resources to make this crazy content 😀?

[@raresraulea5455]

Hi, Jack. On your last example (the reduce hack), two questions: 1. How come that we are also getting the last id resolved? When we are on index 0, value 10, we are awaiting for Promise.resolve() defined as the starting accumulator, at index 1 and value 20, we are awaiting for resolved id 10 returned from first iteration and on the last index 2 with value 30 we are awaiting for the resolved id 20 returned by the promise from the second iteration. So where is the await for the last Promise executed? Does reduce use iterators behind the hood, and awaits the last promise from the accumulator when the iterator has value: undefined and done: true? 2. What is the difference of initialising the accumulator with new Promise() or Promise.resolve()? Also in this chapter, whats the difference between resolving a promise with provided resolve method (from the parameters) and using the static method of the Promise class? Thanks a lot!

[@jherr]

Yeah. Noticed that late. I think you should await the reduce itself.

[@jherr]

I didn’t see how much there was to this question. My bad. Promise.resolve is already resolved. I think with new promise with no function it would never resolve. Still, best thing to do here is for(of). It will be more readable and maintainable.

[@raresraulea5455]

Related to Q1: you are actually getting the output "got 30". But how come that you get it?

[@jherr]

@@raresraulea5455 The promise resolves before the program terminates. You should await the reduce as well, my bad on that.

[@raresraulea5455]

Ok. Thanks a lot!

[@usamaimran1516]

What is that extension, that gives output right after function definition?

[@jherr]

That's probably Quokka.

[@Short_and_Simple]

at 17:48, shouldn't it be index >= 0 ? Since, the slice includes the starting index. For example: const sliceReduce = (start , end) => numbers.reduce((slice, value, index) => ( index >= start && index < end ? [...slice, value] : slice ), []) sliceReduce(1,4) // [ 2, 3, 4 ]

[@campeone3]

i dont understand what the three dot do in the minute 08:11

[@jherr]

That's array destructuring. It takes all the items into the array and then flattens it into, in this case, another array as a copy.

[@lookingforbino]

Which extension did you get for showing that each step is going on under the hood?

[@jherr]

You meant the green squares on the left?

[@lookingforbino]

@@jherr I mean every time you write some logic syntax for such as array, there's always those actions indications of what happened to those arraies on the right.

[@jherr]

@@lookingforbino Yeah, that's Quokka.

[@lookingforbino]

@@jherr Thanks for sharing

[@vigyanhoon]

I see the result same when I used || instead of ??. Whats the diff between them. This is for time 12:48

[@jherr]

|| checks null-ish values (null, undefined, 0, etc.) where ?? checks against null and undefined specifically and only.

[@tarekmagdy5775]

why i dont understand this reduce at all :(

[@mostafakheder7721]

i think reduce is not the mother of all array method it is here mother in low >>>> its complicated

[@jherr]

Hahaha mother-in-law. I love it.