DEV Community

Cristian Fernando
Cristian Fernando

Posted on • Updated on

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)) //?
Enter fullscreen mode Exit fullscreen mode

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

Respuesta en el primer comentario.


Top comments (1)

Collapse
 
duxtech profile image
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
  })
}
Enter fullscreen mode Exit fullscreen mode

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.