DEV Community

Cover image for Array Grouping In JavaScript (2024)
Toukir Ahmed.Dev
Toukir Ahmed.Dev

Posted on

Array Grouping In JavaScript (2024)

Array Grouping In JavaScript (2024)
Array Grouping is not a new thing in JavaScript . Array Grouping is a new feature in JavaScript that helps developers organize elements in an array into groups based on a specific characteristic. This makes it easier to find and work with data.
Now , the questions is how does it works ?
well, before coming latest and modern method developer groups the array elements many different ways on of them is "reduce method".

example :

const students = [
{name: "SK Toukir", age: 21 },
{name: "SK Turaj", age: 21},
{name: "SK Jehan", age: 20},
];
const studentAges = student.reduce((result, student=>{
const age = student.age;
if( !result[ age ] ){
result[ age ]= [ ];
} result[ age ].push( student );
return result;
}),{});
console.log( studentAges );

But in modern JavaScript It become very easy , developers can do this in a minutes using "Object . groupBy" method or " array.group"
method .
1.Object . groupBy
example :

const students = [
{name: "SK Toukir", age: 21 },
{name: "SK Turaj", age: 21},
{name: "SK Jehan", age: 20},
];
const studentAges = Object.groupBy( students, ( student=>student.age ) );
console.log( studentAges );

In this method first developers write Object.groupBy (method name) it takes 2 paramiters. First paramiter will be the array name and the second paramiter will be a call back function and by that developers can easily groups the array elements.

  1. array.group example:

const students = [
{name: "SK Toukir", age: 21 },
{name: "SK Turaj", age: 21},
{name: "SK Jehan", age: 20},
];
const studentAges = students.group( student=>student.age );
console.log( studentAges );

The group() method takes the items in your array and sorts them into groups. Each group has a label (called a "key"), and the items that belong to that group are stored together in an array.

Notice : If these tow method do not work in anyone's node version then open the terminal in your "vs code" the type "npm i core-js" then run the code again , hopefully it will work .

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay