JavaScript News in 2022

Every month we have various news in our favorite languages, and JavaScript is no different!

In this video I explain a bit more about the process of releasing new JavaScript features. If you haven’t watched it yet, I strongly recommend it to better understand how everything works!

That said, the 2022 version of ECMAScript, the specification behind JS, is incredible and I will explore with you all the main news!

The .at() method on all indexables#

One of the simplest yet coolest pieces of news is the addition of the .at() method on arrays and any other native indexable, like strings.

What it does is get the item at the requested position of the array, for example:

1
const carrinho = ['banana', 'maçã', 'pera']
2
carrinho.at(0) // banana
3
carrinho.at(-1) // pera
4

5
// Out of bounds
6
carrinho.at(100) // undefined

And this works for any indexable, so if we have a string:

1
const frase = 'O rato roeu a roupa do rei de Roma'
2

3
frase.at(0) // O
4
frase.at(-1) // async

Capture indices in RegExp#

Now, besides bringing the match from your Regex, the RegExp constructor also brings a list of indices of where that match started and ended, for example:

1
const input = 'abcd'
2
const match = /b(c)/.exec(input)
3
const indices = match.indices
4

5
indices.length // 2
6
matches.length // 2
7
// O número de indices é igual ao numero de matches
8

9
indices[0] // [1,3] inicio/fim do primeiro match "b"
10
input.slice(indices[0][0], indices[0][1
11
]) // mesma coisa que match[0]

Object.hasOwn#

A simpler variation of Object.hasOwnProperty that returns true for all properties that are directly owned by an object (without being inherited):

1
const livros = {}
2
livros.paginas = 123
3

4
Object.hasOwn(livros, 'paginas') // true
5
Object.hasOwn(livros, 'toString') // false
6

7
// O 'in' verifica todas as propriedades
8
'paginas' in livros // true
9
'toString' in livros // true

Error causes with Error.cause#

One of the main changes and one that I think will be most useful. This new property of the error class shows the cause of the thrown error.

1
const erro = new Error('Um erro', { cause: 'A causa desse erro' })
2

3
erro instanceof Error // true
4
erro.cause // 'A causa desse erro'

The main use case is to avoid passing the error object directly:

1
try {
2
  naoFunciona();
3
} catch (err) {
4
  throw new Error('naoFunciona failed!', { cause: err });
5
}

Top-level await#

This has been available in Node.js for a while, but since we have ESModules it’s already possible to perform top-level await, that is, an await outside of an async function:

1
// falha na implementação antiga
2
await Promise.resolve('🍎');
3
// → SyntaxError: await is only valid in async function
4

5
// correção que a gente costuma fazer com IIFE
6
(async function() {
7
  await Promise.resolve('🍎');
8
  // → 🎉
9
}());
10

11
// nova implementação de top-level await
12
await Promise.resolve('🍎') // '🍎'

Class field declarations#

We FINALLY now have class property declarations outside the constructor, that is, we can declare and assign a value to a class property without needing a constructor with this.prop = prop.

This was already quite common in TypeScript, but now it’s coming natively to JavaScript:

1
class Classe {
2
    /*
3
      ao invés de:
4
      constructor() { this.publicID = 42; }
5
    */
6
    publicID = 42; // public field
7

8
    /*
9
      ao invés de:
10
      static get staticPublicField() { return -1 }
11
    */
12
    static campoEstatico = -1;
13

14
    // propriedades privadas estáticas
15
    static #campoPrivadoEstatico = 'private';
16

17
    //métodos privados
18
    #privateMethod() {}
19

20
    // declarações estáticas com static declaration blocks
21
    static {
22
      // Executado quando a classe é criada
23
    }
24
}

Checking fields through class reflection#

This is a complicated use case, but when we tried to check a property of a class through a static initialization block, we would get an error saying the class was not initialized or that the property doesn’t exist, this has been fixed:

1
class C {
2
  #prop;
3

4
  #metodo() {}
5

6
  get #getter() {}
7

8
  static isC(obj) {
9
    // usando 'in'
10
    return #prop in obj && #metodo in obj && #getter in obj;
11
  }
12
}