Evita comprobar null o undefined en TypeScript usando Optional Chaining y Nullish Coalescing

TypeScript ofrece características muy útiles que hacen que el código sea más limpio, conciso y eficiente. Dos de ellas, el encadenamiento opcional (optional chaining) y la coalescencia nula (nullish coalescing), juegan un papel clave a la hora de manipular datos. En este artículo, quiero mostrarte cómo utilizarlas usando como ejemplo una aplicación de la NBA, para ver cómo simplifican nuestro código y facilitan el manejo de información. Empecemos revisando cómo navegar objetos de forma segura.

Optional Chaining: cómo navegar datos de jugadores de la NBA de forma segura

Imagina que estás trabajando en una aplicación de estadísticas de la NBA y necesitas acceder a la información de los jugadores. Sin embargo, no todos los jugadores tienen sus datos completos. Para asegurar un manejo de datos sin problemas, veamos el ejemplo de cómo acceder al nombre del equipo de un jugador utilizando encadenamiento opcional:

const player = getPlayer();

Aquí, la función getPlayer() obtiene los datos del jugador desde tu fuente de información. Para acceder al nombre del equipo del jugador, al inicio podrías escribir un código como este:

if (player !== undefined) {
  const team = player.team;
  if (team !== undefined) {
    const teamName = team.name;
  }
}

Este enfoque es cuidadoso, pero resulta bastante verboso. Por suerte, TypeScript nos ofrece una alternativa concisa con el encadenamiento opcional:

const teamName = player?.team?.name;

El uso del signo de interrogación después de cada propiedad asegura que solo se acceda a la siguiente si la propiedad padre existe. El encadenamiento opcional simplifica el código y te ahorra escribir múltiples sentencias if, lo que reduce drásticamente las posibilidades de toparte con errores por null o undefined.

Además de navegar propiedades de forma segura, en muchas ocasiones también necesitamos definir valores por defecto cuando un dato no está presente. Veamos cómo resolverlo.

Nullish Coalescing: cómo asignar valores por defecto en datos de la NBA

Nuestra aplicación de la NBA también puede encontrarse con escenarios donde falte cierta información de un jugador. Para manejar estos casos de forma limpia y asignar valores por defecto, enfoquémonos en acceder al número de camiseta (jersey number) de un jugador usando la coalescencia nula:

const jerseyNumber = player.jerseyNumber !== undefined ? player.jerseyNumber : 0;

Aquí comprobamos si la propiedad jerseyNumber existe en el objeto player. Si existe, usamos su valor; de lo contrario, asignamos un valor por defecto de 0. Sin embargo, esto se puede simplificar usando nullish coalescing:

const jerseyNumber = player.jerseyNumber ?? 0;

El doble signo de interrogación (??) comprueba si el valor del lado izquierdo es nulo o indefinido (null o undefined), y usa el valor del lado derecho como valor por defecto si es necesario. La coalescencia nula nos asegura tener siempre un número de camiseta válido, incluso si falta en los datos del jugador.

Conclusión

El encadenamiento opcional (optional chaining) y la coalescencia nula (nullish coalescing) son herramientas muy prácticas en TypeScript que mejoran notablemente el manejo de datos en proyectos de este tipo. Al navegar datos de forma segura con ?. y proporcionar valores por defecto con ??, puedes simplificar tu código con facilidad, reducir errores y crear aplicaciones en TypeScript mucho más robustas.

¡Happy coding!