English version: https://medium.com/@ger86/javascript-the-optional-chaining-operator-52df1cb361d7

Una de las características que trae la especificación ECMAScript 2020 es un nuevo operador: el optional chaining, presente en otros lenguajes como Swift y que llega a Javascript para hacernos más sencillo trabajar con objetos cuyas claves no estamos seguros de que existan.

De cara a resumir las características de este nuevo operador he preparado este artículo que espero que os sirva porque se trata de una característica muy útil en cuanto nos acostumbramos a usarla.

¡Vamos allá!

Motivación del “optional chaining operator”

La razón de ser este operador como comentaba al comienzo del artículo es permitirnos trabajar con objetos de varias dimensiones sin preocuparnos de si por el camino llegamos a una propiedad que no esté definida.

Por ejemplo, suponed que tenemos el siguiente objeto:

const person = {
  name: 'Gerardo', 
  email: 'mail@mail.com'
}

Si tratamos de hacer lo siguiente:

const jobTitle = person.currentJob.title

el intérprete de Javascript nos arrojará un error al tratar de acceder a una propiedad ( currentJob ) cuyo valor es undefined .

Gracias al operador optional chaining podemos prevenir este error del siguiente modo:

const jobTitle = person?.currentJob?.title

De modo que, si o bien person o bien su propiedad currentJob son undefined , el valor que obtendrá la variable jobTitle será undefined .

Esto también aplica si la propiedad a la que vamos a acceder es null

const person = {
  name: 'Gerardo', 
  email: 'mail@mail.com', 
  currentJob: null;
}const jobTitle = person?.currentJob?.title // undefined

Usos del “optional chaining operator”

Para acceder a propiedades de objetos

Este nuevo operador lo podemos emplear para acceder a las propiedades de los objetos bien usando “dot notation”, bien tratando las propiedades como si fueran claves de un array:

const jobTitle = person?.['currentJob']?.['title']

Para acceder a posiciones de arrays

También podemos emplear el operador para acceder a posiciones de arrays sin preocuparnos de si están definidas o son null :

const people = [
  {
    id: 1,
    name: 'Foo'
  }
];

Si queremos acceder al nombre de la persona situada en segunda posición sin preocuparnos de si existe o no:

const person = people[1]?.name;

Para invocar funciones

Además, también podemos emplearlo cuando vayamos a invocar funciones sin necesidad de comprobar previamente que se encuentran definidas:

const foo = function(callback) {
  callback?.('bar');
}

Combinado con el “nullish coalescing operator”

Una de las características que más versatilidad nos pueden dar es combinar este operador con el también reciente “nullish coalescing” de modo que podamos escribir expresiones como las siguientes:

const jobTitle = person?.currentJob?.title ?? 'New Job';

Conclusiones

La aparición de estos nuevos operadores o, como he escuchado en el podcast de midudev, “azucarillos sintácticos”, muestran el grado de madurez que poco a poco está alcanzando Javascript. Si ECMA Script supuso una verdadera revolución en la forma en que trabajábamos con Javascript, las posteriores especificaciones están haciendo que cada vez sea más cómo trabajar con este lenguaje.

Por tanto, no perdáis de vista las novedades que van saliendo regularmente porque muchas de ellas pasarán a formar parte de nuestro día a día como en su momento hizo el famoso “spread operator”.

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇