The usage of "array.reduce" in the video is actually discouraged by v8 dev in one of the google talk years ago, when the function was just introduced, people asked that question. Even though technically you could do it, you are trying to reduce an object out of an array. It's really hard to reason, and completely negates its advantage and readability (that might be subjective). Think about why it's called "array.reduce" instead of something like "array.transform"? The design of "array.reduce" in general is to let you create/reduce to a single simpler value (like a string, boolean, number) out of it. For whatever your case, just use a regular for loop and build an object out of your iteration. Then you will instantly understand why "groupBy" was introduced.
It takes an iterable... So that means it would work if you passed it a Set, a Map, a HTMLCollection (or is it NodeCollection?) that is returned from document.querySelectorAll, URLQueryParams, and many others. Pretty sweet!
2:40 Since the key is the object reference, you should definitely take a moment to decide if you want a Map or a WeakMap The difference being that the WeakMap won't prevent garbage collection of the referenced objects.
So nice, I have been normally writing for of loops instead of reduce since it is about the same lines. Now yes it needs a whole new array, but it my head does there first.
Why the hell did you use reduce in your example. It is intended to combine array items into a single result, like sum. min or max; not to convert one data structure into another. This just screams for a simple for loop.
As a consultant I have seen many uses of reduce like this in the wild. Reduce allows you to take an array and turn it into a single "value" - that single value can be anything (including another array or other type of data structure). Reduce is especially useful if you want to speed up an array chain of .map().filter() etc. because you can do it in a single loop. Another fun use case is a Promise "waterfall" where each promise executes one after another - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#running_promises_in_sequence Readability / maintenance is another story, but because you can use reduce this way, people do.
03:11 - oops I forgot to resize the browser window here :|
you silly goose
first time seeing you mess up your vid
wes always messes up
No prob, Chrome and Firefox doesn't matter anyway. 😁
Loved the usage of jupyter notebook for this demo! Worked really well
For large data sets, the first function (array.reduce) is both faster and more memory-efficient in practice.
The usage of "array.reduce" in the video is actually discouraged by v8 dev in one of the google talk years ago, when the function was just introduced, people asked that question. Even though technically you could do it, you are trying to reduce an object out of an array.
It's really hard to reason, and completely negates its advantage and readability (that might be subjective).
Think about why it's called "array.reduce" instead of something like "array.transform"?
The design of "array.reduce" in general is to let you create/reduce to a single simpler value (like a string, boolean, number) out of it.
For whatever your case, just use a regular for loop and build an object out of your iteration.
Then you will instantly understand why "groupBy" was introduced.
We tested it! ruclips.net/video/kN7TuNCv9Wk/видео.html
It takes an iterable... So that means it would work if you passed it a Set, a Map, a HTMLCollection (or is it NodeCollection?) that is returned from document.querySelectorAll, URLQueryParams, and many others.
Pretty sweet!
Group by sounds heavenly
This clarifies all the confusion I had about map vs. object and groupBy vs. reduce, and it does so in 3 minutes. Well done.
2:40 Since the key is the object reference, you should definitely take a moment to decide if you want a Map or a WeakMap
The difference being that the WeakMap won't prevent garbage collection of the referenced objects.
What app were you using to execute the examples?
It's a Jupyter notebook with Deno instead of Python. Testing it out for these type of explainer vids
I'd love to know more. Specifically, have you tried other TS notebooks and why is this the best solution?
yeah this looks better than quokka's console presentation
Deno 2 makes this very easy to setup and get started. Just a few mins and commands and you're good to go.
@@WesBos thanks for your answer, this looks like it gonna help me learning/explaining algorithm easier
groupBy()... does that mean I don't have to use for() loops anymore?!?
hmmm, I wonder what the performance will be?
Is this SQL in JS?
So nice, I have been normally writing for of loops instead of reduce since it is about the same lines. Now yes it needs a whole new array, but it my head does there first.
Ow, this is new for me. I don't know you could use jupyter notebook with javascript. I thought it's only for python.
You can now with the Deno core
Why the hell did you use reduce in your example. It is intended to combine array items into a single result, like sum. min or max; not to convert one data structure into another. This just screams for a simple for loop.
Because everyone uses reduce for this - I’m on your team, it’s too complicated. That’s the point of the video
As a consultant I have seen many uses of reduce like this in the wild.
Reduce allows you to take an array and turn it into a single "value" - that single value can be anything (including another array or other type of data structure).
Reduce is especially useful if you want to speed up an array chain of .map().filter() etc. because you can do it in a single loop.
Another fun use case is a Promise "waterfall" where each promise executes one after another - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#running_promises_in_sequence
Readability / maintenance is another story, but because you can use reduce this way, people do.