If you use JavaScript often then you are probably aware of the standard that defines how it is written by developers, ECMAScript. To end the year 2024, I'll share some information about ECMAScript 2024 (ES2024).

ECMAScript (ES) is a standard for scripting languages, including JavaScript, JScript, and ActionScript. It is best known as a JavaScript standard intended to ensure the interoperability of web pages across different web browsers. It is standardized by Ecma International in the document ECMA-262.

Here are a few facts about the ES standard:

• Old ECMAScript versions were named by numbers: ES5 and ES6.
• From 2016, versions are named by year: ES2016, 2018, 2020...
• The 15th edition, ECMAScript 2024, was published in July 2024.

New Features in ES2024

• Object.groupBy()
• Map.groupBy()
• Temporal.PlainDate()
• Temporal.PlainTime()
• Temporal.PlainMonthDay()
• Temporal.PlainYearMonth()

There aren't too many new useful features in ES2024 as you will see in this article. A lot of features were released in the previous version, ES2023 which included:

• Array findLast() - start from the end of an array and return the value of the first element that satisfies a condition.
• Array findLastIndex() - finds the index of the last element that satisfies a condition.
• Array toReversed() - a safe way to reverse an array without altering the original array.
• Array toSorted() - a safe way to sort an array without altering the original array.
• Array toSpliced() - a safe way to splice an array without altering the original array.
• Array with() - a safe way to update elements in an array without altering the original array.
• #! (Shebang)

I know pronouncing it out loud sounds like a dog cartoon character but it's not.

A Shebang is a number sign and an exclamation mark (#!) at the beginning of a script e.g.

#!/usr/bin/env node

The example above tells the operating system to use the node program to run the script. This way, you can run JavaScript code with ./fileName.js instead of node fileName.js. #! is also called sharp-exclamation, hashbang, pound-bang, or hash-pling.

Object.groupBy()

The Object.groupBy() method groups elements of an object according to string values returned from a callback function. The Object.groupBy() method does not change the original object. The elements in the original and in the returned object are the same. The changes will be reflected in both the original and in the returned object. Here is an example:

// Create an Array
const cars = [
  {brand:"Lamborghini", year: 2019},
  {brand:"Mercedes", year: 2010},
  {brand:"Porsche", year: 2005},
  {brand:"KIA", year: 2022}
];

// Callback function to Group Elements
function myCallback({ year }) {
  return year > 2010 ? "New" : "Old";
}

// Group by Quantity
const result = Object.groupBy(cars, myCallback);

Map.groupBy()

The Map.groupBy() method groups elements of an object according to string values returned from a callback function. The Map.groupBy() method does not change the original object. The elements in the original and in the returned object are the same. Changes will be reflected in both the original and in the returned object. Here is an example:

// Create an Array
const cars = [
  {brand:"Lamborghini", year: 2019},
  {brand:"Mercedes", year: 2010},
  {brand:"Porsche", year: 2005},
  {brand:"KIA", year: 2022}
];

// Callback function to Group Elements
function myCallback({ year }) {
  return year > 2010 ? "New" : "Old";
}

// Group by Quantity
const result = Map.groupBy(cars, myCallback);

The difference between Object.groupBy and Map.groupBy is:

• Object.groupBy() groups elements into a JavaScript object.
• Map.groupBy() groups elements into a Map object.

Temporal.PlainDate()

The PlainDate() method lets you to create a date with no time. To create a plain date object, you can use this syntax:

const date = Temporal.PlainDate(2024, 5, 1);

Temporal is currently in stage 3 and is almost finished in the 2024 proposal.

Temporal.PlainTime()

The PlainTime() method allows you to create a time with no date. Similar to PlainDate, Temporal is currently in stage 3 and is almost finished in the 2024 proposal. Here is the syntax:

const date = new Temporal.PlainTime(10, 30);

Temporal.PlainMonthDay()

The PlainMonthDay() method lets you to create a month and day with no year. Here is the syntax:

const date = new Temporal.PlainMonthDay(5, 1);

Temporal.PlainYearMonth()

The PlainYearMonth() method lets you to create a time with only the year and month. Here is the syntax:

const date = new Temporal.PlainYearMonth(2024, 5);

Wrapping Up

Those are pretty much all the features that were introduced with ES2024. We can catch up next year if a new ECMAScript version is released. This is most likely because it is actively being maintained and updated. I hope you had a lovely 2024 full of discovery and learning and I wish you more of the same in 2025. Until then, happy coding! ✌🏾