ECMAScript 2022 is a new JavaScript standard that is going to be released in June 2022. Let’s overview the most important changes that would appear almost certainly in the new release as they reached the 4th stage of TC39 process.

TC39 are group of Javascript maintainers that accept and release new features. They have 4 stages process with 1 being just idea proposal and 4 ready to be released in new ECMAScript version

1. Method at() in arrays

Finally! ES2022 will give us a possibility to index array-like objects from the end. That’s a tiny feature, but it improves core readability when dealing with arrays or strings.

At() method with positive number will work the same as indexing by [] , but with negative will allow accessing values from the end.

Instead of writing:

const arr = [1,2,3,4]
arr[arr.length - 2] // 3
arr.slice(-2)[0]    // 3

const str = "1234"
str[str.length - 2] // '3'
str.slice(-2)[0]    // '3'

We would be able to write:

const arr = [1,2,3,4]
arr.at(-2) // 3

const str = "1234"
str.at(-2) // '3'

2. Error cause

.cause property on the error object would allow us to specify which error caused the other error. Pretty self-explanatory right? Here you can see an example use of this new feature:

try {
  doSomeComputationThatThrowAnError() 
} catch (error) {
  throw new Error('I am the result of another error', { cause: error })
}

Error cause would be a perfect way to chain errors together, which is possible in other programming languages like Java.

3. Top-level await

Did you know that you couldn’t use await directly in code outside of the function? If not, then it’s not a big deal for you. But for the others — no need to worry as ES2022 will change that.

Why would it be useful?

• It allows to load modules dynamically

const serviceName = await fetch("https://example.com/what-service-should-i-use")
const service = await import(`/services/${serviceName}.js`)

// OR

const params = new URLSearchParams(location.search);
const theme = params.get('theme');
const stylingFunctions = await import(`/styling-functions-${theme}.js`);

• It allows to conditionally render modules

const date = new Date()

if(date.getFullYear() === 2023) {
  await require('/special-code-for-2023-year.js')
}

4. Private slots and methods

Classes in pure Javascript are present since ES6, but they are much less developed than in object-oriented languages. Many developers use Typescript to include some of those features and now we can see being implemented in pure JS classes.

Private slots are one of them. They are nothing more than private properties of the classes. ES2022 will give us the possibility to create them and get an error when we try to access them outside of the class. The same goes for private methods. Interestingly JS team chose to give them # prefix (has it something to do with JS legacy?).

Here is an example of private slots in action:

class Human {
  #name = "John";

  setName(name) {
    this.#name = name;
  }
}

const human = new Human()
human.#name = 'Amy'  // ERROR!
human.setName('Amy') // OK

And private method:

class Human {
  name = "John";

  constructor(name) {
    this.#setName('Amy') // OK
  }

  #setName(name) {
    this.name = name;
  }
}

const human = new Human()
human.#setName('Amy') // ERROR!

Final notes

The list is not complete, but those are in my opinion most impactful and useful features of the new release. You can find all improvements here. Let me know what’s your opinion on the new features and if you plan to use them.

Feel free to reach out to me on LinkedIn if you want to connect or have any questions!