JavaScript continua a evoluir e, com a introdução do ES13 (ECMAScript 2022), há vários novos recursos que os desenvolvedores devem conhecer para escrever código mais eficiente e moderno. Neste artigo, vamos nos aprofundar em dez dos recursos mais impactantes do ES13 que podem melhorar seu fluxo de trabalho de desenvolvimento.

1. Espera de nível superior

Antes do ES13:

Anteriormente, você só podia usar await dentro de funções assíncronas. Isso significava que se você precisasse usar await, teria que agrupar seu código dentro de uma função assíncrona, mesmo que o resto do seu módulo não exigisse isso.

Exemplo:

// Without top-level await (Before ES13)
async function fetchData() {
  const data = await fetch('/api/data');
  return data.json();
}
fetchData().then(console.log);

Recurso ES13:

Com ES13, agora você pode usar await no nível superior do seu módulo, eliminando a necessidade de uma função de wrapper assíncrona adicional.

// With top-level await (ES13)
const data = await fetch('/api/data');
console.log(await data.json());

2. Métodos e acessadores de instância privada

Antes do ES13:

Antes do ES13, as classes JavaScript não tinham campos ou métodos privados verdadeiros. Os desenvolvedores costumavam usar convenções de nomenclatura como sublinhados ou fechamentos para simular privacidade, mas esses métodos não eram verdadeiramente privados.

Exemplo:

// Simulating private fields (Before ES13)
class Person {
  constructor(name) {
    this._name = name; // Conventionally "private"
  }

  _getName() {
    return this._name;
  }

  greet() {
    return `Hello, ${this._getName()}!`;
  }
}

const john = new Person('John');
console.log(john._getName()); // Accessible, but intended to be private

Recurso ES13:

ES13 introduz métodos e acessadores de instância privada verdadeiros usando o prefixo #, garantindo que eles não possam ser acessados ​​fora da classe.

// Private instance methods and fields (ES13)
class Person {
  #name = '';

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

  #getName() {
    return this.#name;
  }

  greet() {
    return `Hello, ${this.#getName()}!`;
  }
}

const john = new Person('John');
console.log(john.greet()); // Hello, John!
console.log(john.#getName()); // Error: Private field '#getName' must be declared in an enclosing class

3. Campos e métodos de classe estática

Antes do ES13:

Antes do ES13, campos e métodos estáticos eram normalmente definidos fora do corpo da classe, levando a um código menos coeso.

Exemplo:

// Static fields outside class body (Before ES13)
class MathUtilities {}

MathUtilities.PI = 3.14159;

MathUtilities.calculateCircumference = function(radius) {
  return 2 * MathUtilities.PI * radius;
};

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

Recurso ES13:

ES13 permite definir campos e métodos estáticos diretamente no corpo da classe, melhorando a legibilidade e a organização.

// Static fields and methods inside class body (ES13)
class MathUtilities {
  static PI = 3.14159;

  static calculateCircumference(radius) {
    return 2 * MathUtilities.PI * radius;
  }
}

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

4. Operadores de Atribuição Lógica

Antes do ES13:

Operadores lógicos (&&, ||, ??) e atribuição eram frequentemente combinados manualmente em instruções detalhadas, levando a códigos mais complexos.

Exemplo:

// Manually combining logical operators and assignment (Before ES13)
let a = 1;
let b = 0;

a = a && 2;  // a = 2
b = b || 3;  // b = 3
let c = null;
c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

Recurso ES13:

ES13 introduz operadores de atribuição lógica, que combinam operações lógicas com atribuição em uma sintaxe concisa.

// Logical assignment operators (ES13)
let a = 1;
let b = 0;

a &&= 2;  // a = a && 2; // a = 2
b ||= 3;  // b = b || 3; // b = 3
let c = null;
c ??= 4; // c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

5. WeakRefs e Registro de Finalização

Antes do ES13:

Referências e finalizadores fracos não eram suportados nativamente em JavaScript, dificultando o gerenciamento de recursos em certos casos, especialmente com aplicativos de grande escala que lidam com objetos caros.

Exemplo:

// No native support for weak references (Before ES13)
// Developers often had to rely on complex workarounds or external libraries.

Recurso ES13:

ES13 apresenta WeakRef e FinalizationRegistry, fornecendo suporte nativo para referências fracas e tarefas de limpeza após a coleta de lixo.

// WeakRefs and FinalizationRegistry (ES13)
let obj = { name: 'John' };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()?.name); // 'John'

obj = null; // obj is eligible for garbage collection

setTimeout(() => {
  console.log(weakRef.deref()?.name); // undefined (if garbage collected)
}, 1000);

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Cleanup: ${heldValue}`);
});

registry.register(obj, 'Object finalized');

6. Verificações ergonômicas de marca para campos privados

Antes do ES13:

Verificar se um objeto tinha um campo privado não era simples, pois os campos privados não eram suportados nativamente. Os desenvolvedores tiveram que confiar em métodos alternativos, como verificação de propriedades públicas ou uso de verificações de instância.

Exemplo:

// Checking for private fields using workarounds (Before ES13)
class Car {
  constructor() {
    this.engineStarted = false; // Public field
  }

  startEngine() {
    this.engineStarted = true;
  }

  static isCar(obj) {
    return obj instanceof Car; // Not reliable for truly private fields
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

Recurso ES13:

Com ES13, agora você pode verificar diretamente se um objeto possui um campo privado usando a sintaxe #, tornando-o mais fácil e confiável.

// Ergonomic brand checks for private fields (ES13)
class Car {
  #engineStarted = false;

  startEngine() {
    this.#engineStarted = true;
  }

  static isCar(obj) {
    return #engineStarted in obj;
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

7. Array.prototype.at()

Antes do ES13:

O acesso a elementos de matrizes envolvia o uso de notação de colchetes com um índice e, para índices negativos, era necessário calcular manualmente a posição.

Exemplo:

// Accessing array elements (Before ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr[arr.length - 1]); // 5 (last element)

Recurso ES13:

O método at() permite acessar elementos do array usando índices positivos e negativos de forma mais intuitiva.

// Accessing array elements with `at()` (ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(-1)); // 5 (last element)
console.log(arr.at(0)); // 1 (first element)

8. Object.hasOwn()

Antes do ES13:

Para verificar se um objeto tinha sua própria propriedade (não herdada), os desenvolvedores normalmente usavam Object.prototype.hasOwnProperty.call() ou obj.hasOwnProperty().

Exemplo:

// Checking own properties (Before ES13)
const obj = { a: 1 };
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true
console.log(obj.hasOwnProperty('a')); // true

Recurso ES13:

O novo método Object.hasOwn() simplifica essa verificação, fornecendo uma sintaxe mais concisa e legível.

// Checking own properties with `Object.hasOwn()` (ES13)
const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // true

9. Object.fromEntries()

Antes do ES13:

A transformação de pares de valores-chave (por exemplo, de mapa ou matrizes) em um objeto exigia looping e construção manual.

Exemplo:

// Creating an object from entries (Before ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = {};
entries.forEach(([key, value]) => {
  obj[key] = value;
});
console.log(obj); // { name: 'John', age: 30 }

Recurso ES13:

Object.fromEntries() simplifica a criação de objetos a partir de pares de valores-chave.

// Creating an object with `Object.fromEntries()` (ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30 }

10. Global Isto em Módulos

Antes do ES13:

O valor disto no nível superior de um módulo era indefinido, causando confusão ao portar código de scripts para módulos.

Exemplo:

// Global `this` (Before ES13)
console.log(this); // undefined in modules, global object in scripts

Recurso ES13:

ES13 esclarece que o valor this no nível superior de um módulo é sempre indefinido, fornecendo consistência entre módulos e scripts.

// Global `this` in modules (ES13)
console.log(this); // undefined

Esses recursos do ES13 foram projetados para tornar seu código JavaScript mais eficiente, legível e de fácil manutenção. Ao integrá-los às suas práticas de desenvolvimento, você pode aproveitar os avanços mais recentes na linguagem para criar aplicativos modernos e de alto desempenho.