JavaScript. What's New in 2023
Tags: javascript, programming, tutorial, webdev
Published: 2023-12-11 07:12:41

ECMAScript 2023, the 14th edition of the language, has some changes.

## Object.groupBy

Let’s say you have an array of objects and want to separate them based on a property value, type, or quantity.

```js
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 },
];
```

Use `Object.groupBy` on any array with objects, and pass a function that returns the specific key by which you want to categorize.

Here, we are having an array of objects called `inventory`. And a `myCallback` function that is taking a quantity as a parameter and returning ok if the quantity is more than 5, or else returning restock.

We are passing the `inventory` array and the myCallback function to Object, groupBy so that it groups the items in the array by quantity.

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

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

The result will be an object which contains the key which is the category and the specified data inside it.

```js
{
    "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
        }
    ]
}
```

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

When we use methods like `sort()`, `splice()`, and `reverse()`, they mutate the original array. This can sometimes be an issue.

But when using `toSpliced()`, `toSorted()`, and `toReversed()`, we can splice, sort, and reverse an array without mutating the source array.

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

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

In this example, 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.

## findLast() and findLastIndex()

Before ES14, if you wanted to find the last element or index in an array that satisfies some condition, you would have to reverse the array first.

```js
function findLastIndexByReversing(arr, target) {
  const reversedArray = arr.slice().reverse();
  const reversedIndex = reversedArray.indexOf(target);

  if (reversedIndex !== -1) {
    const lastIndex = arr.length - 1 - reversedIndex;
    return lastIndex;
  } else {
    return -1; 
  }
}
```

In this example, `findLastIndexByReversing` creates a reversed copy of the original array using `slice().reverse()`. Then, it uses `indexOf` to find the first occurrence of the target element in the reversed array. The function calculates the corresponding index in the original array by subtracting the reversed index from the total length of the array minus 1. This gives you the last index of the element in the original array.

Or you can use a for loop that starts from the end.

```js
function findLastIndex(arr, target) {
  for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i] === target) {
      return i;
    }
  }
  return -1;
}
```

In this example, the `findLastIndex` function takes an array `arr` and a target element `target`. It iterates over the array from the end `arr.length - 1` to the beginning `0`. If it finds the target element, it returns the index. If the element is not found, it returns -1.

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.

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

const lastIndex = fruits.lastIndexOf('banana'); // 3
```