Así que hablamos de estas matrices de desestructuración,
pero también podemos desestructurar objetos.
Así que hagámoslo ahora.
Y esta vez vamos a escribir el código
antes de la conferencia anterior.
Así que escribe aquí después de este objeto de restaurante,
para que no tengamos que desplazarnos demasiado.
Además, agregué este objeto aquí al objeto del restaurante.
Y eso ya estaba en sus archivos de inicio,
pero no lo tenía aquí todavía.
De todos modos, hablemos ahora de la desestructuración de objetos.
Y para hacer eso,
usamos las llaves para desestructurar.
Así que para desestructurar objetos usamos las llaves.
Porque así también creamos objetos, ¿verdad?
Entonces todo lo que tenemos que hacer es proporcionar los nombres de las variables
que coincidan exactamente con los nombres de las propiedades
que queremos recuperar del objeto.
Entonces, la elección obvia aquí del objeto a desestructurar,
es restaurante.
Así que tomemos el nombre, las categorías y los horarios de apertura.
Entonces, nuevamente, comencemos con const
para definir realmente algunos nombres de variables.
Y ahora como dije,
necesitamos escribir los nombres exactos de las propiedades aquí
para ahora extraer variables de este objeto.
Ahora bien, dado que en un objeto,
el orden de los elementos no importa,
no necesitamos omitir elementos manualmente
como lo hicimos en una matriz.
Así que simplemente podemos escribir el nombre.
Así que ese es el nombre del restaurante aquí.
Y luego recuerda también que en los objetos,
el orden de los elementos no importa.
Y entonces también podemos tomar ahora el horario de apertura,
que es una especie de última propiedad
y sólo entonces las categorías.
Y luego simplemente decimos restaurante igual.
Eso es exactamente lo mismo que con las matrices,
pero ahora aquí usamos las llaves
y tenemos que especificar el nombre de las propiedades.
Pero al igual que con las matrices,
esto ahora crea tres nuevas variables.
Entonces, basado en este objeto de restaurante.
Entonces, veamos nombre, horarios y categorías.
Y de hecho aquí están.
Bueno.
Esos son los fundamentos de la desestructuración de objetos.
Una vez mas,
esta es una adición extremadamente útil al lenguaje.
Especialmente cuando tratamos con el resultado de una llamada API,
que básicamente significa obtener datos
desde otra aplicación web,
como datos meteorológicos o datos sobre películas
o algo así.
y estos datos
por lo general viene en forma de objetos básicamente.
Y luego la desestructuración es realmente un salvavidas.
Nos permite escribir mucho menos código.
Así que esto realmente se usa en aplicaciones modernas.
Pero ahora, ¿qué pasaría si quisiéramos que los nombres de las variables fueran diferentes?
de los nombres de propiedad?
Bueno, podemos hacerlo así.
Ahora, por supuesto, todavía necesitamos hacer referencia a los nombres de las propiedades.
como lo hicimos antes,
de lo contrario, JavaScript no tiene forma de saber
lo que realmente queremos.
Así que escribamos el nombre de nuevo,
pero luego podemos usar los dos puntos y especificar un nuevo nombre.
Digamos que realmente queremos que se llame restaurantName.
Y luego aquí,
digamos que queremos las horas de apertura,
pero queremos que la variable se llame solo horas.
Y luego, una vez más, queremos tomar las categorías,
pero queremos que el nombre de la variable se llame etiquetas.
Y luego otra vez, igual al restaurante.
Y entonces las variables que ahora creamos
se llaman restaurantName, hours y tags.
Así que básicamente esto, esto y esto.
Y el código VS es lo suficientemente bueno como para ponerlos
en este color morado aquí también.
y asi ves
que estos tres son en realidad exactamente el mismo nombre,
pero pudimos darles nuevos nombres de variables.
Lo cual, de nuevo, será inmensamente útil.
cuando se trata de datos de terceros.
Y otra característica útil
para cuando estamos tratando con datos de terceros como ese.
Entonces, como un objeto que obtenemos de otro lugar,
por ejemplo, una llamada a la API, como estaba explicando.
Puede ser realmente útil tener valores predeterminados
para el caso de que estemos tratando de leer una propiedad
que no existe en el objeto.
Entonces, por lo general, obtenemos un indefinido.
Por ejemplo, si intentáramos decir restaurant.menu,
esto seria indefinido
porque no hay una propiedad llamada menú.
Tenemos starterMenu y mainMenu, pero no solo menu.
¿Bueno?
Y así podemos establecer valores predeterminados
al igual que podemos en realidad en matrices.
Así que digamos que estamos tratando de desestructurar el menú.
Entonces usamos equal para establecer un valor predeterminado, ¿de acuerdo?
Y luego podemos hacer lo mismo con el menú de inicio,
Por ejemplo.
Y luego podemos incluso combinar esta sintaxis aquí
con lo que hicimos anteriormente.
Así que déjame mostrarte.
Así que digamos que estamos tratando de recuperar el starterMenu.
Así que este, pero luego queremos darle otro nombre.
Así que starterMenu, y queremos llamarlo solo starters.
Y también queremos darle un valor por defecto
en caso de que no exista.
Entonces, en este caso, solo una matriz vacía.
Ahora, en este caso, realmente existe.
Entonces starterMenu existe.
Y por lo tanto, este valor predeterminado no se aplicará,
pero debería aplicarse al menú.
Porque como te decía,
no hay ninguna propiedad en el objeto restaurante llamado menú.
Así menú y entrantes.
Y aquí, de hecho, obtenemos el valor predeterminado,
que es la matriz vacía.
Y aquí tenemos el menú de entrada.
Y sin esto, nos volveríamos indefinidos,
como decía.
¿Verás?
Y esta es una buena manera de establecer un valor predeterminado.
Una vez mas,
tenga en cuenta que esto es especialmente útil
cuando no tenemos datos codificados como los que tenemos aquí.
Así que estos son solo datos codificados en nuestra aplicación.
Pero en el mundo real,
normalmente obtenemos los datos de otro lugar.
Y entonces es posible que no siempre sepamos
cómo se ven exactamente los datos.
Entonces, es útil establecer valores predeterminados como este.
A continuación, tenemos que hablar sobre la mutación de variables.
mientras desestructura los objetos.
Así que hicimos eso antes con arreglos
cuando estábamos cambiando variables, ¿recuerdas eso?
Entonces, veamos.
Aquí abajo, ves que mutamos estas variables
que creamos antes.
Pero con los objetos, funciona un poco diferente.
Y entonces escribamos eso aquí, mutando variables.
Y aquí vamos a escribir valores predeterminados.
Así que digamos que ya tenemos algunas variables aquí.
Entonces a y b.
Y luego tenemos este objeto,
que tiene una propiedad a de 23, propiedad b de siete
y c de 14, digamos.
¿Está bien?
Y ahora queremos desestructurar este objeto.
Y, de hecho, primero almacenémoslo en una variable
eso hace que sea un poco más fácil trabajar con él.
Entonces, ahora permítanos desestructurar esta matriz.
Ahora no podemos decir const como a, b,
porque a y b ya están declarados aquí, ¿verdad?
También podemos no dejar,
porque de nuevo, eso crearía nuevas variables
y ya los tenemos ahí, ¿vale?
Así que aquí nos falta el objeto que estamos desestructurando.
Pero como decía, no podemos hacer esto.
Y así, de hecho, queremos mutar estas variables.
Entonces a debería convertirse en 23 yb debería convertirse en siete.
Pero ahora que guardamos esto, mira lo que sucede.
Y así obtenemos un error de sintaxis.
Y la razón de eso
es que cuando comenzamos una línea con una llave como esta,
entonces JavaScript espera un bloque de código, ¿de acuerdo?
Y como no podemos asignar nada a un bloque de código,
como hicimos aquí con el signo igual,
entonces obtenemos este error,
token inesperado con el igual allí.
Así que para resolver esto aquí,
el truco es envolver todo esto en un paréntesis.
Y eso es lo que quería mostrarles aquí.
¿Bueno?
Entonces, si registramos a y b, funcionará.
Como ves, ahora tenemos 23 y siete.
Así que básicamente anulamos estas dos variables iniciales,
pero para hacerlo,
tuvimos que terminar esta tarea de desestructuración
entre paréntesis.
Está bien.
Y ahora, ya sabemos cómo funciona la desestructuración de objetos.
Y ahora tenemos que hablar de objetos anidados,
tal como lo hicimos con matrices anidadas.
Así que digamos que queremos crear dos variables,
abrir y cerrar.
Y estos deben contener las horas de apertura y cierre.
para el viernes.
¿Bueno?
Entonces ves que el horario de apertura es un objeto.
Y luego en ese objeto, tenemos otro objeto.
Así que este viernes es un objeto dentro de un objeto,
que a su vez está dentro del objeto restaurante.
¿Bueno?
Ahora el horario de apertura ya es un objeto aquí.
que ya hemos guardado en una variable.
Ese es el objeto que vamos a desestructurar.
Objetos tan anidados.
De nuevo, vamos a empezar con el horario de apertura,
y ahora queremos recuperar el sábado.
Así que vamos a empezar con hacer eso.
Así que solo el sábado por ahora, o en realidad un viernes.
Así que creo que dije el viernes.
Entonces, veamos.
Y, de hecho, el viernes es este objeto que tenemos aquí.
Pero recuerda que en realidad queremos dos variables,
uno llamado abierto y el otro llamado cerrado.
Y así es como funciona.
Entonces sabemos que este es un objeto,
y ahora podemos desestructurar aún más ese objeto
utilizando esta sintaxis.
Así que el colon, y luego otra vez,
el nombre exacto de la propiedad de ese objeto interno.
¿Bueno?
Eso parece confuso,
pero esa es solo la sintaxis que tenemos que usar.
Así que tal vez ni siquiera necesites memorizar esto,
pero cuando necesites esto algún día y lo harás,
entonces puedes venir a este video y ver cómo funciona.
Y de hecho ahora tenemos los números 11 y 23.
Y, por supuesto, podríamos llevar esto aún más lejos.
e incluso asignar diferentes variables a estos,
tal como lo hicimos aquí arriba.
Así que con el colon de nuevo.
Así que podríamos llamar a este simplemente o,
y este solo c.
Así que esto es llevarlo al extremo,
pero como dije al principio
la desestructuración es realmente poderosa.
Así que hay muchas cosas que podemos hacer con él.
Y es por eso que te lo estoy mostrando todo ahora mismo.
¿Bueno?
Y ahora para terminar,
déjame mostrarte una aplicación práctica realmente genial
de esta desestructuración.
Y para eso, vamos a volver a nuestro objeto aquí.
Así que a nuestro ejemplo de la sección.
Y ahora vamos a crear otro método.
Tantas veces en JavaScript,
tenemos funciones con muchos parámetros.
Pero entonces puede ser difícil saber el orden de los parámetros.
para alguien que está usando esta función.
Y así, en lugar de definir los parámetros manualmente,
podemos simplemente pasar un objeto a la función como un argumento,
y la función se desestructurará inmediatamente
ese objeto
Así que déjame mostrarte lo que quiero decir.
Y digamos que queremos una entrega de pedido.
Así que esa es una nueva función.
¿Bueno?
Y aquí, llamemos por ahora a este argumento objeto.
Y luego registraré ese objeto en la consola aquí.
Y ahora permítanme llamar a esto en realidad.
Y lo haré aquí mismo.
Para que podamos ver todo al mismo tiempo.
Eso es restaurant.orderDelivery.
Y ahora aquí viene ese objeto de opciones.
Entonces, como dije, ahora podemos especificar algunas opciones aquí.
Digamos el tiempo de entrega.
Pongámoslo a las 23:30,
que es como a las 22:30.
digamos también dirección
Vía del Sole, 21.
Y luego también especificamos el índice principal
y el índice de inicio.
Así que un poco,
como lo hicimos aquí arriba en esta función.
starterIndex.
¿Bueno?
Ah, y aquí también tenemos que darle algo de valor.
Digamos dos también.
Y entonces...
Sí, aquí justo al principio está ese objeto.
que acabamos de definir
porque aquí simplemente lo estamos registrando por ahora, ¿de acuerdo?
Así que lo que acabamos de hacer fue llamar a esta función aquí
y pasando en un objeto de opciones.
Y eso es algo bastante estándar en realidad en JavaScript,
especialmente en bibliotecas de terceros.
Porque ahora, aquí en los argumentos de la función
en realidad podemos hacer la desestructuración de inmediato.
Así que ahora podemos decir starterIndex, mainIndex, hora y dirección,
que es exactamente los cuatro nombres de propiedad
que tenemos aquí abajo.
Y por supuesto,
por lo general primero desarrollaríamos la función
y luego llamarlo.
Pero quería explicarte esta forma de llamar a un método.
con un objeto,
por lo que escribir el objeto aquí tiene sentido.
¿Está bien?
Y ahora, en lugar del objeto,
ya que hicimos la desestructuración aquí mismo,
ahora tenemos cuatro nombres de variables.
Entonces podemos registrarlos a través de la consola.
o en realidad, hagamos una buena cadena aquí.
Así que digamos pedido recibido.
Y luego vamos a la comida.
Entonces, según el índice de inicio,
solo copiemos eso de aquí.
Entonces esto inicia starterMenu en el starterIndex actual,
y luego también el menú principal.
Así que copiemos eso de nuevo, en realidad todo esto de aquí.
Y necesitamos las llaves y este signo de dólar
será entregado a,
luego la dirección y luego la hora.
¿Bueno?
Y así de hecho,
obtenemos esta cadena completa en función de los datos que pasamos
en este único objeto, ¿de acuerdo?
Así que eso es importante darse cuenta.
Solo pasamos un objeto a esta función, ¿de acuerdo?
No pasamos cuatro argumentos.
Es realmente solo un argumento, un objeto.
Entonces aquí en la función,
en cuanto recibimos ese objeto, inmediatamente lo desestructuramos.
Y es por eso que estos nombres aquí
deben ser exactamente los nombres que tenemos aquí
en el objeto
Pero lo bueno de esto,
es que aquí las propiedades en el índice
no tiene que coincidir con el orden
en el que hacemos desestructuración aquí arriba.
Y eso lo hace realmente fácil.
para el usuario de esta función
para especificar básicamente los argumentos, ¿de acuerdo?
Entonces esto es genial,
pero incluso podemos usar algo más de conocimiento que obtuvimos aquí,
cuáles son estos valores predeterminados.
Así que ahora podemos usar esto para establecer básicamente los valores predeterminados aquí
en algunos de estos.
Así que digamos que el starterIndex será uno.
Si no se puede desestructurar,
ingrese el índice principal será cero.
La hora de entrada será a las 20:00.
Y ahora que llamamos
este es nuestro método restaurant.orderDelivery,
Puedo especificar la dirección de nuevo.
De hecho, vamos a copiarlo desde aquí.
Y permítanme también especificar el starterIndex.
¿Bueno?
Pero luego el resto se tomará de los valores predeterminados.
que ponemos aquí para desestructurar.
Muy bien, y aquí como la segunda cadena,
que recibamos será entregado en Via del Sole a las 20:00.
¿Bueno?
Así que en este objeto que pasamos,
no tenemos ninguna propiedad por el momento, ¿verdad?
Y así como JavaScript hizo la desestructuración,
aquí tomó el valor predeterminado de 20.
¿Bueno?
Y lo mismo sucedió con el índice principal
que también definimos.
Entonces muestra cero y cero es una pizza.
Y es por eso que tenemos pizza aquí en la cadena de salida.
¿Está bien?
Entonces, si alguna vez necesita escribir una función como esta,
entonces uno realmente complejo con muchos parámetros
eso podría ser difícil de especificar,
Ten en cuenta esta técnica.
Y esto se vuelve aún más útil.
a medida que aumenta la cantidad de parámetros.