Incredible New Features in JavaScript ES15 (2024)

#webdev #javascript #ecmascript #programming

The latest ECMAScript version, ES15, introduces some new features to give great developer experience for Javascript developers. These enhancements span across different areas, from updated Javascript syntax and data handling to advancements in security, performance, and tools geared for developer productivity.

1. Array Grouping

One of the most exciting (also one of my personal favorite) feature in ES15 is the Object.groupBy() method.
This way simplifies the way of grouping elements in an array, based on specific criteria. This makes data manipulation more efficient and less error-prone.

Example:

const cities = [
  { name: 'Melbourne', country: 'Australia' },  
  { name: 'Auckland', country: 'New Zealand' },
  { name: 'Sydney', country: 'Australia' },
  { name: 'Brisbane', country: 'Australia' },
  { name: 'Wellington', country: 'New Zealand' }
];

const groupedByCountry = Object.groupBy(cities, fruit => fruit.country);
console.log(groupedByCountry);

// Output:
// {
//   "Australia": [
//       { "name": "Melbourne", "country": "Australia" },
//       { "name": "Sydney", "country": "Australia" },
//       { "name": "Brisbane", "country": "Australia" }
//   ],
//   "New Zealand": [
//       { "name": "Auckland", "country": "New Zealand" },
//       { "name": "Wellington", "country": "New Zealand" }
//   ]
// }

By using this feature, we can reduce the need for custom functions or third-party libraries that we traditionally use for array grouping.

Also with this feature, we can make our code more understandable and maintainable by expressing our intent directly

2. Pipeline Operator (|>)

Sometimes we need to use multiple functions as a chaining process. In that kind of scenario, we can use the pipeline operator (|>) to simplify the chaining process.

Example:

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = 5 |> double |> increment |> square;

// Output: 121

The traditional way of doing above is this

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = square(increment(double(5)));
console.log(result);

// Output: 121

By using the pipeline operator we can use a more functional programming style. From that, we can make our code more readable by removing the complexity of deeply nested function calls.

3. Method Chaining Operator (?.())

ES15 expands optional chaining by introducing the new Method Chaining Operator. This Method Chaining Operator adds safety to method invocation in deeply nested objects.

Example:

const data = {
  user: {
    getName: () => 'Tim'
  }
};

console.log(data.user?.getName?.());  // Output: 'Alice'
console.log(data.user?.getAge?.());  // Output: undefined

The method chaining operator (?.()) allows you to safely invoke methods on potentially null or undefined objects. This reduces the risk of runtime errors caused by calling methods.

4. Set Methods Enhancements

ES15 introduces several enhancements to the Set object, including new methods like union, intersection, difference, and symmetricDifference. These methods simplify common set operations.

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

const unionSet = setA.union(setB);
const differenceSet = setA.difference(setB);
const intersectionSet = setA.intersection(setB);
const symmetricDifferenceSet = setA.symmetricDifference(setB);

console.log(unionSet); // Output: {1, 2, 3, 4, 5}
console.log(differenceSet); // Output: {1, 2}
console.log(intersectionSet); // Output: {3}
console.log(symmetricDifferenceSet); // Output: {1, 2, 4, 5}

union
The union() method of Set instances takes a set and returns a new set containing elements that are in either or both of this set and the given set.
difference
The difference() method of Set instances takes a set and returns a new set containing elements in this set but not in the given set.
intersection
The intersection() method of Set instances takes a set and returns a new set containing elements in both this set and the given set.
symmetricDifference
The symmetricDifference() method of Set instances takes a set and returns a new set containing elements that are in either this set or the given set, but not in both.

5. Enhanced JSON Modules

In previous ECMAScript versions, developers relied on bundlers or loaders to import JSON files. ES15 now supports dynamic import and schema validation, making it easier to work with structured data and ensuring that imported data conforms to the expected format.

You can now import JSON data directly, just like importing JavaScript modules.

Example:

// config.json
{
  "apiUrl": "https://api.example.com",
  "timeout": 5000,
  "features": {
    "enableFeatureX": true
  }
}

import config from './config.json' assert { type: 'json' };

console.log(config.apiUrl); // Outputs: https://api.example.com
console.log(config.timeout); // Outputs: 5000
console.log(config.features.enableFeatureX); // Outputs: true

However, this change might break code that relies on older, non-standard ways of importing JSON, or if certain build tools are configured with older behaviors.