1
00:00:01,150 --> 00:00:04,410
Como introducción a esta sección de teoría,

2
00:00:04,410 --> 00:00:06,720
quiero empezar con una muy chula

3
00:00:06,720 --> 00:00:11,190
y una visión general de muy alto nivel sobre el lenguaje JavaScript.

4
00:00:11,190 --> 00:00:13,480
Solo para que tengas una primera visión general

5
00:00:13,480 --> 00:00:16,380
de la mayoría de las cosas que necesitamos aprender

6
00:00:16,380 --> 00:00:19,830
para eventualmente dominar JavaScript.

7
00:00:19,830 --> 00:00:22,520
Y esto va a ser una conferencia larga,

8
00:00:22,520 --> 00:00:25,303
así que prepárate para un viaje loco.

9
00:00:27,400 --> 00:00:30,860
Y quiero empezar volviendo a esa primera definición

10
00:00:30,860 --> 00:00:33,300
que te di en JavaScript,

11
00:00:33,300 --> 00:00:35,370
donde te dije que JavaScript

12
00:00:35,370 --> 00:00:37,890
es un programa de alto nivel, orientado a objetos,

13
00:00:37,890 --> 00:00:40,980
Lenguaje de programación multiparadigma.

14
00:00:40,980 --> 00:00:44,140
Ahora bien, esto es, por supuesto, 100% correcto,

15
00:00:44,140 --> 00:00:47,170
pero también es realmente solo la superficie,

16
00:00:47,170 --> 00:00:49,610
la punta del iceberg.

17
00:00:49,610 --> 00:00:53,020
Entonces, ¿qué pasa con esta definición?

18
00:00:53,020 --> 00:00:55,700
JavaScript es un programa de alto nivel, basado en prototipos,

19
00:00:55,700 --> 00:00:57,710
orientado a objetos, multiparadigma,

20
00:00:57,710 --> 00:01:00,740
interpretado o compilado justo a tiempo,

21
00:01:00,740 --> 00:01:02,120
dinámico, de un solo subproceso,

22
00:01:02,120 --> 00:01:04,090
lenguaje de programación recolectado de basura

23
00:01:04,090 --> 00:01:06,000
con funciones de primera clase

24
00:01:06,000 --> 00:01:10,050
y un modelo de concurrencia de bucle de eventos sin bloqueo.

25
00:01:10,050 --> 00:01:11,760
¿Esperar lo?

26
00:01:11,760 --> 00:01:14,090
¿Es esto algún tipo de broma?

27
00:01:14,090 --> 00:01:17,600
Bueno, sí, en realidad es un poco,

28
00:01:17,600 --> 00:01:20,280
Acabo de empaquetar la mayor cantidad de información posible.

29
00:01:20,280 --> 00:01:25,280
sobre JavaScript en una oración ilegible, solo por diversión,

30
00:01:25,970 --> 00:01:27,790
pero además de diversión,

31
00:01:27,790 --> 00:01:30,600
esto también nos da una gran oportunidad

32
00:01:30,600 --> 00:01:34,960
para desempaquetar todo esto con el fin de obtener un primer vistazo

33
00:01:34,960 --> 00:01:38,380
en todo lo que vamos a aprender sobre JavaScript

34
00:01:38,380 --> 00:01:40,010
A lo largo del curso.

35
00:01:40,010 --> 00:01:44,210
Y esto no es para intimidarte. Realmente no lo es.

36
00:01:44,210 --> 00:01:46,550
Solo quiero que tengas una idea general

37
00:01:46,550 --> 00:01:48,960
antes de empezar realmente

38
00:01:48,960 --> 00:01:51,170
y también introducir algunos temas

39
00:01:51,170 --> 00:01:53,420
que es bueno saber,

40
00:01:53,420 --> 00:01:56,910
porque tener una visión general antes de profundizar

41
00:01:56,910 --> 00:02:00,920
es, en mi opinión, una técnica de aprendizaje asombrosa.

42
00:02:00,920 --> 00:02:05,083
Entonces, dicho esto, analicemos esto ahora un poco.

43
00:02:06,130 --> 00:02:08,390
Estos son los nueve temas de JavaScript

44
00:02:08,390 --> 00:02:11,630
que vamos a hablar brevemente en esta conferencia,

45
00:02:11,630 --> 00:02:12,933
ligeramente reordenado.

46
00:02:13,820 --> 00:02:16,700
Y comenzando con la parte de alto nivel,

47
00:02:16,700 --> 00:02:18,180
como ya sabrás,

48
00:02:18,180 --> 00:02:20,940
todos los programas que se ejecutan en su computadora

49
00:02:20,940 --> 00:02:23,530
necesita algunos recursos de hardware,

50
00:02:23,530 --> 00:02:28,000
como la memoria y la CPU para hacer su trabajo.

51
00:02:28,000 --> 00:02:31,980
Ahora, hay lenguajes de bajo nivel, como C,

52
00:02:31,980 --> 00:02:35,360
donde tienes que gestionar manualmente estos recursos.

53
00:02:35,360 --> 00:02:36,210
Por ejemplo,

54
00:02:36,210 --> 00:02:40,630
pidiéndole a la computadora memoria para crear una nueva variable.

55
00:02:40,630 --> 00:02:41,810
Por otro lado,

56
00:02:41,810 --> 00:02:46,470
tienes lenguajes de alto nivel como JavaScript y Python,

57
00:02:46,470 --> 00:02:49,880
donde no tenemos que administrar los recursos en absoluto

58
00:02:49,880 --> 00:02:53,660
porque estos lenguajes tienen las llamadas abstracciones

59
00:02:53,660 --> 00:02:56,560
que nos quitan todo ese trabajo.

60
00:02:56,560 --> 00:02:59,700
Esto hace que el idioma sea más fácil de aprender y usar,

61
00:02:59,700 --> 00:03:03,710
pero la desventaja es que los programas nunca serán tan rápidos

62
00:03:03,710 --> 00:03:08,170
o tan optimizado como por ejemplo, los programas en C.

63
00:03:08,170 --> 00:03:10,170
Ahora, una de las poderosas herramientas

64
00:03:10,170 --> 00:03:13,530
eso nos quita la gestión de la memoria a los desarrolladores

65
00:03:13,530 --> 00:03:15,690
es la recolección de basura,

66
00:03:15,690 --> 00:03:17,700
que es básicamente un algoritmo

67
00:03:17,700 --> 00:03:19,780
dentro del motor JavaScript,

68
00:03:19,780 --> 00:03:23,370
que elimina automáticamente los objetos viejos y sin usar

69
00:03:23,370 --> 00:03:24,970
de la memoria de la computadora

70
00:03:24,970 --> 00:03:29,430
para no obstruirlo con cosas innecesarias.

71
00:03:29,430 --> 00:03:33,490
Así que es un poco como si JavaScript tuviera un tipo de limpieza

72
00:03:33,490 --> 00:03:36,750
quien limpia nuestra memoria de vez en cuando

73
00:03:36,750 --> 00:03:40,350
para que no tengamos que hacerlo manualmente en nuestro código.

74
00:03:40,350 --> 00:03:43,440
A continuación, JavaScript es un interpretado

75
00:03:43,440 --> 00:03:46,620
o lenguaje compilado justo a tiempo.

76
00:03:46,620 --> 00:03:50,070
Y nuevamente, aprenderemos más sobre esto en esta sección,

77
00:03:50,070 --> 00:03:51,990
pero lo que necesitas saber por ahora

78
00:03:51,990 --> 00:03:54,080
es que el procesador de la computadora

79
00:03:54,080 --> 00:03:58,750
solo entiende ceros y unos, así es.

80
00:03:58,750 --> 00:04:01,880
En última instancia, cada programa debe escribirse

81
00:04:01,880 --> 00:04:06,840
en ceros y unos, que también se llama código máquina.

82
00:04:06,840 --> 00:04:10,860
Y dado que eso no es realmente práctico de escribir, ¿verdad?

83
00:04:10,860 --> 00:04:14,630
Simplemente escribimos código JavaScript legible por humanos,

84
00:04:14,630 --> 00:04:18,020
que es una abstracción sobre código máquina,

85
00:04:18,020 --> 00:04:21,020
pero este código eventualmente necesita ser traducido

86
00:04:21,020 --> 00:04:22,590
al código máquina.

87
00:04:22,590 --> 00:04:25,330
Y ese paso puede ser compilar

88
00:04:25,330 --> 00:04:27,370
o interpretando.

89
00:04:27,370 --> 00:04:31,220
Este paso es necesario en todos los lenguajes de programación.

90
00:04:31,220 --> 00:04:34,700
porque nadie escribe código de máquina manualmente.

91
00:04:34,700 --> 00:04:36,360
En el caso de JavaScript,

92
00:04:36,360 --> 00:04:39,283
esto sucede dentro del motor de JavaScript.

93
00:04:40,500 --> 00:04:44,380
Ahora, una de las cosas que hace que JavaScript sea tan popular

94
00:04:44,380 --> 00:04:48,150
es el hecho de que es un lenguaje multiparadigma.

95
00:04:48,150 --> 00:04:51,400
En programación, un paradigma es un enfoque

96
00:04:51,400 --> 00:04:55,100
y una mentalidad general de estructurar nuestro código,

97
00:04:55,100 --> 00:04:59,060
que en última instancia dirigirá el estilo y la técnica de codificación

98
00:04:59,060 --> 00:05:02,920
en un proyecto que utiliza un determinado paradigma.

99
00:05:02,920 --> 00:05:06,450
Y esta definición todavía suena un poco abstracta,

100
00:05:06,450 --> 00:05:07,580
pero no te preocupes,

101
00:05:07,580 --> 00:05:10,223
se volverá más claro a medida que avancemos.

102
00:05:11,100 --> 00:05:13,610
Ahora, tres paradigmas populares son;

103
00:05:13,610 --> 00:05:16,090
procedimental, orientado a objetos,

104
00:05:16,090 --> 00:05:18,440
y programación funcional.

105
00:05:18,440 --> 00:05:22,400
Así que la programación procedimental es lo que hemos estado haciendo hasta ahora,

106
00:05:22,400 --> 00:05:25,230
que es básicamente solo organizar el código

107
00:05:25,230 --> 00:05:27,350
de una manera muy lineal,

108
00:05:27,350 --> 00:05:30,320
y luego con algunas funciones intermedias.

109
00:05:30,320 --> 00:05:32,310
Ahora sobre la programación orientada a objetos

110
00:05:32,310 --> 00:05:33,970
y programación funcional,

111
00:05:33,970 --> 00:05:36,470
Hablaré de ellos en un segundo.

112
00:05:36,470 --> 00:05:40,440
Además, podemos clasificar los paradigmas como imperativos.

113
00:05:40,440 --> 00:05:45,280
o como declarativo, pero nuevamente, más sobre eso más adelante.

114
00:05:45,280 --> 00:05:48,430
Ahora, muchos lenguajes son solo procedimentales

115
00:05:48,430 --> 00:05:50,500
o solo orientado a objetos

116
00:05:50,500 --> 00:05:52,280
o solo funcional,

117
00:05:52,280 --> 00:05:55,020
pero JavaScript lo hace todo.

118
00:05:55,020 --> 00:05:58,190
Así que es realmente flexible y versátil.

119
00:05:58,190 --> 00:06:01,520
Y entonces podemos hacer realmente lo que queramos con él.

120
00:06:01,520 --> 00:06:05,380
Es nuestra elección. Podemos usar cualquier paradigma que queramos.

121
00:06:05,380 --> 00:06:08,703
Y en este curso, te mostraré cómo usarlos todos.

122
00:06:09,810 --> 00:06:13,620
Entonces, sobre la naturaleza orientada a objetos de JavaScript,

123
00:06:13,620 --> 00:06:17,840
es un enfoque basado en prototipos y orientado a objetos.

124
00:06:17,840 --> 00:06:19,670
Ahora, ¿qué significa eso?

125
00:06:19,670 --> 00:06:24,670
Bueno, primero, casi todo en JavaScript es un objeto,

126
00:06:24,750 --> 00:06:26,900
a excepción de los valores primitivos

127
00:06:26,900 --> 00:06:30,040
como números, cadenas, etcétera.

128
00:06:30,040 --> 00:06:33,230
Pero las matrices, por ejemplo, son solo objetos.

129
00:06:33,230 --> 00:06:36,640
Y eso ya lo vimos en la práctica, ¿no?

130
00:06:36,640 --> 00:06:40,760
Ahora, ¿alguna vez te has preguntado por qué podemos crear una matriz

131
00:06:40,760 --> 00:06:44,640
y luego usar el método push en él, por ejemplo?

132
00:06:44,640 --> 00:06:48,840
Bueno, es por la herencia prototípica.

133
00:06:48,840 --> 00:06:53,140
Básicamente, creamos matrices a partir de un modelo de matriz,

134
00:06:53,140 --> 00:06:57,480
que es como una plantilla y esto se llama el prototipo.

135
00:06:57,480 --> 00:07:01,170
Este prototipo contiene todos los métodos de matriz.

136
00:07:01,170 --> 00:07:03,860
y las matrices que creamos en nuestro código

137
00:07:03,860 --> 00:07:07,380
luego heredar los métodos del modelo

138
00:07:07,380 --> 00:07:10,640
para que podamos usarlos en las matrices.

139
00:07:10,640 --> 00:07:12,600
Y esto, lo que te acabo de explicar

140
00:07:12,600 --> 00:07:15,880
es en realidad una gran simplificación,

141
00:07:15,880 --> 00:07:18,560
lo que aún puede sonar confuso.

142
00:07:18,560 --> 00:07:21,540
Y esa es la razón por la que hay una sección completa

143
00:07:21,540 --> 00:07:24,710
sobre programación orientada a objetos con JavaScript

144
00:07:24,710 --> 00:07:26,510
más adelante en el curso.

145
00:07:26,510 --> 00:07:29,040
Pero dado que esta es una gran conferencia general,

146
00:07:29,040 --> 00:07:32,623
Primero quería presentar este tema aquí.

147
00:07:33,850 --> 00:07:36,160
A continuación, JavaScript es un lenguaje

148
00:07:36,160 --> 00:07:38,440
con funciones de primera clase,

149
00:07:38,440 --> 00:07:40,410
lo que simplemente significa que funciona

150
00:07:40,410 --> 00:07:43,600
se tratan como variables regulares.

151
00:07:43,600 --> 00:07:47,130
Entonces, podemos pasar funciones a otras funciones.

152
00:07:47,130 --> 00:07:50,870
e incluso podemos devolver funciones desde funciones.

153
00:07:50,870 --> 00:07:53,240
Y esto es extremadamente poderoso.

154
00:07:53,240 --> 00:07:57,480
porque nos permite usar muchas técnicas poderosas

155
00:07:57,480 --> 00:08:01,090
y también permite la programación funcional,

156
00:08:01,090 --> 00:08:02,740
que es uno de los paradigmas

157
00:08:02,740 --> 00:08:05,230
que acabamos de hablar antes.

158
00:08:05,230 --> 00:08:06,370
Y de hecho,

159
00:08:06,370 --> 00:08:10,100
ya hemos usado el poder de las funciones de primera clase

160
00:08:10,100 --> 00:08:14,440
sin saber que se llaman funciones de primera clase.

161
00:08:14,440 --> 00:08:17,850
Así que recuerda este fragmento de código que escribimos

162
00:08:17,850 --> 00:08:21,060
para cerrar la ventana modal que construimos antes.

163
00:08:21,060 --> 00:08:24,320
Así que aquí, pasamos la función closeModal

164
00:08:24,320 --> 00:08:26,770
en la función addEventListener

165
00:08:26,770 --> 00:08:30,453
como si fuera solo una variable regular, ¿no?

166
00:08:31,400 --> 00:08:35,740
Y en realidad no todos los lenguajes tienen funciones de primera clase,

167
00:08:35,740 --> 00:08:39,100
pero JavaScript tiene, y es increíble.

168
00:08:39,100 --> 00:08:41,623
Créeme, es muy, muy útil.

169
00:08:43,130 --> 00:08:47,580
A continuación, dije que JavaScript es un lenguaje dinámico.

170
00:08:47,580 --> 00:08:51,170
y dinámico en realidad significa tipado dinámicamente.

171
00:08:51,170 --> 00:08:53,040
Entonces, como ya hemos visto,

172
00:08:53,040 --> 00:08:57,720
en JavaScript, no asignamos tipos de datos a las variables.

173
00:08:57,720 --> 00:08:59,980
En cambio, solo se dieron a conocer

174
00:08:59,980 --> 00:09:04,130
cuando el motor JavaScript ejecuta nuestro código.

175
00:09:04,130 --> 00:09:07,650
Además, el tipo de variables se puede cambiar fácilmente.

176
00:09:07,650 --> 00:09:10,100
a medida que reasignamos variables.

177
00:09:10,100 --> 00:09:14,300
Y esto es básicamente lo que significa dinámicamente tipado.

178
00:09:14,300 --> 00:09:18,670
Ahora hay mucha controversia si esto es bueno o malo,

179
00:09:18,670 --> 00:09:21,340
pero así es como funciona.

180
00:09:21,340 --> 00:09:23,050
Ahora, lo mismo no es cierto.

181
00:09:23,050 --> 00:09:25,540
para la mayoría de los otros lenguajes de programación,

182
00:09:25,540 --> 00:09:29,450
donde tenemos que asignar tipos manualmente a las variables.

183
00:09:29,450 --> 00:09:32,970
Y esto generalmente evita que ocurran errores,

184
00:09:32,970 --> 00:09:36,430
que es la razón por la que mucha gente dice que JavaScript

185
00:09:36,430 --> 00:09:39,920
también debe ser un lenguaje fuertemente tipado.

186
00:09:39,920 --> 00:09:43,800
Y si usted mismo quiere usar JavaScript con tipos,

187
00:09:43,800 --> 00:09:46,513
entonces siempre puedes buscar en TypeScript.

188
00:09:47,420 --> 00:09:51,300
Pero de todos modos, ahora hablemos finalmente sobre el hilo único

189
00:09:51,300 --> 00:09:55,270
y el modelo de concurrencia de bucle de eventos sin bloqueo.

190
00:09:55,270 --> 00:09:57,870
Ahora bien, este es un tema realmente complejo.

191
00:09:57,870 --> 00:10:01,420
y probablemente el más complejo de todo el curso,

192
00:10:01,420 --> 00:10:04,930
por eso es como al final del curso.

193
00:10:04,930 --> 00:10:05,780
Y por lo tanto,

194
00:10:05,780 --> 00:10:09,040
No voy a entrar en detalles aquí todavía,

195
00:10:09,040 --> 00:10:12,810
pero en lugar de eso solo definiré algunas cosas aquí.

196
00:10:12,810 --> 00:10:16,840
Primero, ¿qué es realmente un modelo de concurrencia?

197
00:10:16,840 --> 00:10:19,190
Bueno, es solo un término elegante.

198
00:10:19,190 --> 00:10:23,260
eso significa cómo el motor de JavaScript maneja múltiples tareas

199
00:10:23,260 --> 00:10:25,540
sucediendo al mismo tiempo.

200
00:10:25,540 --> 00:10:27,460
No, está bien. Eso es genial.

201
00:10:27,460 --> 00:10:30,180
Pero, ¿por qué necesitamos eso?

202
00:10:30,180 --> 00:10:35,180
Bueno, debido a que JavaScript se ejecuta en un único subproceso,

203
00:10:35,310 --> 00:10:39,040
lo que significa que solo puede hacer una cosa a la vez

204
00:10:39,040 --> 00:10:41,570
y por lo tanto necesitamos una forma de manejar

205
00:10:41,570 --> 00:10:44,930
varias cosas sucediendo al mismo tiempo.

206
00:10:44,930 --> 00:10:47,180
Y por cierto, en computación,

207
00:10:47,180 --> 00:10:50,280
un hilo es como un conjunto de instrucciones

208
00:10:50,280 --> 00:10:53,800
que se ejecuta en la CPU de la computadora.

209
00:10:53,800 --> 00:10:56,830
Básicamente, el hilo es donde nuestro código

210
00:10:56,830 --> 00:11:00,263
se ejecuta realmente en el procesador de una máquina.

211
00:11:01,120 --> 00:11:05,400
Está bien. Pero, ¿y si hay una tarea de larga duración,

212
00:11:05,400 --> 00:11:08,690
como obtener datos de un servidor remoto?

213
00:11:08,690 --> 00:11:12,410
Bueno, parece que eso bloquearía el hilo único.

214
00:11:12,410 --> 00:11:15,030
donde se ejecuta el código, ¿verdad?

215
00:11:15,030 --> 00:11:17,480
Pero por supuesto que no queremos eso.

216
00:11:17,480 --> 00:11:21,410
Lo que queremos es el llamado comportamiento sin bloqueo

217
00:11:21,410 --> 00:11:24,210
y ¿cómo logramos eso?

218
00:11:24,210 --> 00:11:27,680
Bueno, usando el llamado bucle de eventos.

219
00:11:27,680 --> 00:11:30,480
El bucle de eventos requiere tareas de larga duración,

220
00:11:30,480 --> 00:11:32,440
los ejecuta en segundo plano

221
00:11:32,440 --> 00:11:34,910
y luego los vuelve a poner en el hilo principal

222
00:11:34,910 --> 00:11:37,010
una vez que hayan terminado.

223
00:11:37,010 --> 00:11:38,430
Y esto es, en pocas palabras,

224
00:11:38,430 --> 00:11:42,040
Modelo de concurrencia de bucle de eventos sin bloqueo de JavaScript

225
00:11:42,040 --> 00:11:44,100
con un solo hilo.

226
00:11:44,100 --> 00:11:46,990
Suena como un bocado seguro

227
00:11:46,990 --> 00:11:47,823
pero al final,

228
00:11:47,823 --> 00:11:51,230
realmente solo se comprime a esto.

229
00:11:51,230 --> 00:11:53,160
Sólo tenga en cuenta que, de nuevo,

230
00:11:53,160 --> 00:11:57,373
esta es una gran simplificación a la que volveremos.

231
00:11:58,340 --> 00:11:59,230
Está bien.

232
00:11:59,230 --> 00:12:02,710
Y esto en realidad completa esta conferencia general.

233
00:12:02,710 --> 00:12:05,680
Sé que había un montón de cosas para asimilar,

234
00:12:05,680 --> 00:12:08,380
pero espero que todavía hayas aprendido una o dos cosas aquí.