JavaScript Object.groupBy, Map.groupBy, Record, and HashMap

1. Grouping in JavaScript: Object.groupBy() and Map.groupBy()

For a long time, JavaScript didn’t have a simple, built-in way to group items in arrays based on a condition or property. Developers often had to write custom code using loops or reduce(). While this worked, it wasn’t always efficient or easy to understand, especially for beginners.

Now, with Object.groupBy() and Map.groupBy(), JavaScript offers two powerful methods to group data effortlessly:

Object.groupBy(): Returns a plain object where the keys are strings.
Map.groupBy(): Returns a Map object where the keys can be any data type (not just strings).

Both methods simplify the task of grouping items, and you don’t need to write complex code anymore. Let’s explore both in detail with examples.

How We Used to Group Things (The Old Way)

Let’s say you have a list of pets:

const pets = [
  { name: 'Max', type: 'dog' },
  { name: 'Whiskers', type: 'cat' },
  { name: 'Buddy', type: 'dog' },
  { name: 'Goldie', type: 'fish' },
  { name: 'Shadow', type: 'cat' }
];

You want to group them by type so all the dogs are together, all the cats are together, and so on. Before Object.groupBy(), you had to write code like this:

const groupedPets = pets.reduce((groups, pet) => {
  if (!groups[pet.type]) {
    groups[pet.type] = [];
  }
  groups[pet.type].push(pet);
  return groups;
}, {});

console.log(groupedPets);

This code works, but it’s a bit messy. You need to know how reduce() works, and there’s a lot going on. Not very beginner-friendly, is it?

The New Way: Using Object.groupBy()

Now, JavaScript makes it easier. Here’s how you can do the same thing with Object.groupBy():

const groupedPets = Object.groupBy(pets, pet => pet.type);

console.log(groupedPets);

And that’s it! The result will look like this:

{
  dog: [
    { name: 'Max', type: 'dog' },
    { name: 'Buddy', type: 'dog' }
  ],
  cat: [
    { name: 'Whiskers', type: 'cat' },
    { name: 'Shadow', type: 'cat' }
  ],
  fish: [
    { name: 'Goldie', type: 'fish' }
  ]
}

Map.groupBy (When Using Maps)

Similar to Object.groupBy, the Map.groupBy() method allows grouping data while returning a Map object instead of a plain object. This is useful when you need the keys to be any data type.

Here’s an Example:

const pets = [
  { name: 'Max', type: 'dog' },
  { name: 'Whiskers', type: 'cat' },
  { name: 'Buddy', type: 'dog' }
];

const mapGrouped = Map.groupBy(pets, pet => pet.type);
console.log(mapGrouped);

The result is a Map where keys are the group types:

Map(2) {
  'dog' => [ { name: 'Max', type: 'dog' }, { name: 'Buddy', type: 'dog' } ],
  'cat' => [ { name: 'Whiskers', type: 'cat' } ]
}

2. JavaScript Record and Tuple: Solving Data Mutation Issues

JavaScript’s default data structures, such as objects and arrays, are mutable, which means their contents can be changed after creation. While this flexibility is useful in many scenarios, it can also lead to accidental changes, bugs, and unexpected behavior. To address these challenges and provide developers with safer, immutable data structures, the Records and Tuples proposal introduces Records (immutable, object-like structures) and Tuples (immutable, array-like structures).

What are Record and Tuple?

A Record is like an object, but you can’t change its properties.
A Tuple is like an array, but you can’t change its values.

Why Do We Need Immutable Data?

Imagine you have an object that stores user information:

const user = { name: 'Alice', age: 25 };

Now, someone accidentally changes the name property:

user.name = 'Bob';
console.log(user); // { name: 'Bob', age: 25 }

This can cause problems in your program because the data changed without warning.

With a Record, this mistake can’t happen:

const userRecord = #{ name: 'Alice', age: 25 };
// userRecord.name = 'Bob';  // Error! Cannot modify a Record.

The data is safe and stays the same.

How to Use Record and Tuple

1. Record: Immutable Objects

A Record looks like an object but starts with a # symbol:

Imagine you are building a system that stores user profiles. You don’t want anyone to accidentally change the data once it’s set.

Using Record:

const userProfile = #{ id: 1, name: 'Alice', role: 'admin' };

console.log(userProfile.name); // 'Alice'

// Trying to change it will fail
// userProfile.name = 'Bob'; // Error

This guarantees that the user profile stays unchanged.

2. Tuple: Immutable Arrays

A Tuple looks like an array but starts with a # symbol:

Let’s say you have a configuration array for app settings:

const config = # ['dark-mode', 'notifications', 'auto-save'];
console.log(config[0]); // 'dark-mode'

// Trying to change the settings will fail
// config[0] = 'light-mode'; // Error

With Tuple, you can ensure the settings remain the same throughout your app.

Key Benefits of Record and Tuple

Data Safety: Prevents accidental changes to your data.
Easy Equality Checks: Records and Tuples are compared by value, not by reference. For example:

console.log(#{ a: 1 } === #{ a: 1 }); // true
console.log([1] === [1]);             // false

Better Performance: Immutable data structures are optimized for speed and efficiency.

Even though Records and Tuples aren’t fully part of JavaScript yet, they’re being developed to help make programs more reliable and easier to debug. You can try them out now using special tools like polyfills or Babel to see how they work!

3.JavaScript HashMap and HashSet: The Key to Faster and Cleaner Code

In JavaScript, we often use arrays and objects to store and organize data. They work well for many things, but they have limits. For example:

Objects can only use strings or symbols as keys, which isn’t always flexible enough.
Arrays allow duplicate values, so you have to write extra code to make sure items are unique.

That’s where HashMap and HashSet come in!

HashMap is great when you need to store key-value pairs, like mapping user IDs to names or tracking items by unique keys.
HashSet is perfect for keeping a collection of unique values, like a list of tags or unique IDs.
Both are designed to handle large amounts of data efficiently, making them ideal for tasks like searching, adding, or deleting items quickly, even in big datasets.

These tools make it easier and faster to manage your data without worrying about duplicates, key limitations, or performance issues. Let’s dive in and see how they work!

How to Use HashMap and HashSet

1. HashMap: Efficient Key-Value Storage

A Map is the JavaScript equivalent of a HashMap. It allows you to use any type of key, such as strings, numbers, objects, or even functions:

// Create a HashMap (Map in JS)
const userMap = new Map();

// Add key-value pairs
userMap.set('name', 'Alice');      // String key
userMap.set(123, 'User ID');       // Number key
userMap.set({ role: 'admin' }, 42); // Object key

console.log(userMap.get('name'));  // Output: 'Alice'
console.log(userMap.get(123));     // Output: 'User ID'

// Check if a key exists
console.log(userMap.has('name'));  // true

// Delete a key
userMap.delete(123);
console.log(userMap.has(123));     // false

2. HashSet: Storing Unique Values

A Set is the JavaScript equivalent of a HashSet. It ensures that values are unique — no duplicates are allowed:

// Create a HashSet (Set in JS)
const uniqueItems = new Set();

// Add values
uniqueItems.add(1);
uniqueItems.add(2);
uniqueItems.add(2); // Duplicate value, won't be added
uniqueItems.add('hello');

console.log(uniqueItems); // Output: Set { 1, 2, 'hello' }

// Check for a value
console.log(uniqueItems.has(1));  // true

// Delete a value
uniqueItems.delete(2);
console.log(uniqueItems); // Output: Set { 1, 'hello' }

Key Benefits of HashMap and HashSet

Flexibility: Store any data type as keys (HashMap) or ensure uniqueness (HashSet).
Performance: Faster search, insert, and delete operations compared to objects and arrays.
Simplified Code: No need to manually write logic for uniqueness or complex key handling.

JavaScript Mastery: GroupBy, Record, Tuple, HashMap & HashSet.