Paracetamol.js💊| #182: Explica este código JavaScript

Explica este código JavaScript

Dificultad: Básico

const persons = [
  {
    surname: 'Zoe',
    address: {
      street: {
        name: 'Sesame Street',
        number: '123',
      },
    },
  },
  {
    surname: 'Mariner',
  },
  {
    surname: 'Carmen',
    address: {
    },
  },
];

const f = (arr) => {
  return arr.map((person) => {
    return person?.address?.street?.name
  })
}

console.log(f(persons)) //?

A. ['Sesame Street', null, null]
B. ['Sesame Street', undefined , undefined]
C. [undefined, undefined, undefined]
D. ['Sesame Street']

Respuesta en el primer comentario.

---

Comments

[Cristian Fernando]

Respuesta:
B. ['Sesame Street', undefined , undefined]

Muchas veces encontraremos que los arreglos de objetos no tienen todas la propiedades, es muy común esto y al momento de accederlas podremos obtener errores.

Una buena manera de solucionar esto es usando el encadenamiento opcional ?., de esta manera nos aseguramos que si una propiedad no existe en el objeto, entonces regrese undefined y no asi un error que destruya la app.

La idea aproximada es:

• Si el valor antes del signo de interrogación no es undefined ni null, realice la operación después del signo de interrogación.
• De lo contrario, regresa undefined.

Si ejecutamos la función de usando encadenamiento simple:

const f = (arr) => {
  return arr.map((person) => {
    return person.address.street.name
  })
}

Obtendremos el siguiente error:
Uncaught TypeError: Cannot read properties of undefined (reading 'street')

Preferible obtener un arreglo de undefined que un error que pare la ejecución de la app.