JavaScript continúa evolucionando y con la introducción de ES13 (ECMAScript 2022), hay varias características nuevas que los desarrolladores deben conocer para escribir código más eficiente y moderno. En este artículo, profundizaremos en diez de las características más impactantes de ES13 que pueden mejorar su flujo de trabajo de desarrollo.

1. Espera de nivel superior

Antes de ES13:

Anteriormente, solo podías usar await dentro de funciones asíncronas. Esto significaba que si necesitabas usar await, tenías que incluir tu código dentro de una función asíncrona, incluso si el resto de tu módulo no lo requería.

Ejemplo:

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

Característica ES13:

Con ES13, ahora puedes usar await en el nivel superior de tu módulo, eliminando la necesidad de una función contenedora asíncrona adicional.

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

2. Métodos y accesores de instancias privadas

Antes de ES13:

Antes de ES13, las clases de JavaScript no tenían campos o métodos privados verdaderos. Los desarrolladores solían utilizar convenciones de nomenclatura como guiones bajos o cierres para simular la privacidad, pero estos métodos no eran realmente privados.

Ejemplo:

// 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

Característica ES13:

ES13 introduce verdaderos métodos de instancia privada y descriptores de acceso que utilizan el prefijo #, lo que garantiza que no se pueda acceder a ellos fuera de la clase.

// 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 y métodos de clases estáticas

Antes de ES13:

Antes de ES13, los campos y métodos estáticos normalmente se definían fuera del cuerpo de la clase, lo que generaba un código menos cohesivo.

Ejemplo:

// 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

Característica ES13:

ES13 te permite definir campos y métodos estáticos directamente dentro del cuerpo de la clase, mejorando la legibilidad y la organización.

// 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 asignación lógica

Antes de ES13:

Los operadores lógicos (&&, ||, ??) y la asignación a menudo se combinaban manualmente en declaraciones detalladas, lo que generaba un código más complejo.

Ejemplo:

// 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

Característica ES13:

ES13 introduce operadores de asignación lógica, que combinan operaciones lógicas con asignación en una sintaxis 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. Referencias débiles y registro de finalización

Antes de ES13:

Las referencias y finalizadores débiles no eran compatibles de forma nativa con JavaScript, lo que dificulta la administración de recursos en ciertos casos, especialmente con aplicaciones a gran escala que manejan objetos costosos.

Ejemplo:

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

Característica ES13:

ES13 presenta WeakRef y FinalizationRegistry, que brindan soporte nativo para referencias débiles y tareas de limpieza después de la recolección de basura.

// 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. Controles de marca ergonómicos para campos privados

Antes de ES13:

Verificar si un objeto tenía un campo privado no era sencillo, ya que los campos privados no eran compatibles de forma nativa. Los desarrolladores tuvieron que recurrir a métodos alternativos, como comprobar propiedades públicas o utilizar comprobaciones de instancias.

Ejemplo:

// 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

Característica ES13:

Con ES13, ahora puedes verificar directamente si un objeto tiene un campo privado usando la sintaxis #, lo que lo hace más fácil y confiable.

// 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 de ES13:

El acceso a elementos de matrices implicaba el uso de notación entre corchetes con un índice, y para índices negativos, había que calcular manualmente la posición.

Ejemplo:

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

Característica ES13:

El método at() le permite acceder a elementos de una matriz utilizando índices positivos y negativos de forma más 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. Objeto.hasOwn()

Antes de ES13:

Para comprobar si un objeto tenía su propia propiedad (no heredada), los desarrolladores normalmente usaban Object.prototype.hasOwnProperty.call() u obj.hasOwnProperty().

Ejemplo:

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

Característica ES13:

El nuevo método Object.hasOwn() simplifica esta verificación, proporcionando una sintaxis más concisa y legible.

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

9. Objeto.deEntries()

Antes de ES13:

La transformación de pares clave-valor (por ejemplo, de un mapa o matrices) en un objeto requería bucles y construcción manual.

Ejemplo:

// 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 }

Característica ES13:

Object.fromEntries() simplifica la creación de objetos a partir de pares clave-valor.

// 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. Esto global en módulos

Antes de ES13:

El valor de esto en el nivel superior de un módulo no estaba definido, lo que generaba confusión al transferir el código de los scripts a los módulos.

Ejemplo:

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

Característica ES13:

ES13 aclara que el valor de this en el nivel superior de un módulo siempre está indefinido, proporcionando coherencia entre módulos y scripts.

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

Estas características de ES13 están diseñadas para hacer que su código JavaScript sea más eficiente, legible y fácil de mantener. Al integrarlos en sus prácticas de desarrollo, puede aprovechar los últimos avances en el lenguaje para crear aplicaciones modernas y de alto rendimiento.