¿Qué hay de nuevo en Javascript 2022?
Published: 2022-01-09 14:59:31

---
canonical_url: https://matiashernandez.dev/blog/post/que-hay-de-nuevo-en-javascript-2022
cover_image: https://res.cloudinary.com/matiasfha/image/upload/v1640794416/es2022_ti2ph6.png
keywords:
- ECMAScript
- Javascript
- ES2022 
- Features 
title: ¿Qué hay de nuevo en Javascript 2022?
description: Javascript es un lenguaje que no para de crecer y evolucionar, y este 2022 viene cargado de nuevas características.
---

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.

```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`.

```
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](https://v8.dev/features/top-level-await)): 

### 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](https://babeljs.io/)

Revisa este artículo en [Freecodecamp en Español](https://www.freecodecamp.org/espanol/news/que-es-babel/)