Optional chaining y nullish coalescing en JS2020

Comprenderás de una vez qué son el operador optional chaining y el nullish coalescing

Es probable que hayas visto en el código de JavaScript o TypeScript de alguien el operador ?. llamado optional chaining o el operador ?? llamado nullish coalescing.

Estos operadores fueron añadidos en el ES2020.

Optional chaining

Este operador nos permite obtener valores anidados en un objeto sin la necesidad de ir evaluando si existe su padre. Imagina que tienes un listado de productos con sus características y quieres obtener el número de teléfono del proveedor. Para hacerlo correctamente:

1. Tendrías que ver si existe el producto
2. Si existe el producto ver si existe su proveedor
3. Si existe su proveedor, ver si existe datos de contacto
4. Si existen datos de contacto ver finalmente si existe su teléfono

El objeto producto tendría la siguiente estructura:

{
  nombre: string,
  precio: number,
  stock: number,
  proveedor: {
    nombre: string,
    contacto: {
      email: string,
      telefono: number
    }
  }
}
  

Para obtener el teléfono tendríamos que usar un código así:

  const telefonoProveedor=()=>{
    if(producto){
      if(proveedor){
        if(contacto){
          if(telefono) return telefono
        }
      }
    }
    return null;
  }  
  

Pero gracias al operador optional chaining el código quedaría:

const telefonoProveedor = producto?.proveedor?.contacto?.telefono;

El optional chaining deja de evaluar la expresion si alguna propiedad a evaluar en null o undefined

Nullish coalescing

El operador nullish coalescing ?? devolverá la expresión del lado derecho del operador cuando la expresión del lado izquierdo es null o undefined. En caso contrario, devuelve la expresión del lado izquierdo.

Imagina que añades una nueva propiedad al producto que es su venta por Internet, de forma que los productos viejos no tendrás esta propiedad y los nuevos tendrán esta propiedad a true o a false. Podrías evaluar si el producto está habilitado para la venta por Internet así:

const ventaInternet:boolean = producto.ventaInternet ?? false

El código anterior sustituiría a:

  let ventaInternet:boolean=false;
  if(producto.ventaInternet){
    ventaInternet = producto.ventaInternet;
  }else{
    ventaInternet = false; //en realidad esto no haría falta porque ya le he asignado un valor de false al crear la variable al principio, pero así queda más didáctico
  }
  

Hasta luego 🖖