What's New in ECMAScript 2023 (ES14): A Quick Overview of the Latest Features

Loading...
Published a year ago

JavaScript continues to evolve, with a nice batch of new features added in ECMAScript 14. Here's what's new for JavaScript developers this year.

JavaScript, the language that powers the web, keeps getting better every year. The latest release, ECMAScript 2023 (ES14), brings some fresh and useful features. Let's take a dive into what's new and exciting.
 

Understanding the Specs
 

Before we delve into the new features, let's talk about the ECMAScript specification. It's like the rulebook for JavaScript developers and the engine creators. You can find the latest version at https://tc39.es/ecma262/. It's a living document that evolves as the language grows and adapts to user needs.
 

Exploring the New Features
 

  1. Array.prototype.toSorted(): This handy method creates a new sorted array without changing the original. You can even use a custom sorting function. Here's an example:
     

    const numbers = [5, 2, 7, 3, 9, 1, 6, 4];
    const sortedNums = numbers.toSorted((a, b) => b - a);
    console.log(sortedNums); // [ 9, 8, 7, 6, 5, 4, 3, 2, 1]

     

  2. Array.prototype.toReversed(): Similar to toSorted(), this creates a new reversed array:

     

    const original = ["a", "b", "c", "d", "e"]; const reversed = original.toReversed(); console.log(reversed); // ['e', 'd', 'c', 'b', 'a']
     

  3. Array.prototype.with(): Modify a specific element and get a new array:

     

    const arr = ["I", "am", "the", "Walrus"]; const newArr = arr.with(3, "Ape Man"); console.log(newArr); // ["I", "am", "the", "Ape Man"]
     

  4. Array.prototype.findLast(): Get the last matching element from an array:

     

    const numbers = [54, 34, 55, 75, 98, 77]; const lastEven = numbers.findLast((element) => element % 2 === 0); console.log(lastEven); // 98




     

  5. Array.prototype.findLastIndex(): Get the index of the last matching element:

     

    const numbers = [54, 34, 55, 75, 98, 77]; const lastIndex = numbers.findLastIndex((element) => element % 2 === 0); console.log(lastIndex); // 4
     

  6. Array.prototype.toSpliced(): Similar to splice(), this creates a new array with inserted elements:

     

    const colors = ["red", "orange", "yellow", "green", "blue", "purple"]; const newArr = colors.toSpliced(2, 1, "pink", "cyan"); console.log(newArr); // ["red", "orange", "pink", "cyan", "green", "blue", "purple"]
     

  7. Official Shebang Support: You can now use shebang in JavaScript files to specify the interpreter:

    // hello.js #!/usr/bin/env node console.log("Hello, world!");
     

  8. Symbols as Keys for Weak Collections: Weak collections now support symbols as keys:

     

    const weakMap = new WeakMap(); const key = Symbol("myKey"); weakMap.set(key, "value");

     

Conclusion
 

ECMAScript 14 introduces these useful features to enhance your JavaScript experience. While not groundbreaking, these additions make coding more efficient and enjoyable. JavaScript continues to evolve, making programming on the web better and more powerful.

© 2024 TechieDipak. All rights reserved.