ES13 Latest Features

With the release of ES13, there are several new additions to the JavaScript language that will make your life as a developer easier. In this article, we’ll take a look at some of the most exciting features and how you can start using them today.

Class Field Declarations

Before ES13, class fields could only be declared in the constructor. This meant that we could not declare or define them in the outermost scope of the class. However, this has changed with ES13. Now, we can declare and define class fields in the outermost scope of the class. This change will allow us to better organize our code and make it more readable.

before ES13

class User{
    constructor(){ 
        this.name="w3tweaks";
    }
}
const user = new User();
console.log(user.name);
// output: w3tweaks

In ES13

class User{
    name="w3tweaks";
}
const user = new User();
console.log(user.name);
// output: w3tweaks

Private Methods and Fields

In ECMAScript 13, a new feature called private class fields has been introduced. This feature allows developers to declare and safely access private members of a class. In this article, we will explore how private class fields work and why they are useful.

before ES13

class User{
    constructor(){
        this.name= 'w3tweaks',
        this._domain= '.com'
    }
}
const user = new User();
console.log(user.name); // w3tweaks 
console.log(user._domain); // .com

In ES13

In ECMAScript 13, JavaScript classes can have private fields and members. To do this, you need to prefix the field or member name with a hashtag (#). If you try to access these private fields or members from outside the class, you will get a Syntax Error.

/* **********************************************
     will throw Syntax Error
********************************************** */
class User{
    #domain;
    constructor(){
        this.name ='w3tweaks';
        this.#domain ='.com';
    }
}
const user = new User();
console.log(user.name);
console.log(user.#domain);
// Uncaught SyntaxError: Private field '#city'
// must be declared in an enclosing class

/* **********************************************
     will not throw syntax Error
********************************************** */
class User{
    #domain;
    constructor(){
        this.name ='w3tweaks';
        this.#domain ='.com';
    }
    get domain() {
        return this.#domain;
    }
}
const user = new User();
console.log(user.name);
console.log(user.domain);

Await operator at the top-level

If you have been writing code in JavaScript for any length of time, you have probably encountered the error “The await operator can only be used within an async method.” This is because, up until now, the await operator could only be used within an async function. However, with the release of ES13, we will now be able to use the await operator outside of an async function.

before ES13

function getData(){
    return new Promise(resolve => { 
        setTimeout(() => { 
            resolve("Hi this is w3tweaks");
        }, 1000);
    })
}
const result = await getData();
console.log(result);
// SyntaxError: await is only valid in async function

In ES13

function getData(){
    return new Promise(resolve => { 
        setTimeout(() => { 
            resolve("Hi this is w3tweaks");
        }, 1000);
    })
}
const result = await getData();
console.log(result);
// Output: Hi this is w3tweaks

Method .at() function for Indexing

before ES13, to access a value from the end of an indexable object, the common practice is to write array[array.length – N], where N is the Nth item from the end or you may use slice method.

before ES13

const array = ["a", "b", "c", "d", "e"];
console.log(array[array.length-1]); // e 
console.log(array[array.length-2]); // d

In ES13

The at() method was introduced in ES13, and it provides a more concise and expressive way to access the Nth element from the end of an array. To access the Nth element from end of the array, we simply pass a negative value to -N to at().

const arr = ["a", "b", "c", "d", "e"];
console.log(arr.at(-1)); // e
console.log(arr.at(-2)); // d

Array find from last

In JavaScript we already have an Array.prototype.find and Array.prototype.findIndex to find an element or index of the element. But it searches from first element of the array. If in some situation we need to search from last. So for that, either we have to use reverse() and write additional logic.

before ES13

const data = [{
    value: 'a'
}, {
    value: 'b'
}, {
    value: 'b'
}, {
    value: 'c'
}, {
    value: 'd'
}];
console.log(data.find(item => item.value === 'b')); // {value: 'b'}
console.log(data.findIndex(item => item.value === 'b')); //1

In ES13

The JavaScript Array’s findLast() method returns the last element in the array that satisfies the given condition. It executes the callback function once for each element present in the array until it finds one where callback returns a truth value. This method does not mutate the array on which it is called. The findLastIndex() method is similar to findLast(), but instead of returning the value, it returns the index of the first element in the array that satisfies the provided condition.

const data = [{
    value: 'a'
}, {
    value: 'b'
}, {
    value: 'b'
}, {
    value: 'c'
}, {
    value: 'd'
}];
console.log(data.findLast (item => item.value === 'b')); // {value: 'b'}
console.log(data.findLastIndex(item => item.value === 'b')); // 2