New Features in ECMAScript 2023

What is ECMA?

ECMA stands for European Computer Manufacturer Association. ECMA International is a non-profit organization that develops standards in computer hardware and programming languages. It was originally founded in 1961 and its headquarters is in Geneva, Switzerland. One of its well-known standards is ECMAScript, which is standard for JavaScript.

What is ECMAScript?

ECMAScript is a scripting language specification that was developed by ECMA International to create a standardized javascript specification across all web browsers. It is mostly used for client-side scripting in web browsers and for server-side scripting using node.js.

JS became the ECMA standard in 1997 and from there, many versions of ECMA have been released abbreviated to ES1, ES2, ES3, ES5, and ES6 (2015).

Since 2016, versions are named by year (ECMAScript 2016, 2017, 2018, 2019, 2020).

In this blog first, we will quickly revise some of the older features released in and after ES6 and then will jump to the new features that are released in the latest version which is ES14 (ECMAScript 2023).

Older ES Features

The most important features that were released in older ES are the addition of

1. Let Const Keyword

2. Arrow Function

3. Spread and rest Operator ( ... )

4. For/of

5. Map, sets, classes, promises

6. Array.prototype.includes, JavaScript Exponentiation

7. Nullish Coalescing Operator (??), Optional Chaining (?.), and so on.

ES Features released in 2023

ES 14 included new methods or additions for arrays and also support for shebang in ECMAScript files. So first we will look into methods added for arrays in JS.

1. Array.prototype.toSorted()

   toSorted() method is same as the sort() method, but it creates a new array instead of operating on the same array making it a safe way to sort an array.

   Let's see the difference.

    let arr = [22,11,14,12,19]
    arr === arr.sort(); // true - [11,12,14,16,22]
    arr === arr.toSorted() // false - [11,12,14,16,22]
   

   This method can also be used with an array of objects similar to the sort method. For comparing and sorting an array of objects it takes a computational function as an object as there’s no natural ordering for objects.

   Example

 // Comparing objects
 const objects = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Bill", age: 40 }, 
    { name: "Mary", age: 20 }    
];
 const sortedObjects = objects.toSorted((a, b) => {
   return a.name.localeCompare(b.name); 
 });
 console.log(sortedObjects);
 //[{"name":"Bill","age":40},{"name":"Jane","age":25},{"name":"John","age":30},{"name":"Mary","age":20}]

1. Array.prototype.toReversed()

   ES2023 added the Array toReversed() method as a safe way to reverse an array. It returns a new array unlike what the old reverse method does keeping the old array as it is (unchanged).

   Let's see an example

    const fruits = ["Apple", "banana", "carrot", "Guava"]
    const revFruits = fruits.toReversed()
    console.log(fruits, revFruits); 
    // ["Apple", "banana", "carrot", "Guava"]
    // ["Guava", "Carrot", "Banana", "Apple"]
   

2. Array.prototype.with()

   Again for updating an array element without altering the original array, we can use the with() method. It replaces the array element with the newer element and returns a new array.

   Let's see an example ->

    const arr4 = ["I", "am", "ES6", "Old Features"];
   
    // Replace the string "Walrus" with "Octopus".
    const newArr4 = arr4.with(3, "New Features");
   
    console.log(newArr4); // ["I", "am", "ES6", "New Features"]
   

3. Array.prototype.findLast()

   The findLast() method lets us get the final instance of a matching element from an array. If no matching element is found, it returns undefined. It always starts from the end of the array and return the value that satisfies the condition.

   Example ->

    const arr = [24, 36, 17, 75, 99, 77];
   
    const lastEven = arr.findLast((element) => {
      return element % 3 === 0;
    });
   
    console.log(lastEven); // 99
   

4. Array.prototype.findLastIndex()

   The findLastIndex() method lets us get the index of the final instance of a matching element from an array. It returns the index of an array that satisfies the condition. It also checks from the end of an array.

   Example ->

    const arr = [24, 36, 17, 75, 99, 77];
   
    const lastEvenIndex = arr.findLastIndex((element) => {
      return element % 3 === 0;
    });
   
    console.log(lastEvenIndex); // 4
   

5. Array.prototype.toSpliced()

   ES2023 added the Array toSpliced() method as a safe way to splice an array. It returns a new array unlike what the old splice method does, keeping the old array as it is (unchanged).

   Example ->

const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1); // ["feb", "mar", "april"]

These are the new additions in ES14 in 2023. There is a possibility some of the methods may not work in some older browsers as these features are relatively new. Older browsers may need an alternative for those methods, in that case, we can always write polyfills for them.

I hope you liked reading this and learned something new today. Thank you for staying up here until the next blog. Bbye !

Happy learning! Cheers 🥂.