1
00:00:01,140 --> 00:00:02,910
Ahora, antes de que puedas empezar a construir

2
00:00:02,910 --> 00:00:05,160
cualquier aplicación React significativa,

3
00:00:05,160 --> 00:00:07,530
necesitas ser un verdadero maestro

4
00:00:07,530 --> 00:00:11,070
de los tres métodos de matriz funcional en JavaScript

5
00:00:11,070 --> 00:00:14,220
que son mapear, filtrar y reducir.

6
00:00:14,220 --> 00:00:16,860
Y los llamo métodos de matriz funcional.

7
00:00:16,860 --> 00:00:20,910
porque estos métodos no mutan la matriz original

8
00:00:20,910 --> 00:00:25,830
pero en su lugar devuelve una nueva matriz basada en la original.

9
00:00:25,830 --> 00:00:27,510
Entonces, en esta conferencia, comencemos

10
00:00:27,510 --> 00:00:30,123
echando un vistazo al método del mapa.

11
00:00:31,860 --> 00:00:35,880
Y para empezar, eliminemos todo este código aquí.

12
00:00:35,880 --> 00:00:40,230
porque ya no lo necesitamos ahora

13
00:00:40,230 --> 00:00:43,050
porque a partir de ahora empezaremos a trabajar

14
00:00:43,050 --> 00:00:45,153
con toda la gama de libros.

15
00:00:46,620 --> 00:00:49,860
Así que déjame sacar eso, guardarlo.

16
00:00:49,860 --> 00:00:52,668
y luego aquí tenemos todo este panel

17
00:00:52,668 --> 00:00:55,803
y esta salida de Quokka aquí se limpió un poco.

18
00:00:56,850 --> 00:00:59,760
Así que nuevamente pretendamos que estamos recibiendo nuestros libros.

19
00:00:59,760 --> 00:01:04,713
desde esta API ficticia utilizando la función getBooks.

20
00:01:06,060 --> 00:01:07,160
Entonces digamos getBooks.

21
00:01:08,880 --> 00:01:10,350
Y entonces recuerda

22
00:01:10,350 --> 00:01:13,440
que esto nos dará toda la matriz de libros.

23
00:01:13,440 --> 00:01:18,360
Y ahora estamos listos para usar el método map en esa matriz.

24
00:01:18,360 --> 00:01:21,510
Entonces, ¿qué hace realmente el método del mapa?

25
00:01:21,510 --> 00:01:25,380
Bueno, básicamente, el método map recorrerá una matriz

26
00:01:25,380 --> 00:01:26,850
y devolver una nueva matriz

27
00:01:26,850 --> 00:01:30,060
con la misma longitud con alguna operación aplicada

28
00:01:30,060 --> 00:01:33,033
a cada uno de los elementos de la matriz original.

29
00:01:34,500 --> 00:01:35,790
Así que sólo para ilustrar eso,

30
00:01:35,790 --> 00:01:39,000
digamos que tenemos esta matriz muy simple

31
00:01:39,000 --> 00:01:41,460
y sobre eso, podemos llamar mapa.

32
00:01:41,460 --> 00:01:44,520
Y ahora map espera una función de devolución de llamada,

33
00:01:44,520 --> 00:01:46,440
que es una función que se llamará

34
00:01:46,440 --> 00:01:50,040
para cada uno de estos elementos de la matriz.

35
00:01:50,040 --> 00:01:52,410
Y ahora aquí están estas funciones de flecha de las que hablamos.

36
00:01:52,410 --> 00:01:54,960
acerca de antes se vuelve realmente útil,

37
00:01:54,960 --> 00:01:58,953
porque ahora podemos simplemente usar una función de flecha aquí,

38
00:02:00,120 --> 00:02:01,590
por ejemplo, así.

39
00:02:01,590 --> 00:02:04,050
Y explicaré en un segundo qué hace esto.

40
00:02:04,050 --> 00:02:06,800
Pero por ahora, echemos un vistazo al resultado aquí.

41
00:02:08,070 --> 00:02:11,253
En realidad, guardemos esto en alguna variable.

42
00:02:13,140 --> 00:02:17,070
Y lo que ves aquí es que obtenemos una matriz,

43
00:02:17,070 --> 00:02:21,000
que es básicamente el doble de la matriz anterior.

44
00:02:21,000 --> 00:02:22,833
Entonces, ¿qué pasó aquí?

45
00:02:23,820 --> 00:02:26,550
Nuevamente, pasamos esta función de devolución de llamada,

46
00:02:26,550 --> 00:02:29,820
que es una función que se llama para cada

47
00:02:29,820 --> 00:02:32,160
de los elementos de esta matriz.

48
00:02:32,160 --> 00:02:35,400
Y en esta función de devolución de llamada, el parámetro del elemento

49
00:02:35,400 --> 00:02:38,790
siempre será el elemento actual de la matriz.

50
00:02:38,790 --> 00:02:43,290
Entonces, para este primer elemento aquí, el se convertirá en uno.

51
00:02:43,290 --> 00:02:47,520
Y luego aquí simplemente devolvemos uno por dos, que es dos.

52
00:02:47,520 --> 00:02:50,070
Entonces eso se coloca en la matriz y seguimos adelante.

53
00:02:50,070 --> 00:02:51,243
al siguiente.

54
00:02:52,140 --> 00:02:53,910
Entonces aquí tenemos dos.

55
00:02:53,910 --> 00:02:57,060
Por lo tanto, el elemento se convierte en dos, dos por dos son cuatro.

56
00:02:57,060 --> 00:02:59,610
Y eso luego se coloca en la matriz.

57
00:02:59,610 --> 00:03:01,410
y así, llega hasta el final

58
00:03:01,410 --> 00:03:03,240
hasta el final de la matriz.

59
00:03:03,240 --> 00:03:04,230
Y así de nuevo,

60
00:03:04,230 --> 00:03:07,620
el método del mapa es básicamente crear una nueva matriz

61
00:03:07,620 --> 00:03:11,250
basado en la matriz original con alguna operación aplicada

62
00:03:11,250 --> 00:03:13,983
a cada elemento de la matriz original.

63
00:03:15,000 --> 00:03:17,280
Entonces esto fue solo una demostración aquí.

64
00:03:17,280 --> 00:03:20,550
pero ahora lo que quiero hacer es crear una matriz

65
00:03:20,550 --> 00:03:23,910
que contiene simplemente todos los títulos de todos los libros.

66
00:03:23,910 --> 00:03:25,890
Entonces, en lugar de tener esta enorme variedad,

67
00:03:25,890 --> 00:03:28,140
que contiene todos estos objetos,

68
00:03:28,140 --> 00:03:32,733
Todo lo que quiero es una matriz, que simplemente tenga todos los títulos.

69
00:03:36,360 --> 00:03:40,357
Entonces digamos que títulos es igual a libros.mapa.

70
00:03:42,210 --> 00:03:45,030
Y ahora de nuevo, nuestra función de devolución de llamada.

71
00:03:45,030 --> 00:03:49,020
Y aquí, llamemos libro a cada elemento.

72
00:03:49,020 --> 00:03:52,770
porque bueno, tenemos la matriz de este libro,

73
00:03:52,770 --> 00:03:57,770
lo cual está bien, en realidad no es nada.

74
00:03:59,280 --> 00:04:01,710
Y eso es porque tenemos esta flecha aquí.

75
00:04:01,710 --> 00:04:05,910
Devuelvamos algo aquí para que termine la flecha.

76
00:04:05,910 --> 00:04:10,143
No. Ah, pero sí, de todos modos este no es el conjunto de libros.

77
00:04:12,210 --> 00:04:15,480
Sí, aquí tenemos esta matriz con todos estos objetos.

78
00:04:15,480 --> 00:04:17,700
Y ahora, mientras recorremos esta matriz,

79
00:04:17,700 --> 00:04:22,233
cada uno de los elementos es un objeto de libro, ¿verdad?

80
00:04:23,640 --> 00:04:25,620
Entonces este es el argumento de la función.

81
00:04:25,620 --> 00:04:28,380
Y luego recordar es lo que volvemos.

82
00:04:28,380 --> 00:04:30,273
Entonces, ¿qué queremos devolver?

83
00:04:31,350 --> 00:04:34,800
Bueno, simplemente, libro.título.

84
00:04:34,800 --> 00:04:37,110
Ahora que revisamos qué son los títulos,

85
00:04:37,110 --> 00:04:40,863
vemos que es esta matriz, que solo contiene los títulos.

86
00:04:41,730 --> 00:04:45,420
hermoso. Entonces eso fue bastante simple, ¿verdad?

87
00:04:45,420 --> 00:04:48,060
Por lo tanto, la operación, por supuesto, no tiene por qué ser

88
00:04:48,060 --> 00:04:50,340
como una operación matemática como esta.

89
00:04:50,340 --> 00:04:51,930
Aquí simplemente lo que volvemos

90
00:04:51,930 --> 00:04:54,570
para cada elemento del libro es libro.título.

91
00:04:54,570 --> 00:04:58,500
Y eso luego se coloca en la matriz.

92
00:04:58,500 --> 00:05:00,090
Entonces la nueva matriz de salida,

93
00:05:00,090 --> 00:05:03,060
que luego se almacena en estos títulos.

94
00:05:03,060 --> 00:05:04,950
Bien, veamos otro ejemplo.

95
00:05:04,950 --> 00:05:08,940
Y digamos que básicamente queríamos solo

96
00:05:08,940 --> 00:05:12,873
Obtenga los datos esenciales para cada uno de estos objetos del libro.

97
00:05:13,950 --> 00:05:18,420
Entonces queremos una matriz con objetos todavía, pero ahora solo queremos

98
00:05:18,420 --> 00:05:20,883
como el título y el autor tal vez.

99
00:05:21,990 --> 00:05:24,130
Entonces digamos datos esenciales

100
00:05:26,790 --> 00:05:29,973
debería ser libros.mapa.

101
00:05:31,050 --> 00:05:33,990
Y nuevamente, llamo a cada uno el libro.

102
00:05:33,990 --> 00:05:37,230
Y ahora aquí lo que queremos devolver es un nuevo objeto,

103
00:05:37,230 --> 00:05:39,903
que contiene, nuevamente, el título y el autor.

104
00:05:40,830 --> 00:05:42,030
Ahora, en una función de flecha,

105
00:05:42,030 --> 00:05:44,667
Cada vez que usamos estas llaves como esta,

106
00:05:44,667 --> 00:05:46,350
la función de flecha pensará

107
00:05:46,350 --> 00:05:49,650
que este es un bloque de declaración, ¿no?

108
00:05:49,650 --> 00:05:51,870
Entonces esto no es devolver un objeto.

109
00:05:51,870 --> 00:05:54,810
Entonces, si escribimos como x: 23,

110
00:05:54,810 --> 00:05:56,820
esto no devolvería nada

111
00:05:56,820 --> 00:06:00,000
porque nuevamente, la función de flecha simplemente piensa

112
00:06:00,000 --> 00:06:03,540
que este aquí es el bloque de funciones.

113
00:06:03,540 --> 00:06:05,310
Entonces podemos resolver esto de dos maneras.

114
00:06:05,310 --> 00:06:07,320
Primero, simplemente podemos devolver el objeto.

115
00:06:07,320 --> 00:06:08,583
desde aquí manualmente.

116
00:06:09,480 --> 00:06:14,340
Entonces ahora podemos decir que el título es libro.título

117
00:06:16,830 --> 00:06:21,003
y el autor es libro.autor.

118
00:06:22,080 --> 00:06:23,493
Echemos un vistazo a eso.

119
00:06:25,050 --> 00:06:28,410
Y sí, eso funciona.

120
00:06:28,410 --> 00:06:29,610
Ahora para cada uno de los libros,

121
00:06:29,610 --> 00:06:32,673
solo tenemos el autor y el título y nada más.

122
00:06:33,960 --> 00:06:36,420
Eso funcionó, eso es genial.

123
00:06:36,420 --> 00:06:39,390
Pero sí, aquí tenemos demasiado código.

124
00:06:39,390 --> 00:06:41,583
Así que deshagámonos de este retorno nuevamente.

125
00:06:42,780 --> 00:06:45,420
Y entonces el truco es simplemente envolver esto aquí.

126
00:06:45,420 --> 00:06:46,923
entre paréntesis.

127
00:06:49,110 --> 00:06:50,643
Entonces no necesitamos nada de esto.

128
00:06:52,110 --> 00:06:53,940
Y ahora eso funciona igual.

129
00:06:53,940 --> 00:06:56,730
Y entonces, usando estos paréntesis primero

130
00:06:56,730 --> 00:07:00,450
de las llaves, entonces nuevamente somos automáticamente

131
00:07:00,450 --> 00:07:02,883
devolviendo este objeto desde aquí.

132
00:07:03,870 --> 00:07:05,790
Entonces, al igual que aquí, devolvemos el resultado.

133
00:07:05,790 --> 00:07:06,870
de esta operación

134
00:07:06,870 --> 00:07:10,413
y aquí devolvemos simplemente este valor aquí mismo.

135
00:07:11,310 --> 00:07:14,370
Y por supuesto, también podríamos hacer algunos cálculos aquí.

136
00:07:14,370 --> 00:07:18,360
Por ejemplo, digamos que queremos el número de reseñas.

137
00:07:18,360 --> 00:07:23,360
Ahora aquí podríamos recuperar esta función que hicimos antes.

138
00:07:23,850 --> 00:07:25,023
Copiemos eso.

139
00:07:29,310 --> 00:07:34,200
Y luego llamemos a getTotalReviewCount

140
00:07:34,200 --> 00:07:35,373
para el libro actual.

141
00:07:37,410 --> 00:07:41,610
Y ahora, sí, obtenemos todos los datos que queríamos,

142
00:07:41,610 --> 00:07:43,470
pero nuevamente son solo los datos esenciales,

143
00:07:43,470 --> 00:07:47,160
Básicamente solo una pequeña parte de los datos totales.

144
00:07:47,160 --> 00:07:50,100
que teníamos antes en la matriz de libros.

145
00:07:50,100 --> 00:07:53,220
Estos son sólo algunos casos de uso que se convertirán en

146
00:07:53,220 --> 00:07:56,550
útil para el resto del curso de React.

147
00:07:56,550 --> 00:07:59,520
Y si esto fue quizás demasiado rápido,

148
00:07:59,520 --> 00:08:01,980
Entonces, si no conocías este método de mapa antes

149
00:08:01,980 --> 00:08:04,623
y aún no lo entendiste del todo,

150
00:08:05,490 --> 00:08:07,830
eso es comprensible porque esto era más

151
00:08:07,830 --> 00:08:11,190
de un curso intensivo sobre este método de mapas.

152
00:08:11,190 --> 00:08:14,310
Y si de alguna manera aún no te ha hecho clic,

153
00:08:14,310 --> 00:08:17,880
puedes consultar la documentación en MDN.

154
00:08:17,880 --> 00:08:20,160
O por supuesto, también puedes consultar

155
00:08:20,160 --> 00:08:21,930
mi curso completo de JavaScript

156
00:08:21,930 --> 00:08:25,170
porque ahí te lo explico todo con mucho más detalle.

157
00:08:25,170 --> 00:08:27,660
Pero para esta breve introducción, esto debería ser suficiente.

158
00:08:27,660 --> 00:08:28,860
Y ahora sigamos adelante

159
00:08:28,860 --> 00:08:32,493
al siguiente método importante, que es el método de filtrado.