New Features in ES2024

ECMAScript 2024 (ES2024) introduces a set of exciting features that enhance JavaScript’s capabilities in data grouping, date and time handling, and more. These features aim to simplify common programming tasks and improve the developer experience. Let’s explore the most notable additions: Object.groupBy(), Map.groupBy(), and the new Temporal APIs.

1. Object.groupBy()

The Object.groupBy() method is a powerful addition that allows developers to group the elements of an array into an object based on a grouping function.

How it Works

• Input: An array and a callback function that determines the group key for each element.
• Output: An object where each property represents a group, and its value is an array of items in that group.

const numbers = [1, 2, 3, 4, 5, 6];
const grouped = Object.groupBy(numbers, n => (n % 2 === 0 ? 'even' : 'odd'));

console.log(grouped);
// Output:
// { 
//   odd: [1, 3, 5],
//   even: [2, 4, 6]
// }

2. Map.groupBy()

Similar to Object.groupBy(), the Map.groupBy() method allows grouping elements but produces a Map instead of a plain object. This is especially useful when keys are not limited to strings or symbols.

How it Works

• Input: An array and a grouping function.
• Output: A Map where keys are derived from the grouping function, and values are arrays of grouped items.

Example

const fruits = ['apple', 'banana', 'cherry', 'apricot', 'blueberry'];
const groupedMap = Map.groupBy(fruits, fruit => fruit[0]); // Group by first letter

console.log(groupedMap);
// Output:
// Map {
//   'a' => ['apple', 'apricot'],
//   'b' => ['banana', 'blueberry'],
//   'c' => ['cherry']
// }

3. Temporal API Enhancements

The Temporal API, introduced in earlier ECMAScript versions, replaces the old Date object with more robust and accurate ways to work with dates and times. ES2024 brings new Temporal classes that cater to specific use cases.

3.1 Temporal.PlainDate

Represents a calendar date without a time or timezone.

Example

const date = Temporal.PlainDate.from('2024-12-25');
console.log(date);
// Output: 2024-12-25

3.2 Temporal.PlainTime

Represents a time of day without a date or timezone.

Example

const time = Temporal.PlainTime.from('15:30:00');
console.log(time);
// Output: 15:30:00

3.3 Temporal.PlainMonthDay

Handles month-day combinations without a specific year.

Example

const monthDay = Temporal.PlainMonthDay.from('--12-25'); // Christmas!
console.log(monthDay);
// Output: --12-25

3.4 Temporal.PlainYearMonth

Represents a year-month pair, ideal for monthly billing or planning.

Example

const yearMonth = Temporal.PlainYearMonth.from('2024-12');
console.log(yearMonth);
// Output: 2024-12

Conclusion

ES2024 brings significant improvements that simplify common tasks and make JavaScript more powerful and expressive. The Object.groupBy() and Map.groupBy() methods streamline grouping logic, while the Temporal additions provide unparalleled flexibility in working with dates and times. As these features become widely supported, developers can expect cleaner, more efficient code for handling everyday challenges.

Reference:

https://www.w3schools.com/js/js_2024.asp