¿Qué hay de nuevo en Javascript 2022?

JS está lejos de dejar la innovación y el crecimiento y cada año el estándar ECMAScript se fortalece con nuevas adiciones que esperamos pronto ver en todos los navegadores. ¿Pero que nos trae este 2022 para el mundo Javascript?

Instancias de clase publicas y privadas.

Ahora será nativamente posible definir atributos de la clase directamente en el cuerpo de la clase.

También es posible marcar estos atributos como privados usando # como prefijo.

Usando la misma sintaxis, también será posible marcar métodos y accessors como privados creando un mejor sistema de encapsulamiento.

sponsor

El contenido de este sitio es y será siempre gratuito para todos. Ayudame a mantenerlo así convirtiendote en auspiciador.

Tu producto o servicio podría estar aquí

js
					
						 
class Button {
    //Por defecto todos los atributos son públicos
    color = "red"

    // Los atributos privados comienzan con un `#`
    // solo pueden ser cambiados y accesados desde la propia clase
    #disabled = false
}
const button = new Button();
// Atributos puiblicos son acessibles en todo momento.
button.color = "blue"

// Esto lanza un error de Sintaxis 
console.log(button.#disabled)
					
				

Siguiendo con las clases, ahora será posible definir atributos y métodos estáticos. Para esto una nueva sintaxis será utilizada static. Estos métodos y atributos estáticos también podrán ser privados.

js
					
						 
class Square {
    static #side = 100

    static #getPerimeter() {
        return 4* #side;
    }

    static calculateProperties() {
        return {
            perimeter: #getPerimeter(),
            side: #side,
            area: #side^2
        }
    }
}

// Método estático público
Square.calculateProperties();

// Métodos estáticos privados: Sintax Error
Square.#side 

Square.#getPerimeter()

					
				

Podrás revisar si cierto método o propiedad privada de una clase existe en la instancia de clase utilzando la nueva palabra clave in.

js
					
						
class PrivateClass {
    constructor() {
        super();

    }
    #someCoolVariable
    #theMethod() {}

    get #getter () {}
    set #setter(text) {
        this.#someCoolVariable = text
    }

    static isPrivate(obj) {
        return {
            #someCoolVariable in obj && #theMethod in obj && #getter in obj && #setter in obj
        }
    }
}
					
				

Top Level Await*

Hoy solo se puede usar await en el scope de una función. Ahora se podrá hacer directamente en el módulo. Algunos casos de uso (ejemplos basados en el articulo de v8.dev):

Dynamic dependency pathing:

Permite utilizar valores en tiempo de ejecución para determinar dependencies.

Dependency Fallbacks:

Resource Initialization: Permite definir recursos y producir errores evitando que el módulo sea utilizado.

js
					
						 
// Dynamic dependency pathing:
const strings = await import(`/i18n/${navigator.language}`)

// Dependency Fallbacks 
let jQuery;
try{
    jQuery = await import('https://cdn-a.example.com/jQuery')
}catch {
    jQuery = await import('https://cdn-b.example.com/jQuery')
}

// Resource initialization 
const connection = await dbConnector();
					
				

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

También tendremos un nuevo método en nuestros queridos arreglos: at.

Permitirá obtener un elemento desde un indice determinado. Igual que al usar [] pero permitirá el uso de indices negativos.

js
					
const array = [0,1,2,3,4,5]

array[array.length - 1]) //5
array.at(-1) //5 

array[array-length - 2] //4
array.at(-2) // 4

Object.hasOwn

Nuevo método Object.hasOwn, que provee una nueva forma (segura y siempre accesible) de revisar si un objeto tiene ciertas propiedades.

js
					
const obj = { foo: 'bar' }
let hasFoo = Object.hasOwn(obj, 'foo');
console.log(hasFoo) // true

Como ves, javascript sigue avanzando, ahora solo queda esperar que los navegadores agreguen prontamente el soporte, pero mientras tanto, puedes hacer uso de los nuevos features gracias a herramientas como Babel

Revisa este artículo en Freecodecamp en Español

😃 Thanks for reading!

Did you like the content? Found more content like this by joining to the Newsletter or following me on Twitter

⚙️ Edit this on github