Optional Chaining en JavaScript

El optional chaining en JavaScript es una característica de la versión ES2020 del lenguaje que permite acceder a propiedades de un objeto de manera segura, evitando errores TypeError por propiedades undefined o null.

Optional chaining en JavaScript

El optional chaining en JavaScript es una característica de la versión ES2020 del lenguaje que permite acceder a propiedades de un objeto de manera segura, evitando errores TypeError por propiedades undefined o null.

La sintaxis de optional chaining se hace usando el operador ?.. Por ejemplo, si tenemos un objeto person con una propiedad address, podemos acceder a la propiedad zipCode de la siguiente manera:

const person = {
  name: 'John Doe',
  address: {
    street: '1234 Main St',
    zipCode: '12345'
  }
};

const zipCode = person?.address?.zipCode;
console.log(zipCode); // 12345

Si el objeto person es undefined o null, o si la propiedad address es undefined o null, el valor devuelto será undefined sin causar un error. De esta manera, podemos acceder a propiedades anidadas de un objeto de manera segura sin preocuparnos por errores.

Optional Chaining y Pokémon

Aquí hay un ejemplo de un ejercicio utilizando optional chaining con información sobre Pokémon:

const pokemon = {
  name: "Pikachu",
  abilities: [
    {
      name: "Lightning Rod",
      type: "Electric"
    },
    {
      name: "Static",
      type: "Electric"
    }
  ],
  stats: [
    {
      name: "Attack",
      value: 55
    },
    {
      name: "Defense",
      value: 40
    }
  ],
  forms: [
    {
      name: "Alola",
      type: "Electric"
    }
  ]
};

const ability = pokemon?.abilities?.[0]?.name;
const stat = pokemon?.stats?.find(stat => stat.name === "Defense")?.value;
const form = pokemon?.forms?.find(form => form.name === "Alola")?.type;

console.log(`Ability: ${ability}`); // "Lightning Rod"
console.log(`Defense stat: ${stat}`); // 40
console.log(`Alola form type: ${form}`); // "Electric"

En este ejemplo,

se utiliza optional chaining para acceder a las propiedades de un objeto pokemon. Al usar optional chaining, se evita la necesidad de comprobar manualmente si cada propiedad existe antes de acceder a ella. Esto hace que el código sea más legible y seguro, y previene errores de runtime si una propiedad es undefined.

¿Es mejor usar Dot Notation u Optional Chaining?

Depende de las necesidades y preferencias de cada desarrollador.

La notación de punto (dot notation) es una forma clásica y comúnmente utilizada de acceder a las propiedades de un objeto en JavaScript. Es simple, legible y fácil de entender para la mayoría de los desarrolladores. Además, es compatible con versiones antiguas de JavaScript y es muy confiable.

Por otro lado, el optional chaining es una característica más nueva en JavaScript que permite acceder a las propiedades de un objeto de una manera segura sin causar un error si una propiedad no existe o es undefined. Esto puede ser útil en casos en los que no se está seguro de si una propiedad existe o no, y puede mejorar la legibilidad del código.

En resumen, ambas opciones son válidas y tienen sus ventajas e inconvenientes. La elección depende de las necesidades específicas de cada proyecto y del equipo de desarrollo. En general, se recomienda usar la notación de punto para acceder a propiedades simples y conocidas, y usar optional chaining para acceder a propiedades con un estado incierto o que pueden ser undefined.

Aquí hay un ejemplo de un caso de uso en el que la notación de punto es mejor que el optional chaining:

const pokemon = {
  name: "Pikachu",
  abilities: [
    {
      name: "Lightning Rod",
      type: "Electric"
    },
    {
      name: "Static",
      type: "Electric"
    }
  ],
  stats: [
    {
      name: "Attack",
      value: 55
    },
    {
      name: "Defense",
      value: 40
    }
  ],
  forms: [
    {
      name: "Alola",
      type: "Electric"
    }
  ]
};

const ability = pokemon.abilities[0].name;
const stat = pokemon.stats.find(stat => stat.name === "Defense").value;
const form = pokemon.forms.find(form => form.name === "Alola").type;

console.log(`Ability: ${ability}`); // "Lightning Rod"
console.log(`Defense stat: ${stat}`); // 40
console.log(`Alola form type: ${form}`); // "Electric"

En este ejemplo, se está accediendo a las propiedades de un objeto pokemon que se conoce previamente que existen y no son undefined. Por lo tanto, es más conveniente y legible usar la notación de punto para acceder a estas propiedades. La notación de punto es más sencilla y se ve más clara, y no requiere el uso de la sintaxis adicional de optional chaining.

Si se usara optional chaining en el ejemplo anterior, tendríamos que agregar la sintaxis de optional chaining a cada acceso a una propiedad. Esto aumentaría la complejidad del código y lo haría menos legible. Además, no tendría ninguna ventaja en términos de prevención de errores, ya que todas las propiedades accedidas son conocidas y se espera que existan.

El código con optional chaining tendría la siguiente apariencia:

const ability = pokemon?.abilities?.[0]?.name;
const stat = pokemon?.stats?.find(stat => stat.name === "Defense")?.value;
const form = pokemon?.forms?.find(form => form.name === "Alola")?.type;

console.log(`Ability: ${ability}`); // "Lightning Rod"
console.log(`Defense stat: ${stat}`); // 40
console.log(`Alola form type: ${form}`); // "Electric"

En este caso, el uso de optional chaining no aporta ningún valor, y sólo hace que el código sea más complicado y menos legible. Por lo tanto, es mejor usar la notación de punto en este caso.