All The New JavaScript Features Coming Up with ECMAScript 2022

Nikol Ruseva — Thu, 25 Aug 2022 08:48:25 +0000

The thirteenth edition of ECMAScript Language specification was officially approved on June 22, 2022. With its release, new features were added to the JavaScript language:

Method .at();
Object.hasOwn();
RegExp: match indices(‘d’ flag);
Error: .cause;
New members of Classes;
Private Slot Checks;
Top-level Await.

Now let’s find out more about each new feature.

Method .at()

The method .at() is supported by indexable values like Array, String, or TypedArray. It takes a positive or negative integer value and returns the element at the given index.

In this example, there is an array with three elements, which means that its length is 3. The first element is at index 0 and the last is at index array length -1 (in this example at index 2).

To check what the element at a certain index is, use the bracket operator (animals[0]). For indexes out of the range, the program returns “Undefined“.

				
					let animals = ["Cat", "Dog", "Cow"];

console.log(animals[0]);
console.log(animals[animals.length - 1]) 
console.log(animals[animals.length])

//Cat
//Cow
//undefined

The new feature works exactly like the bracket operator but it allows negative indexing of elements. The last element is accessed easily by replacing animals[animals.length – 1] with animals.at(-1)

				
					let animals = ["Cat", "Dog", "Cow"];

console.log(animals.at(0));
console.log(animals.at(-1));

//Cat
//Cow

				
					//Example with a String
let string = "Hello, World!";

console.log(string.at(-1));

//!

Object: .hasOwn()

Object.hasOwn() returns true if the specified object has the indicated property as its own property. If the property is inherited or does not exist, the method returns false.

Object.hasOwn() is intended as a replacement of Object.hasOwnProperty()

Before:

				
					let user = {
name: 'John Doe',
role: 'Admin'
};

console.log(user.hasOwnProperty('role'));
console.log(user.hasOwnProperty('age'));

//true
//false

After:

				
					let user = {
name: 'John Doe',
role: 'Admin'
};

console.log(Object.hasOwn(user, 'role'));
console.log(Object.hasOwn(user, 'age'));

//true
//false

RegExp: match indices(‘d’ flag)

ECMA Script 2022 introduced a new /d flag for Regular Expressions. It provides some additional information about the start and indices position end of each match in the input string.

Without the new feature the following information has been provided:

				
					let string = 'hello1helloAll';
let regEx = /hello(\w)/g;
let result = [...string.matchAll(regEx)];
console.log(result[0]);
//[ 'hello1', '1', index: 0, input: 'hello1helloAll', groups: undefined ]

let string = 'hello1helloAll';
let regEx = /hello(\w)/g;
let result = [...string.matchAll(regEx)];
let regEx2 = /hello(\w)/dg;
let result2 = [...string.matchAll(regEx2)];
console.log(result2[0]);

With the /d flag there is an array with the indices of the different elements that match the regex:

				
					[
  'hello1',
  '1',
  index: 0,
  input: 'hello1helloAll',
  groups: undefined,
  indices: [ [ 0, 6 ], [ 5, 6 ], groups: undefined ]
]

Error: .cause

With the Error .cause, you can add more essential information to the errors you receive. You should specify the error options as a second parameter, and with the “cause“ key you can pass the error that you want to chain.

Before:

				
					const weatherNow = async (city) => {
    try {
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=67a20d293903cbcf9aab38633b30fbf9`);
      const info = await response.json();
      const description = info.weather[0].description;
      return description;
    } catch (error) {
throw new Error('Something went wrong')
    }
  }
 
try {
    await weatherNow('');           //Empty string
} catch(error) {
    console.log(error);
}

//Error: Something went wrong
    //at weatherNow (<anonymous>:8:7)
    //at async <anonymous>:13:5

After:

				
					const weatherNow = async (city) => {
    try {
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=67a20d293903cbcf9aab38633b30fbf9`);
      const info = await response.json();
      const description = info.weather[0].description;
      return description;
    } catch (error) {
throw new Error('Something went wrong', { cause: error })
    }
  }
 
try {
    await weatherNow('');        //Empty String
} catch(error) {
    console.log(error.cause);
}

//TypeError: Cannot read properties of undefined (reading '0')
    //at weatherNow (<anonymous>:5:39)
    //at async <anonymous>:13:5

New Members of Classes

Static class fields and methods are not used on instances of a class. Instead, they can be called on the class itself and are declared using the static keyword. Static methods are often utility functions and helpers, whereas static properties are useful for caches, fixed-configuration, or any other data we do not need to be replicated across instances.

Before:

				
					class User {
    firstName = 'Jon';
};
  
console.log(User.firstName); 
  
//undefined

After:

				
					class User {
    static firstName = 'Jon';
};

console.log(User.firstName); 
  
//Jon

Private Slot Checks

EcmaScript 2022 added new features such as private instance fields, methods, and accessors. To initialize a private method or a field before you had to add an underscore at the beginning of its name, but this did not guarantee that the method/field will be private. Now, you just need to add a # at the beginning of the method name to have it declared as private.

It looks like this:

				
					class User {
    firstName = 'John';
    lastName = 'Doe';
    #role = 'Admin';
}
 
const adminUser = new User();
console.log(adminUser.role); 
  
//undefined

				
					class User {
    firstName = 'John';
    lastName = 'Doe';
    role = 'Admin';
    #sayHi() {
        return this.firstName + ' ' + this.lastName + ' with role ' + this.role + ' says Hi!';
    }
}
 
  const adminUser = new User();
  console.log(adminUser.sayHi());      
  
//TypeError: adminUser.sayHi is not a function

Top-level Await

Before ECMAScript 2022 await could only be used in the scope of asynchronous functions. Now the await keyword can be used outside of an async function within a JavaScript module. This means that a module waits for its child modules that use await to execute before it runs itself.

				
					const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=london&appid=67a20d293903cbcf9aab38633b30fbf9`);
const info = await response.json();
const description = info.weather[0].description;
console.log(description);

We will receive an error:

				
					SyntaxError: await is only validin async functions and the top-level bodies of modules

With ECMAScript 2022 it works fine and you will see the following:

				
					//clear sky

Conclusion

Nowadays when technology is rapidly evolving being up to date is an important part of working as a software developer.

The EcmaScript specification for 2022 contains some significant changes that aim to provide convenience and efficiency in programming by allowing you to write more expressive and concise code. After reading this post, you are now familiar with all of the new features and it is up to you to choose which of them to use into your JavaScript programming.

The post All The New JavaScript Features Coming Up with ECMAScript 2022 appeared first on SoftUni Global.

jsfeatures Archives - SoftUni Global

All The New JavaScript Features Coming Up with ECMAScript 2022

Method .at()

Object: .hasOwn()

RegExp: match indices(‘d’ flag)

Error: .cause

New Members of Classes

Private Slot Checks

Top-level Await

Conclusion