Exploring new features and enhancements in Javascript in 2024

Tada! Let’s join hands and have an eye on the gift box of new features and enhancements by Javascript. JavaScript the popular programming language used for web development, has seen a significant evolution over the years and using it is not just enough, to use it fullest we have to keep catching the releases. So, let's have a look at some of the new features I found useful and important to be aware of.

Array Grouping

The basic use case is to group elements within an array conditionally. Object.groupBy() is the method that accepts a callback function and performs grouping based on some criteria.

const students = [{id: 1, age: 20, name: "Atul"},
    {id: 2, age: 18, name: "Vishnu"},
    {id: 3, age: 18, name: "Tina"}];

const grouped = Object.groupBy(students, student => {
    return student.age})

output - {18: [{age: 18, id: 2, name: "Vishnu"},
             {age: 18, id: 3, name: "Tina"}],
          20: [{age: 20, id: 1, name: "Atul"}]}

Promise.withResolvers()

Promise.withResolvers() is a concise approach to working with promises. It returns an object that contains promise, resolve and reject.

const { promise, resolve, reject } = Promise.withResolvers();

const PromiseWithResolversCheck(url) {
const { resolve, reject, promise } = Promise.withResolvers();
    https
      .get(url, (res) => {
        let data = "";
        res.on("data", (item) => {
          data += item;
        });
        res.on("end", () => {
          resolve(data);
        });
      })
      .on("error", (err) => {
        reject(err);
      });
    return promise;
}

Temporal

We all can agree on a note that playing with dates in JavaScript without a third library is painful. But no more!! To handle various concerns related to date and time Javascript has launched Temporal which has a variety of new methods and classes to play around with date and time.

It is split into two major versions plain and zoned. In simple terms, plain represents date/time without timezone information whereas zoned represents date and time in a specific timezone. We can use it based on our product and use cases.

Some of the examples of Plain date/time-

Temporal.Now.plainDateTimeISO().toString()

Temporal.PlainDate.from('2024-03-16');

Temporal.Now.plainTimeISO()

Some of the examples of zoned date/time

Temporal.Now.zonedDateTimeISO().toString()

Temporal.ZonedDateTime.from("2024-03-16")

Temporal.Now.zonedTimeISO()

There are helper methods like add, subtract, equals, with, round etc. Will be discussing all of it in another article.

JSON import

Simpler way to import the JSON files and store the content into a variable in JavaScript.

import jsonfile from "./sample.json" with { type: 'json' };

console.log(jsonfile)
//Prints the content of sample.json file

Pipe Operator

The pipe operator, a standard element in functional languages, facilitates the seamless transfer of a value from one function to another. It enables you to effortlessly direct the output of the preceding function as the input for the subsequent one.

As it's an experimental feature so currently not available for browsers and so not included in node. You can use babel to try it out.

Here, % is a placeholder used to represent the output of the previous function.

const text = "hi"
const addComma = (string) => string + " ,"
const addName = (string) => string + " roy"
const addSurName = (string) => string + " agarwal"
const doUppercase = (string) => string.toUpperCase()

//older way was functional chaining
doUppercase(addSurName(addName(addComma(text))))

//By using pipe operator
text |> addComma(%) |> addName(%) |> addSurName(%) |> doUppercase(%)

//Output: "HI , ROY AGARWAL"

There are a lot more features to discuss, Javascript continues to evolve and enhance itself. Above discussed features are worth learning and using in projects. In this growing tech industry, Javascript usage is increasing so the features of this programming are enhancing. Keep learning!