1
00:00:00,000 --> 00:00:03,683
Así que comencemos esta sección de revisión de JavaScript.

2
00:00:03,683 --> 00:00:07,182
con el concepto muy importante de Desestructuración.

3
00:00:07,182 --> 00:00:11,501
Y como siempre, empezaré creando una nueva carpeta aquí.

4
00:00:11,501 --> 00:00:14,864
que simplemente llamo Revisión de JavaScript.

5
00:00:14,864 --> 00:00:17,842
Y luego necesitamos obtener nuestros archivos de inicio.

6
00:00:17,842 --> 00:00:21,120
del repositorio de GitHub que ya descargamos

7
00:00:21,120 --> 00:00:22,670
al inicio del curso.

8
00:00:24,780 --> 00:00:29,287
Entonces, seleccionemos script.js aquí desde la carpeta de inicio.

9
00:00:29,287 --> 00:00:31,662
Y luego peguemos eso

10
00:00:31,662 --> 00:00:34,980
en la carpeta del proyecto que acabamos de crear.

11
00:00:34,980 --> 00:00:36,570
Y ahora para abrir esta carpeta,

12
00:00:36,570 --> 00:00:40,746
Simplemente arrastraré y soltaré esta carpeta en el código VS.

13
00:00:40,746 --> 00:00:45,286
Puedo escribir aquí, que luego lo configura como la carpeta del proyecto.

14
00:00:45,286 --> 00:00:48,990
Y alternativamente, si eso no funcionó por alguna razón,

15
00:00:48,990 --> 00:00:51,422
Por supuesto, siempre puedes abrir una carpeta de proyecto.

16
00:00:51,422 --> 00:00:55,866
simplemente haciendo clic aquí en abrir, ¿verdad?

17
00:00:55,866 --> 00:01:00,768
Pero de todos modos, abramos script.js aquí.

18
00:01:00,768 --> 00:01:05,284
Y como vemos ya contiene algunos datos iniciales.

19
00:01:05,284 --> 00:01:07,260
Entonces tenemos esta matriz aquí

20
00:01:07,260 --> 00:01:09,969
que contiene cinco objetos de libro.

21
00:01:09,969 --> 00:01:12,047
Entonces tenemos un objeto para cada libro.

22
00:01:12,047 --> 00:01:15,870
que tiene un título, una fecha, etc.

23
00:01:15,870 --> 00:01:18,165
Entonces, todo lo relevante sobre los libros.

24
00:01:18,165 --> 00:01:21,869
Y luego también creé dos funciones aquí abajo.

25
00:01:21,869 --> 00:01:25,304
Así que este Obtener Libros básicamente simplemente regresará

26
00:01:25,304 --> 00:01:29,067
estos datos aquí, y luego tenemos Obtener libro por identificación

27
00:01:29,067 --> 00:01:32,700
que básicamente simplemente devuelve el libro con

28
00:01:32,700 --> 00:01:34,593
el ID que pasamos aquí.

29
00:01:37,050 --> 00:01:41,763
Muy bien, nuevamente, esta conferencia trata sobre la desestructuración.

30
00:01:43,499 --> 00:01:48,119
Y para empezar, creemos una variable llamada libros.

31
00:01:48,119 --> 00:01:52,978
que simplemente será el resultado de llamar a Obtener libros.

32
00:01:52,978 --> 00:01:57,120
Ahora, para ejecutar realmente este código, ahora

33
00:01:57,120 --> 00:02:01,637
Utilice una extensión especial para eso, que se llama Quokka.

34
00:02:02,620 --> 00:02:06,117
Así que sigue adelante y descarga esta extensión.

35
00:02:06,117 --> 00:02:10,710
lo que nos permitirá ejecutar código JavaScript directamente dentro

36
00:02:10,710 --> 00:02:12,000
del código VS.

37
00:02:12,000 --> 00:02:14,850
Entonces sin que tengamos que conectar este script

38
00:02:14,850 --> 00:02:17,301
con algún archivo HTML, por ejemplo.

39
00:02:17,301 --> 00:02:18,978
Muy útil.

40
00:02:18,978 --> 00:02:22,980
Y luego, para iniciar Quokka en este archivo, podemos venir

41
00:02:22,980 --> 00:02:26,574
a nuestra plataforma de comando, que está aquí abajo, o simplemente

42
00:02:26,574 --> 00:02:28,936
puedes usar este atajo de teclado.

43
00:02:28,936 --> 00:02:31,830
Entonces deberías memorizar esto porque este comando

44
00:02:31,830 --> 00:02:34,739
La paleta es realmente útil todo el tiempo.

45
00:02:34,739 --> 00:02:38,525
Entonces, para iniciar Quokka ahora en este archivo, simplemente escriba Quokka

46
00:02:38,525 --> 00:02:42,843
y escríbalo correctamente y luego comience.

47
00:02:43,922 --> 00:02:45,960
Entonces es este.

48
00:02:45,960 --> 00:02:49,650
Entonces comience en el archivo actual, presione Enter y verá

49
00:02:49,650 --> 00:02:53,040
que inmediatamente abrió este panel aquí abajo.

50
00:02:53,040 --> 00:02:54,940
Entonces en esta pestaña de salida

51
00:02:54,940 --> 00:02:59,765
y también activó esta herramienta aquí en el lado izquierdo.

52
00:02:59,765 --> 00:03:03,389
Y ahora este código ya se está ejecutando.

53
00:03:03,389 --> 00:03:06,150
pero para ver todo lo que podamos, por ejemplo

54
00:03:06,150 --> 00:03:08,820
simplemente escribe ahora esta variable.

55
00:03:08,820 --> 00:03:11,040
Entonces estos libros que ya tenemos

56
00:03:11,040 --> 00:03:12,960
y lo imprimirá inmediatamente

57
00:03:12,960 --> 00:03:16,140
aquí abajo a este tipo de consola.

58
00:03:16,140 --> 00:03:18,222
Aparecerá aquí en el lado izquierdo.

59
00:03:18,222 --> 00:03:21,608
entonces en esta extensión aquí, en esta pestaña.

60
00:03:21,608 --> 00:03:26,125
Y también se muestra aquí dentro de este archivo.

61
00:03:26,125 --> 00:03:28,650
Entonces esto es realmente útil.

62
00:03:28,650 --> 00:03:30,786
especialmente para valores más pequeños.

63
00:03:30,786 --> 00:03:32,460
Entonces cuando tienes un objeto

64
00:03:32,460 --> 00:03:35,883
es más fácil comprobarlo aquí en esta barra lateral.

65
00:03:35,883 --> 00:03:39,300
Entonces aquí podemos ver toda esta matriz.

66
00:03:39,300 --> 00:03:41,484
y todos los objetos que hay allí.

67
00:03:41,484 --> 00:03:44,760
bueno. Y ahora con toda la configuración en su lugar

68
00:03:44,760 --> 00:03:47,528
De hecho, hablemos rápidamente sobre la desestructuración.

69
00:03:47,528 --> 00:03:51,243
Entonces la desestructuración es muy útil todo el tiempo.

70
00:03:51,243 --> 00:03:55,338
siempre que necesitemos básicamente obtener algunos datos de un objeto

71
00:03:55,338 --> 00:03:56,978
o fuera de una matriz.

72
00:03:56,978 --> 00:04:00,943
Entonces, por ejemplo, digamos que necesitábamos el título y el autor.

73
00:04:00,943 --> 00:04:04,230
de un determinado libro, y para demostrarlo,

74
00:04:04,230 --> 00:04:08,610
De hecho, usemos obtener libro aquí con alguna identificación.

75
00:04:08,610 --> 00:04:09,802
Por ejemplo, identificación 2.

76
00:04:09,802 --> 00:04:11,845
También se llama aquí.

77
00:04:11,845 --> 00:04:13,263
Sólo reserva.

78
00:04:14,426 --> 00:04:16,200
bueno.

79
00:04:16,200 --> 00:04:19,101
Y ahora otra vez si quisieras llevarte el título

80
00:04:19,101 --> 00:04:21,864
fuera de este objeto de libro,

81
00:04:21,864 --> 00:04:26,670
entonces digamos que queremos crear una nueva variable

82
00:04:26,670 --> 00:04:27,600
llamado título.

83
00:04:27,600 --> 00:04:31,907
Podríamos hacer book.title, ¿verdad?

84
00:04:33,039 --> 00:04:36,690
Y ahora usando la extensión Quokka, podemos ver

85
00:04:36,690 --> 00:04:40,893
que el título es The Cyberiad o algo así.

86
00:04:41,740 --> 00:04:46,740
Y efectivamente, si vamos aquí al libro con el ID 2

87
00:04:48,450 --> 00:04:51,643
entonces obtenemos exactamente ese título, ¿verdad?

88
00:04:51,643 --> 00:04:55,222
Y por supuesto podemos sacar otros datos de esto.

89
00:04:55,222 --> 00:04:58,930
Por ejemplo, digamos que también queremos que el autor

90
00:05:01,425 --> 00:05:04,983
haríamos libro.autor.

91
00:05:06,252 --> 00:05:09,766
Y luego aquí, veamos eso.

92
00:05:09,766 --> 00:05:14,766
bueno. Y por cierto, también podemos simplemente hacer el registro de puntos de la consola.

93
00:05:16,042 --> 00:05:19,143
que obtendrá un resultado similar.

94
00:05:20,369 --> 00:05:24,180
De nuevo, este autor aquí, pero luego podemos hacer múltiples

95
00:05:24,180 --> 00:05:27,570
al mismo tiempo, lo que puede resultar un poco más útil.

96
00:05:27,570 --> 00:05:29,520
Ahora, leyendo datos del objeto libro.

97
00:05:29,520 --> 00:05:32,670
algo así puede volverse un poco engorroso, especialmente

98
00:05:32,670 --> 00:05:36,000
cuando tenemos muchas propiedades que necesitamos sacar.

99
00:05:36,000 --> 00:05:38,304
Entonces tendríamos que escribir una línea de código para cada

100
00:05:38,304 --> 00:05:39,790
de estas propiedades.

101
00:05:39,790 --> 00:05:42,090
Entonces eso realmente no es ideal.

102
00:05:42,090 --> 00:05:44,866
Y es por eso que tenemos la Desestructuración de Objetos.

103
00:05:44,866 --> 00:05:48,329
Entonces, en la Desestructuración de Objetos, simplemente podemos crear

104
00:05:48,329 --> 00:05:50,669
estas nuevas variables todas a la vez.

105
00:05:50,669 --> 00:05:54,465
Entonces digamos nuevamente título y autor.

106
00:05:54,465 --> 00:05:58,620
Y ahora mismo vs code se queja porque ya estamos

107
00:05:58,620 --> 00:05:59,970
definiéndolos aquí

108
00:05:59,970 --> 00:06:01,948
pero no importa eso por ahora.

109
00:06:01,948 --> 00:06:05,190
Y entonces aquí simplemente especificamos el objeto.

110
00:06:05,190 --> 00:06:08,619
del cual queremos sacar el título y el autor.

111
00:06:08,619 --> 00:06:10,725
Y eso es todo.

112
00:06:10,725 --> 00:06:13,773
Así que comentemos estos dos y luego veremos

113
00:06:13,773 --> 00:06:16,623
que obtenemos exactamente los mismos resultados aquí abajo.

114
00:06:17,910 --> 00:06:19,470
Ahora aquí, lo que es crucial es

115
00:06:19,470 --> 00:06:22,050
que realmente le damos a estas variables nombres aquí

116
00:06:22,050 --> 00:06:25,710
exactamente el mismo nombre que las propiedades del objeto.

117
00:06:25,710 --> 00:06:29,673
Entonces, si tuviéramos títulos aquí, eso no funcionaría.

118
00:06:30,708 --> 00:06:35,070
Entonces verás que aquí no estaría definido, y eso es

119
00:06:35,070 --> 00:06:38,673
porque no hay ninguna propiedad de títulos en el objeto del libro.

120
00:06:40,866 --> 00:06:44,880
¿bueno? Realmente muy útil todo el tiempo.

121
00:06:44,880 --> 00:06:47,839
especialmente cada vez que obtenemos algunos datos de una API

122
00:06:47,839 --> 00:06:50,670
que es básicamente lo que estamos simulando aquí

123
00:06:50,670 --> 00:06:52,950
con esta función de obtención de libro.

124
00:06:52,950 --> 00:06:55,770
Entonces, por supuesto, esta no es una función asincrónica.

125
00:06:55,770 --> 00:06:58,590
pero simula que estamos obteniendo este libro de algún tipo

126
00:06:58,590 --> 00:07:02,011
de API que se abstrae detrás de esta función.

127
00:07:02,011 --> 00:07:05,440
Y entonces, una vez que obtenemos esos datos generalmente como un objeto

128
00:07:05,440 --> 00:07:08,130
Entonces podemos desestructurar todas las propiedades.

129
00:07:08,130 --> 00:07:10,500
de ahí lo que necesitamos.

130
00:07:10,500 --> 00:07:12,679
Y de hecho, saquemos algunas propiedades más.

131
00:07:12,679 --> 00:07:17,530
hagamos páginas, hagamos la fecha de publicación

132
00:07:19,235 --> 00:07:22,173
hagamos los géneros.

133
00:07:23,940 --> 00:07:26,730
Creo que así se llama.

134
00:07:26,730 --> 00:07:30,667
Y ahora tiene la adaptación cinematográfica, ¿verdad?

135
00:07:34,278 --> 00:07:39,278
De nuevo, básicamente bloqueemos el libro aquí.

136
00:07:39,930 --> 00:07:43,020
para que podamos tenerlo aquí en esta barra lateral izquierda.

137
00:07:43,020 --> 00:07:44,100
Y entonces aquí con esto.

138
00:07:44,100 --> 00:07:47,040
podemos ver fácilmente todas las propiedades que están

139
00:07:47,040 --> 00:07:48,750
dentro del objeto libro.

140
00:07:48,750 --> 00:07:51,570
Y estos son los que estoy tomando

141
00:07:51,570 --> 00:07:53,880
ya disponible básicamente fuera del libro

142
00:07:53,880 --> 00:07:56,323
y almacenarlos en sus propias variables.

143
00:07:56,323 --> 00:08:01,323
Y entonces no hay necesidad de encerrarlos a todos aquí ahora, está bien.

144
00:08:01,800 --> 00:08:05,539
Así es como funciona esta desestructuración en pocas palabras.

145
00:08:05,539 --> 00:08:08,037
Para los objetos, en realidad hay algunas cosas más que podemos hacer.

146
00:08:08,037 --> 00:08:10,481
pero no entraré en eso aquí.

147
00:08:10,481 --> 00:08:14,580
Y en cambio, pasemos ahora a la Desestructuración con una carrera,

148
00:08:14,580 --> 00:08:16,110
que es bastante similar

149
00:08:16,110 --> 00:08:19,297
pero en lugar de confiar en los nombres de las propiedades

150
00:08:19,297 --> 00:08:23,221
simplemente depende del orden de los elementos de la matriz.

151
00:08:23,221 --> 00:08:27,233
Entonces, por ejemplo, veamos la matriz de géneros.

152
00:08:28,230 --> 00:08:29,590
Así que lo bloquearemos aquí.

153
00:08:31,980 --> 00:08:34,743
para que podamos ver cómo se ve esta matriz.

154
00:08:37,590 --> 00:08:40,200
Entonces esta es la matriz con la que vamos a trabajar.

155
00:08:40,200 --> 00:08:44,400
y tiene los cinco géneros a los que pertenece el libro.

156
00:08:44,400 --> 00:08:47,098
Y entonces digamos que estos géneros aquí

157
00:08:47,098 --> 00:08:49,980
están básicamente ordenados por importancia.

158
00:08:49,980 --> 00:08:52,740
Y entonces el género principal es este,

159
00:08:52,740 --> 00:08:54,750
este es el secundario

160
00:08:54,750 --> 00:08:57,273
Y estos otros no son tan importantes.

161
00:08:59,116 --> 00:09:02,130
Entonces digamos que queremos crear una variable

162
00:09:02,130 --> 00:09:06,097
llamado género primario.

163
00:09:06,097 --> 00:09:09,522
No estoy seguro si estoy diciendo eso bien

164
00:09:09,522 --> 00:09:13,053
pero eso realmente no importa.

165
00:09:14,711 --> 00:09:19,711
Entonces podríamos hacer géneros y luego eliminar el primer elemento.

166
00:09:21,270 --> 00:09:25,803
Y luego, para el género secundario, podríamos simplemente hacer esto.

167
00:09:29,781 --> 00:09:31,830
Registrémoslo en la consola.

168
00:09:31,830 --> 00:09:33,210
Y aquí de nuevo, estoy usando

169
00:09:33,210 --> 00:09:36,960
ese fragmento que definimos en el apartado anterior.

170
00:09:36,960 --> 00:09:38,610
¿recuerda eso?

171
00:09:38,610 --> 00:09:43,050
Entonces género primario y el secundario.

172
00:09:43,050 --> 00:09:48,050
Y así, efectivamente, tenemos ciencia ficción y humor, pero de nuevo

173
00:09:48,300 --> 00:09:51,543
Esto se puede hacer mejor usando la desestructuración.

174
00:09:54,932 --> 00:09:58,773
Entonces usemos la desestructuración.

175
00:09:59,670 --> 00:10:01,560
Entonces definiendo algunas variables.

176
00:10:01,560 --> 00:10:04,982
Y luego aquí, en lugar de las llaves para el objeto

177
00:10:04,982 --> 00:10:08,883
Usamos estos corchetes, que es como definimos una carrera.

178
00:10:10,080 --> 00:10:13,623
Ahora aquí, género primario y secundario.

179
00:10:14,879 --> 00:10:19,383
Y luego simplemente géneros iguales,

180
00:10:22,530 --> 00:10:23,760
guárdalo.

181
00:10:23,760 --> 00:10:26,643
Y aquí tenemos exactamente el mismo resultado.

182
00:10:27,720 --> 00:10:30,612
Básicamente, la primera variable que definimos aquí

183
00:10:30,612 --> 00:10:33,510
esto de esta manera, en esta desestructuración

184
00:10:33,510 --> 00:10:36,000
sacará el primer elemento de la matriz

185
00:10:36,000 --> 00:10:38,130
y asignarlo a esta variable.

186
00:10:38,130 --> 00:10:40,470
Y luego aquí, por supuesto, el segundo.

187
00:10:40,470 --> 00:10:41,910
Entonces saca el segundo elemento.

188
00:10:41,910 --> 00:10:45,600
de la matriz y lo asigna a esta variable.

189
00:10:45,600 --> 00:10:47,490
Y por supuesto podríamos seguir adelante.

190
00:10:47,490 --> 00:10:48,930
pero aquí solo nos interesa

191
00:10:48,930 --> 00:10:51,630
en el género primario y secundario.

192
00:10:51,630 --> 00:10:52,830
Entonces tomamos estos dos

193
00:10:52,830 --> 00:10:55,623
fuera de esta matriz mediante el uso de desestructuración de matrices.