Ecmascript 2022

En este video quisiera mostrarles las caracteristicas nuevas que hay en Javascript en este año 2022.

Top Level Await

Antes solo se podia usar un await dentro del alcance de una async function, es por esto que si queriamos importar un modulo de forma asincrona teniamos que hacerlo de esta manera:

Antes:

import('./math.js').then(math => {
  console.log(math.sum(1, 2));
})

Pero actualmente, se puede hacer de este modo:

Despues:

// Top level await
const math = await import("./math.js")
console.log(math.sum(10, 20))

De hecho tambien puedes usarlo con la api fetch nativa de Nodejs, que tampoco es necesaria instalarla en Nodejs:

const response = await fetch('https://jsonplaceholder.typicode.com/users')
const data = await response.json()
console.log(data)

Tambien puedes manejar el error:

try {
  throw new Error("My Error!!!");
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error(error);
}

o tambien podras usarlo para inicializar un recurso:

try {
  const db = await mongoose.connect("mongodb://localhost/mydb");
  console.log(db.connection.name);
} catch (error) {
  console.error(error);
}

Esto nos evitara que tener que usar una funcion inmediatamente invocada: https://v8.dev/features/top-level-await

El cambio más importante con el top level await es que se modifica el orden de ejecución de los módulos. Hasta ahora el orden de ejecucuón (post-order) ha sido siempore sincrono y determinista. Con el nuevo top-level await esto cambia.

La ejecución del modulo es diferida hasta que la promesa es resuelta. La ejecución del módulo padre también es pospuesta hasta que todos los hijos que usan await estén resueltos.

Array at

este metodo permite obtener un elemento en un indice determinado, al igual que usar []:

const x = [10, 33, 44, 55, 66, 77, 88, 99];

console.log(x[0])
console.log(x.at(0))


console.log(x.at(-1))
console.log(x.at(-2))
console.log(x.at(-4))

Object has Own

Permite revisar si un elemento tiene unas nuevas propiedades:

const x = [10, 33, 44, 55, 66, 77, 88, 99];

console.log(x[0])
console.log(x.at(0))


console.log(x.at(-1))
console.log(x.at(-2))
console.log(x.at(-4))

Clases

Las clases ahora tienen los siguientes nuevas caracteristicas

Instacias de Clases publicas y privadas

Ahora es posible definir atributos directamente dentro de la cuerpo de la clase.

class User {
  name
  surname
}

console.log(new User())

las propiedades siguen siendo publicas por defecto

propiedades privadas

Tambien puedes crear propiedades privadas #salt

class User {
  name
  surname
  #salt
}

Estos solo pueden ser cambiados y accedidos desde la propia clase.

class User {
  name
  surname
  password = 'mypassword'
  #salt = '123'

  encryptPassword() {
    return this.password + this.#salt
  }

}

console.log(new User().encryptPassword())

esto lanza un error:

console.log(new User().#salt)

private methods

class Test {

  #addTestRunner(testRunner){
    this.testRunner = testRunner
  }
}

const test = new Test();
test.addTestRunner({name: 'test'});

private getters and setters

Private accessors (getters and setters) Previously when was needed to declare a getter or setter can be accessed by means of the instance created, with ES2022 was added as a new feature the private accessors.

class Test {

  get #name(){
    return 'test-name';
  }
}

const test = new Test();
test.name

// Output: undefined

Finalmente en mi caso he probado estas caracteristicas usando Nodejs v18, pero tambien puedes usarlas en versiones anteriores si usas Babel.

Estas son algunas fechas exactas acerca desde cuando estuvieron disponibles estas caracteristicas:

• Top-level await: Available since 2021 in browsers, 2020 in Node.

• Private instance fields, methods, and accessors: Available since 2019 in browsers and Node.

• Static class fields and methods: Available since 2016 in browsers and Node.

• Static class initialization blocks: Available since 2021 in browsers and Nod e.

• Error: .cause: Available since 2021 in browsers and Node.

• Array, String, and TypedArray: .at() Method: Available since 2021 in browsers and Node.

• Object: .hasOwn(): Available since 2021 in browsers and Node.

• RegExp: match .indices ('d' flag): Available since 2021 in browsers and Node.

• You can check the dates by looking at the compatibility table in MDN for each feature (for hasIndices it says Node doesn't support that, but it was added on Node 16, so the article is just outdated).

• https://dev.to/brayanarrieta/new-javascript-features-ecmascript-2022-with-examples-4nhg