What’s New in JavaScript in 2023- ECMAScript 14th edition

ECMAScript 2023, the 14th edition of the javascript language has some great changes and introduced a few new functions that will make your programming life easier.

In this blog, we will go through each of the changes and understand it with some examples, so let’s start with some new methods.

1. Array.toSliced(), Array.toSorted(), and Array.toReversed()

These are the other new methods in ECMAScript for arrays. When we use methods like sort(), Splice(), and reverse(), then they mutate the original arrays. This can something be an issue.

But when we are using toSorted(), toSpliced() and toReversed() , we will see that we can splice, sort, and reverse an array without mutating the source array

let me show you an example

const numbers = [3, 4, 1, 5, 2];

const splicedNumbers = numbers.toSpliced(1, 1);
const sortedNumbers = numbers.toSorted();
const reversedNumbers = numbers.toReversed();

here you can see we are using  toSpliced() to splice the array, toSorted() to sort the array, and toReversed() to reverse the array.

They work just like regular splice, sort, and reverse but the catch is they will return a new array and not mutate the original one.

2. Object.groupBy()

Object.groupBy function is used for an array of objects, for example, let’s say you have an array of objects and you want to separate them based on a property value, type, or quantity.

then you can use this function to group the array of objects accordingly in ECMAScript.

// Object.groupBy()
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];

To use it, use Object.groupBy on an array with objects, and pass a function that returns the specific key by which you categorize.

In the above, we have an array of objects called inventory And a myCallback function that takes a quantity as a parameter and returns ok if the quantity is more than 5, or else returning restock.

we are passing the array and the function to Object.groupBy so that it groups the items in the array by quantity.

function myCallback({ quantity }) {
  return quantity > 5 ? "ok" : "restock";
}

const result2 = Object.groupBy(inventory, myCallback);

Now you can see the result will be an object that contains the key which is the category and the specific data inside it

{
"restock": [
{
"name": "asparagus",
"type": "vegetables",
"quantity": 5
},
{
"name": "bananas",
"type": "fruit",
"quantity": 0
},
{
"name": "cherries",
"type": "fruit",
"quantity": 5
}
],
"ok": [
{
"name": "goat",
"type": "meat",
"quantity": 23
},
{
"name": "fish",
"type": "meat",
"quantity": 22
}
]
}

3. findLast() and FindLastIndex()

These are two new functions added in ES14 to find the last element or index of the array, before ES14 if you want to find the last element or index in an array that satisfies some condition, then you need to reverse the array first.

But now we have a method known as lastIndexOf() that will start from the end of the array and return the value of the first element that satisfies the condition.

Here is an example

const fruits = ['apple', 'banana', 'orange', 'banana', 'kiwi'];

const lastIndex = fruits.lastIndexOf('banana');

Here is the output

3

Conclusion

In ES14, we can use these new functions for array and these are very easy to use and make our work easy also these functions reduce the line of code to find the last index and to sort without mutating the original array, and most important function is to group the object of array according to requirement.

For more such posts, please follow our LinkedIn page- FrontEnd Competency.