2 nuevos features de JavaScript que deberías conocer si lo usas todos los días — ECMAScript 2020 (ES11)

¿Alguna vez tuviste que usar decenas de operadores ternarios y/o ampersands para acceder a propiedades anidadas dentro de estructuras de datos con múltiples niveles de profundidad debido a que estas podrían o no estar presentes? Si ese es el caso te gustará saber que esos días podrían estar llegando a su fin.

Cada año cientos de features son revisados por el comité evaluador TC39 y pasan por múltiples etapas con el fin de ser considerados en la especificación anual de ECMAScript. ES2020 es la version correspondiente al release del año 2020.

A continuación hablaremos acerca de los nuevos features que se encuentran en el Stage 4 (etapa final) que serán próximamente incluidos en las últimas versiones de nuestros navegadores y que prometen hacer nuestro código más claro y sencillo.

1. Optional Chaining Operator (?.) ⛓️

Probablemente uno de los features mas útiles y populares de ES2020 debido a que nos permitirá intentar acceder a propiedades de un objeto y retornar undefined si es que dicha propiedad no se encuentra disponible, sin generar un error improcesable y detener la ejecución de nuestro programa.

Digamos que tenemos el siguiente objeto:

const person = {
  address: {
   street: '',
  }
}

Si intentamos imprimir console.log(person.address.city) esto retornará undefined ya que no existe una propiedad city en person. Ahora, si quitamos la propiedad address y hacemos lo mismo:

const person = {}
console.log(person.address.city) //Error: Cannot read property 'city' of undefined

Ahora, saltará un error que dice “Error: Cannot read property name of undefined”. Esto sucede cuando existen dos niveles de undefined. El primero fue ocasionado por la inexistencia de la propiedad address en person y el segundo por la falta de city en address.

Previamente chequeábamos la presencia de propiedades de la siguiente manera:

console.log(person && person.address && person.address.city);

Aqui verificamos que la propiedad address exista antes de loggear city para evitar generar un error.

Sin embargo, ahora podemos hacer esto mucho más fácilmente. Intentemos acceder a city de nuevo utilizando el optional chaining operator (?.) :

console.log(person?.address?.city)

Esto retornará undefined si es que la propiedad address o city no está presente en el objeto, evitando una repetición innecesaria en nuestro código, lo cual es especialmente beneficioso cuando tenemos que lidiar con estructuras de datos anidadas.

//old
console.log(user && user.profile && user.profile.name)
//new & dry
console.log(user?.profile?.name)

2. Nullish Coalescing Operator (??) ❓❓

El nullish coalescing operator retorna el operando derecho cuando el operando izquierdo es igual a null o undefined , de otra forma solo retorna el operando izquierdo.

Veamos el siguiente ejemplo:

const person = { 
  first_name: 'Sergio',
  last_name: ''
}
const name = person.first_name || 'Jorge'; // Sergio

Si person.first_name fuera falsy el valor de nuestra variable name sería Jorge, el problema es que una variable con una string vacía o asignada al número 0 también sería considerada falsa en este caso. Entonces, para solucionar esto usualmente lo escribiríamos de la siguiente manera:

const person = (person.first_name && person.first_name !== '') ? person.first_name : 'Sergio';

Sabemos lo tedioso que puede ser escribir esto todo el tiempo. Este nuevo feature the permite asignar un fallback value solo para null y undefined .

const person = { 
  first_name: 'Sergio', 
  last_name: '',
  age: 0
}
const first_name = person.first_name || 'Jorge'; // Sergio
const last_name = person.last_name ?? 'Nouvel'; // ''
const age = person.age ?? 99; //0

Usándolos juntos

Pongamos en práctica lo que aprendimos hasta el momento.
Digamos que tenemos el siguiente objeto que representa la edad y el nombre de una persona.

const person = {
  age: 22,
  name: 'Camila',
  height: 1.60
};

Intentemos acceder a una propiedad inexistente comoaddress.zipcode utilizando métodos comunes:

person.address.zipcode // Error: Cannot read property 'zipcode' of undefined

Como vimos previamente, esto ocasionará un error y detendrá nuestro programa. Ahora intentemos aplicando el optional chaining operator (?.):

person?.address?.zipcode // undefined

Esto permitirá que nuestro programa siga ejecutándose y resolverá undefined como valor de la expresión. Para prevenir tener un valor undefined rondando por nuestra aplicación, utilizaremos los dos operadores juntos de la siguiente forma:

person?.address?.zipcode ?? 07001  //07001

Como podemos observar el resultado de ejecutar la expresión anterior es 07001 ya que el nullish coalescing operator (??) retorna el operando del lado derecho cuando el operando del lado izquierdo es undefined o null.

Conclusión

Hay muchísimas otras propuestas que se encuentran en fase 3 que muy probablemente veamos en la version ES11 o ES12. Tal vez no las necesitamos todas pero de seguro algunas de ellas harán nuestro código elegante y nuestras vidas más sencillas.

Si deseas conocer las propuestas siendo evaluadas actualmente te invito a que te dirijas al repositorio del TC39.

Referencias

• Nullish Coalescing for JavaScript
• Optional Chaining