aprendamos sobre
una característica aún más nueva de los objetos y también de las matrices
que se llama encadenamiento opcional.
Y este es realmente asombroso.
Entonces, digamos que queremos saber el horario de apertura
de nuestro restaurante para el lunes.
Así que vamos a comprobar rápidamente eso.
Así que restaurant.openingHours,
y luego, dado que estamos comprobando el lunes,
probemos .mon.
Entonces, ¿cuál podría representar el lunes?
Ahora, en realidad esta propiedad no existe.
Así que ves que esto es indefinido, ¿verdad?
Pero hagamos como que no sabemos
si este restaurante abre los lunes o no.
Y ese podría ser el caso.
Por ejemplo, si estos datos provienen de un servicio web real.
Así que una API web.
Y en su servicio podría haber múltiples restaurantes
y no todos abrirían el lunes.
Y entonces no teníamos forma de saber
si este restaurante en particular
abriría el lunes o no.
Pero ahora vayamos más lejos
porque en realidad queremos saber exactamente la hora
en que el restaurante abre el lunes.
Entonces, veamos qué obtenemos.
Y ahora sí obtenemos un error
porque los resultados de esto no estaban definidos.
Y luego undefined.open es realmente un error.
Así que ese es el error que tenemos aquí.
Así que para evitar este error,
primero tendríamos que verificar si esto aquí realmente existe.
Así que podríamos hacer algo como esto.
Si esta propiedad existe, básicamente haz esto.
O también podríamos usar un operador lógico
como ya aprendimos
pero esto aquí es un poco más legible, ¿de acuerdo?
Así que si hiciéramos lo mismo para
digamos viernes,
entonces ya sabemos que el viernes existe.
Y entonces esto funcionaría
y serían las 11
Pero centrémonos aquí en el lunes,
que es el día que no existe.
Y ahora al menos nos deshicimos de nuestro error aquí.
Entonces no es gran cosa tener que agregar esta lógica aquí
pero hace que nuestro código sea un poco más ilegible
y más desordenado.
Sin embargo, esto es verificar solo una propiedad.
Así que solo para el lunes.
Pero ahora imagina que el horario de apertura aquí
también sería opcional.
O en otras palabras, que tal vez el objeto restaurante
tampoco puede tener horario de apertura.
Entonces, en este caso, tendríamos que verificar ambos, ¿no?
Entonces tendríamos que hacer
si restaurante.openingHours existe
y si existen restaurants.openingHours.mon
mientras que solo así desbloquearás el horario de apertura de la consola.
Y esto puede salirse de control bastante rápido.
cuando tenemos objetos profundamente anidados
con muchas propiedades opcionales.
Y a veces eso sucede en el mundo real.
Y por lo tanto ES2020
introdujo una gran solución para esto,
que es una característica llamada encadenamiento opcional.
Y con encadenamiento opcional,
si una determinada propiedad no existe,
entonces undefined se devuelve inmediatamente.
Y entonces eso evitará
ese tipo de error que vimos antes.
Y así es como funciona.
Así que vamos a recrearlo ahora con un encadenamiento opcional.
(golpeteo del teclado)
Así que ahora podemos decir restaurant.openingHours.mon
y ahora aquí está el operador de encadenamiento opcional.
Entonces, en lugar de solo un punto,
usamos el signo de interrogación, el punto y luego abrimos.
¿Bueno? Así es como funciona el encadenamiento opcional.
Así que sólo si la propiedad
eso es antes de este signo de interrogación aquí.
Entonces, solo si el lunes existe,
entonces esta propiedad abierta se leerá desde allí.
¿Está bien?
Pero si no, se devolverá inmediatamente undefined.
Y existe aquí en realidad significa el concepto nulo
que ya hablamos antes.
Entonces, una propiedad existe si no es nula ni indefinida.
¿Bueno?
Entonces, si es cero o la cadena vacía,
entonces todavía existe, por supuesto.
Así que si intentamos esto ahora, nos quedamos indefinidos.
Así que eso es exactamente lo que estaba diciendo.
Vamos a, de nuevo, recrearlo aquí.
sin el encadenamiento opcional.
Sólo para ver el error de nuevo.
Y así aquí obtendríamos el error.
Nuevamente porque todo esto aquí es indefinido,
y luego leemos abierto aquí desde indefinido,
que no funciona
Pero aquí esta siguiente operación de intentar leer abierta
solo sucede si todo esto aquí realmente existe.
Entonces, si no es nulo y no indefinido.
Pero si es indefinido o nulo,
entonces el resultado será indefinido inmediatamente.
Así que saquemos esto de nuevo.
Y es por eso que nos quedamos indefinidos en este momento.
Y, por supuesto, podemos tener múltiples encadenamientos opcionales.
Así que básicamente recreemos lo que tenemos aquí.
Así que en este ejemplo,
así que aquí estamos probando para ambos horarios de apertura
y para el lunes.
Así que estas son esencialmente las dos propiedades opcionales
que no sabemos de antemano si existen.
Así que el lunes es opcional,
y es por eso que tenemos el signo de interrogación aquí básicamente,
preguntando si existe
y ahora podemos hacer lo mismo para el horario de apertura.
Y ahora si restaurant.openingHours ni siquiera existe,
bueno, entonces la propiedad del lunes ni siquiera se leerá
y por lo tanto no obtenemos ese error.
¿Está bien?
Y entonces esto lo hace realmente fácil
para prevenir todo tipo de errores
que a veces ni siquiera esperamos.
¿Está bien?
Entonces, también quita todo este trabajo de hacer esto
simplemente agregando este simple signo de interrogación allí.
Pero ahora veamos un poco más de ejemplo del mundo real.
Y para eso, déjame agarrar esto
matriz de días de la semana y colóquelo aquí.
(golpeteo del teclado)
Vamos a llamarlo días aquí
por lo que no es la misma variable.
Y ahora lo que quiero hacer es recorrer esta matriz
y luego bloquear a la consola,
si el restaurante está abierto o cerrado
en cada uno de los días.
(golpeteo del teclado)
Entonces, esa es una buena aplicación.
de encadenamiento opcional allí mismo.
(golpeteo del teclado)
Entonces, comencemos simplemente iniciando sesión aquí hoy.
solo para que puedas recordar cómo funciona este ciclo.
Y, de hecho, ahora podemos hacer algo de código.
con cada uno de estos días aquí.
Entonces, ahora hagamos esencialmente lo mismo que hicimos aquí.
Así restaurante.openingHours
pero ahora no podemos hacer esto, ¿verdad?
Porque este no es un nombre de propiedad real del objeto.
Y recuerda si queremos usar un nombre de variable
como el nombre de la propiedad,
básicamente, necesitamos usar la notación de corchetes.
Así que aprendimos sobre este camino de regreso
en la sección fundamental.
Y así que asegúrese de recordar eso.
¿Bueno?
Entonces, básicamente esto sería lo mismo en el primer día.
.mon y luego .tue y así sucesivamente.
Pero el día aquí viene dinámicamente de esta matriz.
¿Bueno?
Pero el encadenamiento opcional, por supuesto, también funciona con eso.
Y ahora podemos preguntar si existe abierto, básicamente.
Y ahora guardemos esto en una variable.
y luego iniciemos sesión en la consola.
Y esto aún no está completo.
pero por ahora, veamos qué va a pasar.
Entonces, el día y luego lo que sea el día actual
abrimos en,
y aquí usamos la variable abierta que acabamos de crear.
Vamos a deshacernos de este console.log aquí.
Bueno.
Entonces, el lunes abrimos en undefined,
indefinido indefinido,
y luego de hecho el jueves, viernes y sábado,
estamos abiertos.
Y entonces tenemos la hora de apertura.
que en realidad también está en el objeto.
Solo asegurémonos.
Entonces este está abierto 12, 11 y cero.
Así que esencialmente está abierto las 24 horas.
Abre a las 12 y cierra a las 24.
Así que a medianoche otra vez.
¿Está bien? Eso está funcionando.
Pero ahora no queremos esto indefinido aquí. ¿Bueno?
Y así como antes
vamos a establecer un valor predeterminado.
Así que usemos o,
y por defecto, queremos decir cerrado.
Así que estamos abiertos en cerrado.
Así que eso no tiene mucho sentido.
Entonces podríamos crear una oración mejor allí.
pero dejémoslo así.
Pero tal vez te estés dando cuenta de que ahora tenemos un problema
que es que el sabado dice que estamos cerrados.
Aunque en realidad abrimos
o abre el restaurante.
Así que aquí el sábado que es este,
de hecho, esta propiedad existe.
Así que hay una propiedad llamada Sábado.
Y entonces tenemos un problema aquí.
Y el problema es que el restaurante abre a cero.
Y aquí tenemos el mismo problema que antes.
donde cero es un valor falso.
Y por lo tanto, desencadenará esta segunda parte.
del operador
Pero también vimos la solución a esto,
que es usar el operador coalescente nulo.
Y eso es lo que hacemos ahora.
Y ahora volvemos a abrir a cero.
Excelente.
Entonces, este es un caso de uso increíble
del operador de encadenamiento opcional
y el operador coalescente nulo trabajando juntos.
Y de hecho, se introdujeron en el lenguaje
al mismo tiempo en ES2020
porque realmente fueron diseñados
para trabajar bien unos con otros.
Entonces, nuevamente, ambos confían en este nuevo concepto de nulo
y entonces los valores nulos son nulos e indefinidos.
Y eso es.
Y eso es cierto tanto para este operador coalescente nulo
y también para encadenamiento opcional.
Bueno. Excelente.
Ahora que entiendes cómo funciona,
Pasemos al siguiente tema, que trata sobre los métodos.
Así que el encadenamiento opcional también funciona.
para llamar a los métodos.
Entonces, esencialmente podemos verificar
si un método realmente existe antes de que lo llamemos.
Entonces, restaurante.order,
y ahora podemos comprobar si existe.
Así que usamos el signo de interrogación, el punto, y si existe,
entonces podemos llamarlo.
Así que pasemos cero y uno aquí.
Y entonces siempre deberíamos usar juntos
el operador coalescente nulo.
Y así, el método no existe.
Así que ejecutemos esto
pero en este caso, el método realmente existe.
Y aquí tenemos el resultado esperado.
Cuando intentamos llamar a un método que no existe.
Así que digamos orderRisotto,
y entonces nunca escribimos un método para eso.
Y así, vamos a ver.
Y sí, ahora obtenemos que el método no existe.
Y así como antes
este operador de encadenamiento opcional
verificará si orderRisotto realmente existe.
Y si no es así,
bueno, entonces regresará inmediatamente indefinido.
Y entonces todo esto vuelve indefinido.
Y entonces, aquí en el operador coalescente nulo,
inmediatamente vamos a esa segunda operante.
Así que ese es este de aquí.
Y sí, entonces ese es el resultado de toda esta operación.
Por supuesto, si no tuviéramos esto,
entonces estábamos tratando de intentar
algo que no es una función.
Tan realmente útil en los métodos también.
Y finalmente, el encadenamiento opcional incluso funciona en matrices.
(golpeteo del teclado)
Entonces, básicamente, podemos usarlo para verificar si una matriz está vacía.
Así que simplemente creemos una matriz de usuarios
en el que podemos poner un par de objetos de usuario.
Así que nombra a Jonas
y correo electrónico,
hola@jonas.io.
(murmullos)
Esto es solo para demostración.
Así que pongamos un objeto aquí
y ahora para obtener el nombre del primer elemento de esta matriz,
Podemos hacer esto.
Podemos escribir usuarios, elemento número cero
y solo si existe.
Entonces, el encadenamiento opcional solo toma su nombre.
¿Bueno?
Y de lo contrario, queremos registrar la matriz de usuario vacía.
Entonces, veamos.
Y de hecho tenemos a Jonas.
Y de nuevo, este encadenamiento opcional aquí
comprueba si el valor de la izquierda existe.
Así que los usuarios cero.
¿Bueno?
Así que si estaba vacío,
por lo que los usuarios,
así como esto,
luego obtenemos una matriz de usuario vacía.
Y sin encadenamiento opcional,
Tendríamos que escribir algo como esto.
Así que si usuarios.longitud
mayor es igual a cero
luego consola.log
y esto de aqui
y otra consola.log,
matriz de usuario vacía.
¿Está bien?
Y eso parece mucho más trabajo
que lo que acabamos de tener allá arriba.
Entonces, aquí no necesitamos hacer ninguna verificación.
entonces eso es mucho mejor.
Y ahora, en ambos casos, tenemos a Jonas.
Por lo tanto, acostúmbrese a este operador de encadenamiento opcional,
que casi siempre,
los usamos junto con el operador coalescente nulo
para que podamos hacer algo
en caso de que no obtengamos un resultado del objeto
o de la matriz que está aquí en el lado izquierdo.
Está bien.
Y dicho esto, nos vemos en el próximo video.