How to Use the New JS Object GroupBy Method

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 พ.ค. 2024
  • 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 หลายเดือนก่อน +4

    Congratulations on 100K subscribers,
    and thanks a lot for sharing your knowledge and expertise

  • @thejarxtv
    @thejarxtv หลายเดือนก่อน +1

    I always enjoy your videos, cheers on those 100K!

  • @Mark-ms8gk
    @Mark-ms8gk หลายเดือนก่อน

    100k! It was a long journey but very well deserved. Congratulations!

  • @codetechpro
    @codetechpro หลายเดือนก่อน

    I always enjoy your videos, something new I learned today, thanks Steve

  • @cristian702
    @cristian702 หลายเดือนก่อน

    Welcome back! Just noticed your new videos. Yes!

  • @muhammadhossam8557
    @muhammadhossam8557 หลายเดือนก่อน +1

    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!

  • @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.

  • @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  หลายเดือนก่อน +1

      It really depends on what you are trying to do. You might want to use reduce or flatMap

  • @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.

  • @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 - th-cam.com/video/LCezax2uN3c/w-d-xo.html

  • @fellastout
    @fellastout หลายเดือนก่อน

    Lipstick on a pig (map method)? But it looks useful, thanks Steve.

  • @zbjz
    @zbjz หลายเดือนก่อน

    GroupBy Method starts at 5:50

  • @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  หลายเดือนก่อน +2

      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 หลายเดือนก่อน +2

    I will never use it, seems to me like another overengineered noise and distraction from the minimalism and simplicity

    • @UsernameUsername0000
      @UsernameUsername0000 หลายเดือนก่อน +3

      ????????!!! 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.