How to Use the New JS Object GroupBy Method

  Рет қаралды 3,462

Steve Griffith - Prof3ssorSt3v3

Steve Griffith - Prof3ssorSt3v3

Ай бұрын

Recently, fully browser baseline support was reached for the Object groupBy method, which is very useful for working with data.
This tutorial explains how the method works and shows a practical demonstration of the method in the browser.
Code from video - github.com/prof3ssorSt3v3/lit...
MDN reference: developer.mozilla.org/en-US/d...
CanIuse reference: caniuse.com/?search=groupBy

Пікірлер: 28
@barungh
@barungh Ай бұрын
Congratulations on 100K subscribers, and thanks a lot for sharing your knowledge and expertise
@Mark-ms8gk
@Mark-ms8gk Ай бұрын
100k! It was a long journey but very well deserved. Congratulations!
@thejarxtv
@thejarxtv Ай бұрын
I always enjoy your videos, cheers on those 100K!
@cristian702
@cristian702 Ай бұрын
Welcome back! Just noticed your new videos. Yes!
@codetechpro
@codetechpro Ай бұрын
I always enjoy your videos, something new I learned today, thanks Steve
@muhammadhossam8557
@muhammadhossam8557 Ай бұрын
very helpful details thanks for your great videos
@shahinza
@shahinza Ай бұрын
Thank you professor for the great video
@binodsharma112
@binodsharma112 Ай бұрын
Great video, Thank you
@LucianoClassicalGuitar
@LucianoClassicalGuitar Ай бұрын
Finally Steve is back!
@zbjz
@zbjz Ай бұрын
GroupBy Method starts at 5:50
@user_8911
@user_8911 Ай бұрын
It would be nice to add performance comparison section to the video.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Ай бұрын
In terms of real world usage, unless you have multiple thousands of objects in your array it is not going to matter which approach you use. This method is for developer convenience.
@deepakvishwakarma2043
@deepakvishwakarma2043 Ай бұрын
great ! can we also sort this based on no. of items in series instead of random order (length of keys : []) ?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Ай бұрын
You can group by length of keys yes. There is no sorting in an object. The order in an object is based on the order that the keys were added.
@user-dh8rm3ob4f
@user-dh8rm3ob4f Ай бұрын
Hello Sir, can you please make videos on node js background processes, how the cores come into play?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Ай бұрын
You can post tutorial requests here - kzfaq.info/get/bejne/gqmVrcSpl9uyY5c.html
@sachin.tandon
@sachin.tandon Ай бұрын
Is there a way of using this function to do a 2-level nested grouped Map/Object, if one were to provide a pair of keys, e.g. { key, sub-key }
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Ай бұрын
It really depends on what you are trying to do. You might want to use reduce or flatMap
@fellastout
@fellastout Ай бұрын
Lipstick on a pig (map method)? But it looks useful, thanks Steve.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Ай бұрын
It doesn't return an array, so closer to the reduce method
@xxapoloxx
@xxapoloxx Ай бұрын
why is this in object and not in array?.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Ай бұрын
It returns an Object not an array. The Map object also has a groupBy method if the keys are not strings or symbols.
@xxapoloxx
@xxapoloxx Ай бұрын
@@SteveGriffith-Prof3ssorSt3v3 so does reduce, this clearly a collection processing functionality, this belongs in array, this bad design.
@aleksandarpopovic3615
@aleksandarpopovic3615 Ай бұрын
behind the scene movies.reduce((groupBY, item) => { if(!groupBY[item.series]) groupBY[item.series] = []; groupBY[item.series].push(item) return groupBY }, {}) I don't understand the purpose of adding things without some benefit... nothing less code is written... who does not understand reduce, will not understand this either
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Ай бұрын
If all you are doing is what you did in that reduce statement, then with the new groupBy you could reduce all the code into this one line: Object.groupBy(movies, ({series})=>series); which I would argue is much easier to read and understand than the reduce method. I've been teaching Array.reduce to students for years and they frequently struggle with the syntax. The more complex the situation, the more options that you are adding, the longer the code becomes, regardless of which option you pick.
@lllllllllIIIIIIIIIIl
@lllllllllIIIIIIIIIIl Ай бұрын
You don't see the benefit of writing less code vs. more code? Wow. Where do you work, so we can all know not to apply?
@xyster7
@xyster7 Ай бұрын
I will never use it, seems to me like another overengineered noise and distraction from the minimalism and simplicity
@UsernameUsername0000
@UsernameUsername0000 Ай бұрын
????????!!! This exists in almost every main language out there. It’s not over engineering. It’s a common task that shouldn’t need so much boilerplate to achieve.
Enhanced UI control and Responsible Accessibility with the HTML INERT Property
12:02
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 1,5 М.
Iterable vs Enumerable in JavaScript
9:15
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 20 М.
Did you believe it was real? #tiktok
00:25
Анастасия Тарасова
Рет қаралды 56 МЛН
KINDNESS ALWAYS COME BACK
00:59
dednahype
Рет қаралды 151 МЛН
Only The Best Developers Understand How This Works
18:32
Web Dev Simplified
Рет қаралды 78 М.
Revealing the Differences between HTML Dialogs and the Popover API
24:14
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 7 М.
JavaScript Object Copying: Shallow vs Deep Copy Explained
14:21
Sathelli Srikanth
Рет қаралды 62
Chrome Dev Tools Console Super Powers
16:44
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 5 М.
5 Design Patterns That Are ACTUALLY Used By Developers
9:27
Alex Hyett
Рет қаралды 213 М.
5 Good Python Habits
17:35
Indently
Рет қаралды 431 М.
Important differences between textContent and innerText
11:44
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 2,3 М.
Why I Don’t Use Arrow Functions With const/let
6:48
Web Dev Simplified
Рет қаралды 184 М.
Why I Stopped Using Backend Frameworks
6:26
Ben Davis
Рет қаралды 9 М.
The Most Important Skill You Never Learned
34:56
Web Dev Simplified
Рет қаралды 176 М.