<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Max Svidlo</title>
    <description>The latest articles on DEV Community by Max Svidlo (@svidlak).</description>
    <link>https://dev.to/svidlak</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F433302%2Fde571567-0aeb-480c-ae86-4bca2dc5d6f1.png</url>
      <title>DEV Community: Max Svidlo</title>
      <link>https://dev.to/svidlak</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/svidlak"/>
    <language>en</language>
    <item>
      <title>Is Javascript Object.groupBy() worth the hype? let's find out</title>
      <dc:creator>Max Svidlo</dc:creator>
      <pubDate>Sat, 16 Dec 2023 18:42:28 +0000</pubDate>
      <link>https://dev.to/svidlak/is-javascript-objectgroupby-worth-the-hype-lets-find-out-48lc</link>
      <guid>https://dev.to/svidlak/is-javascript-objectgroupby-worth-the-hype-lets-find-out-48lc</guid>
      <description>&lt;p&gt;With the upcoming release of NodeJS 21, we're getting an exciting new method that should make our object groupings more straightforward: &lt;code&gt;Object.groupBy()&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;As the name of the method suggests, this method accepts an array and groups it by a parameter via a callback function. The use of this new method looks like this:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

const people =[
  {"first_name":"Dotti","birth_year":1985},
  {"first_name":"Gratia","birth_year":1992},
  {"first_name":"Robert","birth_year":1985},
  {"last_name":"Versey","birth_year":1992}
]

const peopleGroupedByBirthYear = Object.groupBy(people, (person) =&amp;gt; person.birth_year)

console.log(peopleGroupedByBirthYear)
/*
{
  "1985":[
    {"first_name":"Dotti","birth_year":1985},
    {"first_name":"Robert","birth_year":1985}
  ],
  "1992":[
    {"first_name":"Gratia","birth_year":1992},
    {"last_name":"Versey","birth_year":1992}
  ]
}
*/


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;But does this method bring us more value except for syntactic sugar? Does it improve runtime and increase performance? Let's take a deeper look.&lt;/p&gt;

&lt;h2&gt;
  
  
  Technicalities
&lt;/h2&gt;

&lt;p&gt;To test this new functionality with different sets and data scale sizes, I've prepared datasets with &lt;strong&gt;1k users&lt;/strong&gt;, &lt;strong&gt;10k users&lt;/strong&gt;, &lt;strong&gt;100k users&lt;/strong&gt;, and &lt;strong&gt;1m users&lt;/strong&gt;. Each user within those datasets has been given a birth year between 1900 and 2000 to make the groups a bit larger.&lt;/p&gt;

&lt;p&gt;For the benchmark, I used mostly common loops and array methods, to see which one will shine the brightest.&lt;/p&gt;

&lt;p&gt;Additionally, every function underwent multiple individual tests across various datasets on a &lt;strong&gt;Docker container&lt;/strong&gt; equipped with a &lt;strong&gt;single-core CPU and 512 MB of RAM&lt;/strong&gt;. This setup ensured that my machine's performance did not influence the results. The functions were repeatedly tested to calculate a cumulative average runtime. Now, let's explore some charts based on these evaluations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgsvu4mrb1tk5gdp62q54.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgsvu4mrb1tk5gdp62q54.png" alt="1k users results"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On a dataset with 1k users, we can see that &lt;code&gt;Object.groupBy()&lt;/code&gt; is indeed the faster one, surpassing other implementations for group data (which is pretty neat, to be honest). I like it, but will it outstand larger datasets? Let's find out:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdinttoww2tivh7eh6k1j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdinttoww2tivh7eh6k1j.png" alt="10k users result"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As for 10k users, &lt;code&gt;Object.groupBy()&lt;/code&gt; starts really to shine, and it beats other iterations and functions by around 50% on average (really nice!), but is it &lt;strong&gt;blazingly fast&lt;/strong&gt;?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl10xmbwfs8sn9h1v3r95.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl10xmbwfs8sn9h1v3r95.png" alt="100k users result"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On a dataset with 100k users, we're starting to see that &lt;code&gt;Object.groupBy()&lt;/code&gt; is starting to run out of fuel, but it still outshines the other functionalities and is superior to other implementations! But is it going to win the race with a dataset of 1 million users?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2270skz079yeyxx5nlew.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2270skz079yeyxx5nlew.png" alt="1m users results"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ouch, it seems that &lt;code&gt;Object.groupBy()&lt;/code&gt; is starting to fall behind when it comes to larger datasets, with Reduce taking its place. Why is that what you're asking? Well, that's for another article.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Object.groupBy()&lt;/code&gt; looks to be a promising new (&lt;em&gt;and almost blazingly fast&lt;/em&gt;) functionality for small to medium-sized datasets, which is neat! For the average use case, you will find this new feature to improve your existing code base. As for larger datasets, that's not the case.&lt;/p&gt;

&lt;p&gt;Tell me what you think in the comments below :) &lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/svidlak/groupby-benchmark" rel="noopener noreferrer"&gt;https://github.com/svidlak/groupby-benchmark&lt;/a&gt;&lt;br&gt;
(1million file is zipped because it exceeds github's filesize policy)&lt;/p&gt;

</description>
      <category>node</category>
      <category>javascript</category>
      <category>benchmark</category>
    </item>
  </channel>
</rss>
