1
00:00:00,930 --> 00:00:04,100
En esta conferencia, respondamos la pregunta.

2
00:00:04,100 --> 00:00:07,080
¿Cómo se ejecuta el código JavaScript?

3
00:00:07,080 --> 00:00:09,890
Ya sabemos que sucede en una pila de llamadas.

4
00:00:09,890 --> 00:00:13,373
en el motor, pero profundicemos un poco más ahora.

5
00:00:14,790 --> 00:00:15,750
y comencemos

6
00:00:15,750 --> 00:00:20,020
suponiendo que nuestro código acababa de terminar de compilarse.

7
00:00:20,020 --> 00:00:23,240
Justo en la forma en que aprendimos en la última lección.

8
00:00:23,240 --> 00:00:26,860
Entonces el código ahora está listo para ser ejecutado.

9
00:00:26,860 --> 00:00:28,160
Qué pasa entonces,

10
00:00:28,160 --> 00:00:32,890
es que se crea un llamado contexto de ejecución global

11
00:00:32,890 --> 00:00:35,280
para el código de nivel superior.

12
00:00:35,280 --> 00:00:38,860
Y el código de nivel superior es básicamente código que no es

13
00:00:38,860 --> 00:00:41,000
dentro de cualquier función.

14
00:00:41,000 --> 00:00:43,330
Así que de nuevo, al principio

15
00:00:43,330 --> 00:00:48,330
solo se ejecutará el código que esté fuera de funciones.

16
00:00:48,410 --> 00:00:50,530
Y esto tiene sentido, ¿verdad?

17
00:00:50,530 --> 00:00:54,370
Las funciones solo deben ejecutarse cuando se las llama.

18
00:00:54,370 --> 00:00:57,020
Y en realidad ya vimos que esto sucedía

19
00:00:57,020 --> 00:00:59,230
en nuestro proyecto de juego de cerdos.

20
00:00:59,230 --> 00:01:01,490
Así que ahí teníamos una función de inicio,

21
00:01:01,490 --> 00:01:04,400
que inicializó todo nuestro proyecto

22
00:01:04,400 --> 00:01:07,210
pero para poder inicializar el juego

23
00:01:07,210 --> 00:01:09,480
la primera vez que cargó la página,

24
00:01:09,480 --> 00:01:12,200
necesitábamos llamar a esa función inmediatamente

25
00:01:12,200 --> 00:01:14,160
en nuestro código de nivel superior.

26
00:01:14,160 --> 00:01:16,500
Y eso es lo que quiero decir aquí.

27
00:01:16,500 --> 00:01:18,490
Pero de todos modos, también podemos ver

28
00:01:18,490 --> 00:01:22,560
qué código de nivel superior es en este ejemplo aquí.

29
00:01:22,560 --> 00:01:24,860
Así que esta declaración de variable de nombre

30
00:01:24,860 --> 00:01:27,950
es claramente el código de nivel superior, ¿verdad?

31
00:01:27,950 --> 00:01:30,330
Y por lo tanto se ejecutará

32
00:01:30,330 --> 00:01:33,200
en el contexto de ejecución global.

33
00:01:33,200 --> 00:01:36,860
A continuación, tenemos dos funciones, una expresión,

34
00:01:36,860 --> 00:01:38,800
y una declaración.

35
00:01:38,800 --> 00:01:41,000
Así estos también serán declarados,

36
00:01:41,000 --> 00:01:43,230
para que puedan ser llamados más tarde.

37
00:01:43,230 --> 00:01:45,430
Pero el código dentro de las funciones,

38
00:01:45,430 --> 00:01:49,890
solo se ejecutará cuando se llame a las funciones.

39
00:01:49,890 --> 00:01:53,880
Bien, sabemos que un contexto de ejecución global

40
00:01:53,880 --> 00:01:56,910
se crea para el código de nivel superior.

41
00:01:56,910 --> 00:02:01,260
Pero ahora, ¿qué es exactamente un contexto de ejecución?

42
00:02:01,260 --> 00:02:05,410
Bueno, un contexto de ejecución es un concepto abstracto.

43
00:02:05,410 --> 00:02:08,400
Pero lo defino básicamente como un entorno

44
00:02:08,400 --> 00:02:12,510
en el que se ejecuta una pieza de JavaScript.

45
00:02:12,510 --> 00:02:16,700
Es como una caja que almacena toda la información necesaria.

46
00:02:16,700 --> 00:02:19,290
para que se ejecute algún código.

47
00:02:19,290 --> 00:02:24,290
Como variables locales o argumentos pasados ​​a una función.

48
00:02:24,590 --> 00:02:29,590
Entonces, el código JavaScript siempre se ejecuta dentro de un contexto de ejecución.

49
00:02:29,930 --> 00:02:32,340
Y para hacer esto un poco más intuitivo

50
00:02:32,340 --> 00:02:36,720
imaginemos que pides una pizza en una comida para llevar.

51
00:02:36,720 --> 00:02:41,050
Entonces, por lo general, esa pizza viene en una caja, ¿verdad?

52
00:02:41,050 --> 00:02:42,700
Y también puede venir

53
00:02:42,700 --> 00:02:45,440
con algunas otras cosas que son necesarias

54
00:02:45,440 --> 00:02:49,900
para que te comas una pizza como cubiertos o un recibo,

55
00:02:49,900 --> 00:02:54,150
para que puedas pagar la pizza antes de comerla.

56
00:02:54,150 --> 00:02:55,730
Entonces, en esta analogía,

57
00:02:55,730 --> 00:02:59,640
la pizza es el código JavaScript a ejecutar,

58
00:02:59,640 --> 00:03:03,070
y el cuadro es, por supuesto, el contexto de ejecución

59
00:03:03,070 --> 00:03:04,600
para nuestra pizza.

60
00:03:04,600 --> 00:03:08,820
Y eso es porque comer la pizza sucede dentro de la caja.

61
00:03:08,820 --> 00:03:12,830
que es entonces el ambiente para comer pizza.

62
00:03:12,830 --> 00:03:16,440
La caja también contiene cubiertos y el recibo,

63
00:03:16,440 --> 00:03:19,170
que son necesarios para comer una pizza

64
00:03:19,170 --> 00:03:23,970
o en otras palabras, para ejecutar el código, ¿de acuerdo?

65
00:03:23,970 --> 00:03:25,540
Espero que tenga sentido,

66
00:03:25,540 --> 00:03:28,380
y para hacer el concepto de contexto de ejecución

67
00:03:28,380 --> 00:03:30,700
un poco más claro.

68
00:03:30,700 --> 00:03:35,150
Ahora, en cualquier proyecto de JavaScript, sin importar cuán grande sea,

69
00:03:35,150 --> 00:03:39,030
solo hay un contexto de ejecución global.

70
00:03:39,030 --> 00:03:41,830
Siempre está ahí como el contexto predeterminado,

71
00:03:41,830 --> 00:03:45,250
y es donde se ejecutará el código de nivel superior.

72
00:03:45,250 --> 00:03:47,160
Y hablando de ejecutar,

73
00:03:47,160 --> 00:03:49,270
ahora que tenemos un ambiente

74
00:03:49,270 --> 00:03:52,300
donde se puede ejecutar el código de nivel superior,

75
00:03:52,300 --> 00:03:54,600
finalmente se ejecuta.

76
00:03:54,600 --> 00:03:59,420
Y no hay mucho que decir sobre la ejecución en sí.

77
00:03:59,420 --> 00:04:02,500
Es solo el procesamiento de la CPU de la computadora

78
00:04:02,500 --> 00:04:05,690
el código de máquina que recibió.

79
00:04:05,690 --> 00:04:08,290
Vale, y una vez este el primer código,

80
00:04:08,290 --> 00:04:11,100
por lo que el nivel superior del código está terminado,

81
00:04:11,100 --> 00:04:14,950
las funciones finalmente comienzan a ejecutarse también.

82
00:04:14,950 --> 00:04:16,850
Y así es como funciona.

83
00:04:16,850 --> 00:04:18,813
Para todas y cada una de las llamadas a funciones,

84
00:04:18,813 --> 00:04:22,120
y se creará su contexto de ejecución

85
00:04:22,120 --> 00:04:25,280
que contiene toda la información necesaria

86
00:04:25,280 --> 00:04:28,070
para ejecutar exactamente esa función.

87
00:04:28,070 --> 00:04:30,880
Y lo mismo ocurre con los métodos, por supuesto,

88
00:04:30,880 --> 00:04:32,750
porque son simplemente funciones

89
00:04:32,750 --> 00:04:36,180
adjunto a los objetos ¿recuerdas?

90
00:04:36,180 --> 00:04:39,590
De todos modos, todos estos contextos de ejecución juntos,

91
00:04:39,590 --> 00:04:42,630
componen la pila de llamadas que mencioné antes.

92
00:04:42,630 --> 00:04:44,943
Pero más sobre eso en un segundo.

93
00:04:45,880 --> 00:04:49,030
Ahora, cuando todas las funciones hayan terminado de ejecutarse,

94
00:04:49,030 --> 00:04:51,300
el motor básicamente seguirá esperando

95
00:04:51,300 --> 00:04:53,810
para que lleguen las funciones de devolución de llamada

96
00:04:53,810 --> 00:04:56,150
para que pueda ejecutarlos.

97
00:04:56,150 --> 00:04:59,130
Por ejemplo, una función de devolución de llamada asociada

98
00:04:59,130 --> 00:05:01,330
con un evento de clic.

99
00:05:01,330 --> 00:05:04,700
Y recuerda, que es el bucle de eventos quien proporciona

100
00:05:04,700 --> 00:05:06,660
estas nuevas funciones de devolución de llamada

101
00:05:06,660 --> 00:05:08,723
como aprendimos en la última lección.

102
00:05:09,630 --> 00:05:10,580
Está bien.

103
00:05:10,580 --> 00:05:14,150
Ahora sabemos qué es un contexto de ejecución,

104
00:05:14,150 --> 00:05:16,930
pero no sé muy bien de qué está hecho.

105
00:05:16,930 --> 00:05:18,970
Entonces, ¿qué hay dentro de él?

106
00:05:18,970 --> 00:05:21,143
Y entonces, averigüemos eso a continuación.

107
00:05:22,490 --> 00:05:26,420
Y lo primero que está dentro de cualquier contexto de ejecución

108
00:05:26,420 --> 00:05:29,760
es un llamado entorno variable.

109
00:05:29,760 --> 00:05:31,120
En este entorno,

110
00:05:31,120 --> 00:05:34,920
todas nuestras variables y declaraciones de funciones se almacenan,

111
00:05:34,920 --> 00:05:38,330
y también hay un objeto de argumentos especiales.

112
00:05:38,330 --> 00:05:39,940
Este objeto contiene,

113
00:05:39,940 --> 00:05:43,150
como su nombre lo dice todos los argumentos que se pasaron

114
00:05:43,150 --> 00:05:46,500
en la función que el contexto de ejecución actual

115
00:05:46,500 --> 00:05:47,900
pertenece a.

116
00:05:47,900 --> 00:05:50,530
Porque recuerda cada función

117
00:05:50,530 --> 00:05:53,110
obtiene su propio contexto de ejecución

118
00:05:53,110 --> 00:05:56,280
tan pronto como se llame a la función.

119
00:05:56,280 --> 00:05:58,380
Así que básicamente todas las variables

120
00:05:58,380 --> 00:06:01,610
que de alguna manera se declaran dentro de una función,

121
00:06:01,610 --> 00:06:04,830
terminará en su entorno variable.

122
00:06:04,830 --> 00:06:08,120
Sin embargo, una función también puede acceder a variables.

123
00:06:08,120 --> 00:06:10,210
fuera de la función.

124
00:06:10,210 --> 00:06:12,920
Y eso ya lo hemos visto en acción.

125
00:06:12,920 --> 00:06:14,260
a lo largo de este curso,

126
00:06:14,260 --> 00:06:17,830
especialmente en los proyectos del apartado anterior.

127
00:06:17,830 --> 00:06:22,150
Y esto funciona debido a algo llamado cadena de alcance.

128
00:06:22,150 --> 00:06:24,040
Y aprenderemos todo sobre el alcance

129
00:06:24,040 --> 00:06:26,680
y la cadena de alcance más adelante en la sección.

130
00:06:26,680 --> 00:06:28,590
Pero por ahora, lo que necesitas saber

131
00:06:28,590 --> 00:06:31,850
es que la cadena de alcance consiste básicamente en

132
00:06:31,850 --> 00:06:34,810
referencias a variables que se encuentran

133
00:06:34,810 --> 00:06:37,440
fuera de la función actual.

134
00:06:37,440 --> 00:06:39,880
Y para realizar un seguimiento de la cadena de alcance,

135
00:06:39,880 --> 00:06:43,260
se almacena en cada contexto de ejecución.

136
00:06:43,260 --> 00:06:47,290
Finalmente, cada contexto también obtiene una variable especial

137
00:06:47,290 --> 00:06:49,580
llamó a esta palabra clave.

138
00:06:49,580 --> 00:06:52,110
Y una vez más, hay una conferencia especial.

139
00:06:52,110 --> 00:06:55,960
casi la palabra clave this más adelante en la sección.

140
00:06:55,960 --> 00:06:57,000
Bueno.

141
00:06:57,000 --> 00:07:00,270
Ahora, el contenido del contexto de ejecución,

142
00:07:00,270 --> 00:07:03,490
entorno tan variable, cadena de alcance

143
00:07:03,490 --> 00:07:08,490
y esta palabra clave se genera en una llamada fase de creación.

144
00:07:08,640 --> 00:07:11,453
Lo que sucede justo antes de la ejecución.

145
00:07:12,350 --> 00:07:14,070
Y ahora solo una final

146
00:07:14,070 --> 00:07:17,610
pero un detalle muy importante que debemos tener en cuenta,

147
00:07:17,610 --> 00:07:22,160
es que los contextos de ejecución pertenecientes a funciones de flecha,

148
00:07:22,160 --> 00:07:25,040
no obtenga sus propios argumentos palabra clave,

149
00:07:25,040 --> 00:07:29,420
ni obtienen la palabra clave this, ¿de acuerdo?

150
00:07:29,420 --> 00:07:31,530
Entonces, básicamente funciones de flecha

151
00:07:31,530 --> 00:07:33,900
no tiene el objeto argumentos

152
00:07:33,900 --> 00:07:35,720
y la palabra clave this.

153
00:07:35,720 --> 00:07:38,570
En su lugar, pueden usar el objeto arguments,

154
00:07:38,570 --> 00:07:39,990
y esta palabra clave

155
00:07:39,990 --> 00:07:43,740
de su padre de función regular más cercano.

156
00:07:43,740 --> 00:07:46,990
Y este es un detalle extremadamente importante para recordar.

157
00:07:46,990 --> 00:07:51,310
sobre las funciones de flecha y volveremos a ello más adelante.

158
00:07:51,310 --> 00:07:52,840
Entonces estas son las cosas

159
00:07:52,840 --> 00:07:56,080
que son necesarios para ejecutar cada función

160
00:07:56,080 --> 00:07:59,300
así como el código en el nivel superior.

161
00:07:59,300 --> 00:08:03,250
Ahora, detrás de escena, en realidad es aún más complejo.

162
00:08:03,250 --> 00:08:07,250
pero creo que estamos bien así, ¿no?

163
00:08:07,250 --> 00:08:11,240
Y ahora intentemos simular la fase de creación.

164
00:08:11,240 --> 00:08:13,810
para este ejemplo de código aquí.

165
00:08:13,810 --> 00:08:16,610
Entonces, como es de esperar que sepa, a estas alturas,

166
00:08:16,610 --> 00:08:19,710
obtendremos un contexto de ejecución global

167
00:08:19,710 --> 00:08:21,670
y uno para cada función.

168
00:08:21,670 --> 00:08:23,970
Así que uno para la primera función,

169
00:08:23,970 --> 00:08:26,970
y uno para la segunda función.

170
00:08:26,970 --> 00:08:28,350
En el contexto mundial,

171
00:08:28,350 --> 00:08:31,560
tenemos la declaración de variable de nombre,

172
00:08:31,560 --> 00:08:34,200
las declaraciones de la primera y segunda función,

173
00:08:34,200 --> 00:08:37,900
así como la declaración de la variable X.

174
00:08:37,900 --> 00:08:40,580
Para las funciones, la variable entorno.

175
00:08:40,580 --> 00:08:43,180
literalmente contendrá todo el código

176
00:08:43,180 --> 00:08:45,520
de una función particular.

177
00:08:45,520 --> 00:08:49,530
Ahora el valor de X está marcado como desconocido aquí,

178
00:08:49,530 --> 00:08:51,950
porque este valor es el resultado

179
00:08:51,950 --> 00:08:55,350
de la primera función que aún no ejecutamos.

180
00:08:55,350 --> 00:08:58,810
Pero simularemos esto en la siguiente diapositiva.

181
00:08:58,810 --> 00:09:03,120
Ahora, técnicamente, ninguno de estos valores se conoce realmente.

182
00:09:03,120 --> 00:09:07,670
durante la fase de creación, pero sólo en la fase de ejecución.

183
00:09:07,670 --> 00:09:10,660
Así que esto no es 100% exacto aquí,

184
00:09:10,660 --> 00:09:12,850
pero es solo para ilustrar

185
00:09:12,850 --> 00:09:15,760
cómo funcionan estos contextos de ejecución.

186
00:09:15,760 --> 00:09:18,750
¿Bueno? Así que tenlo en cuenta.

187
00:09:18,750 --> 00:09:21,270
De todos modos, ahora en la primera función,

188
00:09:21,270 --> 00:09:25,430
tenemos la variable a establecida en 1 y la variable b

189
00:09:25,430 --> 00:09:28,350
que una vez más requiere una llamada de función

190
00:09:28,350 --> 00:09:30,620
para darse a conocer.

191
00:09:30,620 --> 00:09:34,550
Finalmente, la variable entorno de la segunda función,

192
00:09:34,550 --> 00:09:37,470
contiene la variable C establecida en 2,

193
00:09:37,470 --> 00:09:40,300
y como esta es una función irregular,

194
00:09:40,300 --> 00:09:45,300
así que no es una función de flecha, también tiene el objeto de argumentos.

195
00:09:45,730 --> 00:09:48,010
Y este objeto es una matriz,

196
00:09:48,010 --> 00:09:51,160
que contiene todos los argumentos que se pasaron

197
00:09:51,160 --> 00:09:53,830
en la función cuando fue llamada.

198
00:09:53,830 --> 00:09:58,270
En este caso, como puede ver, son 7 y 9.

199
00:09:58,270 --> 00:10:00,380
Bastante simple, ¿verdad?

200
00:10:00,380 --> 00:10:04,180
Bueno, es simple porque este es un extremadamente pequeño

201
00:10:04,180 --> 00:10:05,660
cantidad de código.

202
00:10:05,660 --> 00:10:09,500
Pero ahora imagina que hay cientos de contextos de ejecución

203
00:10:09,500 --> 00:10:11,680
para cientos de funciones.

204
00:10:11,680 --> 00:10:13,800
¿Cómo hará el seguimiento el motor?

205
00:10:13,800 --> 00:10:17,020
del orden en que funciones nos llaman?

206
00:10:17,020 --> 00:10:19,890
¿Y cómo sabrá dónde se encuentra actualmente?

207
00:10:19,890 --> 00:10:21,750
en la ejecución?

208
00:10:21,750 --> 00:10:25,403
Bueno, ahí es donde finalmente entra la pila de llamadas.

209
00:10:26,530 --> 00:10:28,500
Y recuerda que la pila de llamadas,

210
00:10:28,500 --> 00:10:30,710
junto con el montón de memoria,

211
00:10:30,710 --> 00:10:33,950
constituye el propio motor de JavaScript.

212
00:10:33,950 --> 00:10:37,270
Pero, ¿qué es realmente la pila de llamadas?

213
00:10:37,270 --> 00:10:41,440
Bueno, básicamente es un lugar donde los contextos de ejecución

214
00:10:41,440 --> 00:10:44,450
apilarse uno encima del otro,

215
00:10:44,450 --> 00:10:45,770
para hacer un seguimiento

216
00:10:45,770 --> 00:10:49,564
de dónde estamos en la ejecución de los programas.

217
00:10:49,564 --> 00:10:53,190
Entonces, el contexto de ejecución que está en la parte superior de la pila,

218
00:10:53,190 --> 00:10:55,660
es el que se está ejecutando actualmente.

219
00:10:55,660 --> 00:10:57,400
Y cuando termine de ejecutarse,

220
00:10:57,400 --> 00:10:59,620
será eliminado de la pila,

221
00:10:59,620 --> 00:11:01,400
y la ejecución volverá

222
00:11:01,400 --> 00:11:04,270
al contexto de ejecución anterior.

223
00:11:04,270 --> 00:11:06,780
Y usando la analogía de antes,

224
00:11:06,780 --> 00:11:10,470
es como si compraras pizzas con unos amigos.

225
00:11:10,470 --> 00:11:14,540
Cada amigo tiene una caja de pizza, y luego pones las cajas

226
00:11:14,540 --> 00:11:17,490
uno encima del otro, formando una pila,

227
00:11:17,490 --> 00:11:21,093
con el fin de realizar un seguimiento, qué pizza pertenece a cada amigo.

228
00:11:21,980 --> 00:11:25,450
Ahora, todo esto suena un poco abstracto, ¿no?

229
00:11:25,450 --> 00:11:28,480
Y para demostrar cómo funciona la pila de llamadas,

230
00:11:28,480 --> 00:11:31,760
analicemos juntos este ejemplo de código,

231
00:11:31,760 --> 00:11:35,520
para que pueda mostrarte exactamente lo que sucede.

232
00:11:35,520 --> 00:11:38,200
Entonces, una vez compilado el código,

233
00:11:38,200 --> 00:11:41,510
el código de nivel superior comenzará a ejecutarse.

234
00:11:41,510 --> 00:11:44,690
Y luego, como aprendimos al comienzo de la conferencia,

235
00:11:44,690 --> 00:11:47,940
se creará un contexto de ejecución global

236
00:11:47,940 --> 00:11:50,850
para el nivel superior de código, ¿verdad?

237
00:11:50,850 --> 00:11:54,260
Así que aquí es donde todo el código fuera de cualquier función

238
00:11:54,260 --> 00:11:56,270
será ejecutado.

239
00:11:56,270 --> 00:11:59,800
¿Y qué sucede con este contexto de ejecución?

240
00:11:59,800 --> 00:12:03,113
Así es, se pondrá en la pila de llamadas.

241
00:12:04,120 --> 00:12:07,980
Y dado que este contexto ahora está en la parte superior de la pila,

242
00:12:07,980 --> 00:12:12,370
es aquel donde el código se está ejecutando actualmente.

243
00:12:12,370 --> 00:12:16,120
Entonces, continuemos ahora con esta ejecución.

244
00:12:16,120 --> 00:12:19,990
Así que aquí hay una declaración de variable simple.

245
00:12:19,990 --> 00:12:24,990
Y luego se declaran la primera y la segunda funciones.

246
00:12:25,200 --> 00:12:29,950
Así que nada especial, pero así es como el código de nivel superior normal

247
00:12:29,950 --> 00:12:31,640
se ejecuta

248
00:12:31,640 --> 00:12:33,930
Pero luego, en la última línea

249
00:12:33,930 --> 00:12:36,750
es donde las cosas empiezan a ponerse interesantes.

250
00:12:36,750 --> 00:12:39,320
Aquí, declaramos la variable X,

251
00:12:39,320 --> 00:12:41,840
con el valor que se va a devolver

252
00:12:41,840 --> 00:12:44,460
de llamar a la primera función.

253
00:12:44,460 --> 00:12:47,383
Y entonces llamemos a esa función.

254
00:12:48,600 --> 00:12:52,430
Ahora, ¿qué sucede inmediatamente cuando se llama a una función?

255
00:12:52,430 --> 00:12:55,920
Bueno, obtiene su propio contexto de ejecución.

256
00:12:55,920 --> 00:13:00,270
para que pueda ejecutar el código que está dentro de su cuerpo.

257
00:13:00,270 --> 00:13:01,270
Perfecto.

258
00:13:01,270 --> 00:13:03,690
¿Y qué pasa con el contexto?

259
00:13:03,690 --> 00:13:07,200
Bueno, nuevamente se coloca en la pila de llamadas,

260
00:13:07,200 --> 00:13:09,540
además del contexto actual,

261
00:13:09,540 --> 00:13:13,640
y ahora es el nuevo contexto de ejecución actual.

262
00:13:13,640 --> 00:13:14,473
Excelente.

263
00:13:14,473 --> 00:13:16,290
Entonces, continuemos.

264
00:13:16,290 --> 00:13:20,010
Entonces tenemos otra declaración de variable simple aquí,

265
00:13:20,010 --> 00:13:22,770
y esta variable, por supuesto, se definirá

266
00:13:22,770 --> 00:13:24,420
en el entorno variable

267
00:13:24,420 --> 00:13:26,520
del contexto de ejecución actual,

268
00:13:26,520 --> 00:13:29,950
y no en el contexto global, ¿verdad?

269
00:13:29,950 --> 00:13:34,610
Luego, justo en la siguiente línea, tenemos otra llamada de función.

270
00:13:34,610 --> 00:13:38,210
Entonces, llamemos a esa función y muévase allí.

271
00:13:38,210 --> 00:13:41,030
Y como adivinaste, un nuevo contexto de ejecución.

272
00:13:41,030 --> 00:13:45,100
fue creado de inmediato para esta segunda función.

273
00:13:45,100 --> 00:13:46,990
Y una vez más, se empuja

274
00:13:46,990 --> 00:13:51,450
en la pila de llamadas y se convierte en el nuevo acto de contexto.

275
00:13:51,450 --> 00:13:54,920
Ahora lo que es importante notar aquí es que la ejecución

276
00:13:54,920 --> 00:13:59,420
de la primera función ahora se ha pausado, ¿de acuerdo?

277
00:13:59,420 --> 00:14:03,000
De nuevo, estamos ejecutando la segunda función ahora.

278
00:14:03,000 --> 00:14:07,420
y mientras tanto, no se ejecuta ninguna otra función.

279
00:14:07,420 --> 00:14:10,170
La primera función se detuvo en este punto.

280
00:14:10,170 --> 00:14:12,220
donde se llamó a la segunda función

281
00:14:12,220 --> 00:14:14,310
y sólo continuará tan pronto

282
00:14:14,310 --> 00:14:17,240
como esta segunda función regresa.

283
00:14:17,240 --> 00:14:21,080
Y tiene que funcionar de esta manera porque recuerda,

284
00:14:21,080 --> 00:14:24,650
JavaScript tiene solo un hilo de ejecución.

285
00:14:24,650 --> 00:14:27,890
Por lo tanto, solo puede hacer una cosa a la vez.

286
00:14:27,890 --> 00:14:30,463
¿Bueno? Nunca olvides eso.

287
00:14:31,500 --> 00:14:36,500
Ahora, pasando a la siguiente línea, tenemos una declaración de devolución

288
00:14:36,690 --> 00:14:40,670
lo que significa que la función terminará su ejecución.

289
00:14:40,670 --> 00:14:44,350
Entonces, ¿qué significa eso para la pila de llamadas?

290
00:14:44,350 --> 00:14:45,970
Bueno, básicamente significa

291
00:14:45,970 --> 00:14:48,430
que el contexto de ejecución de la función,

292
00:14:48,430 --> 00:14:50,740
se sacará de la pila

293
00:14:50,740 --> 00:14:53,920
y desaparecer de la memoria de la computadora.

294
00:14:53,920 --> 00:14:56,580
Al menos eso es lo que necesitas saber por ahora.

295
00:14:56,580 --> 00:15:00,060
porque en realidad el contexto de ejecución apareció

296
00:15:00,060 --> 00:15:02,250
podría seguir viviendo en la memoria.

297
00:15:02,250 --> 00:15:05,300
Pero más sobre eso más adelante en el curso.

298
00:15:05,300 --> 00:15:07,460
De todos modos, lo que sucede a continuación,

299
00:15:07,460 --> 00:15:11,100
es que el contexto de ejecución anterior, ahora volverá

300
00:15:11,100 --> 00:15:14,740
a ser el contexto de ejecución activo de nuevo.

301
00:15:14,740 --> 00:15:17,930
Y entonces volvamos también a donde estábamos

302
00:15:17,930 --> 00:15:20,340
antes en el código.

303
00:15:20,340 --> 00:15:21,890
Y espero que por ahora,

304
00:15:21,890 --> 00:15:25,400
empiezas a ver cómo la pila de llamadas realmente realiza un seguimiento

305
00:15:25,400 --> 00:15:28,260
de la orden de ejecución aquí.

306
00:15:28,260 --> 00:15:29,770
Sin la pila de llamadas,

307
00:15:29,770 --> 00:15:32,180
¿Cómo sabría el motor qué función

308
00:15:32,180 --> 00:15:34,410
estaba siendo ejecutado antes?

309
00:15:34,410 --> 00:15:38,180
No sabría a dónde volver, ¿verdad?

310
00:15:38,180 --> 00:15:40,570
Y esa es la belleza de la pila de llamadas.

311
00:15:40,570 --> 00:15:44,030
Hace que este proceso sea casi sin esfuerzo.

312
00:15:44,030 --> 00:15:45,900
Así que me gusta usar la analogía

313
00:15:45,900 --> 00:15:49,070
de la pila de llamadas como un mapa

314
00:15:49,070 --> 00:15:50,940
para el motor JavaScript.

315
00:15:50,940 --> 00:15:53,150
Porque la pila de llamadas asegura

316
00:15:53,150 --> 00:15:56,760
que la orden de ejecución nunca se pierda.

317
00:15:56,760 --> 00:16:01,200
Al igual que un mapa, al menos si lo usas correctamente.

318
00:16:01,200 --> 00:16:02,090
Está bien.

319
00:16:02,090 --> 00:16:05,080
Entonces, volvimos de la segunda función,

320
00:16:05,080 --> 00:16:06,990
o volver a la primera función

321
00:16:06,990 --> 00:16:09,580
donde tenemos este cálculo,

322
00:16:09,580 --> 00:16:13,730
y finalmente esta primera función también regresa.

323
00:16:13,730 --> 00:16:16,780
Y así aquí sucede lo mismo que antes.

324
00:16:16,780 --> 00:16:21,320
Entonces, el contexto de ejecución actual se saca de la pila,

325
00:16:21,320 --> 00:16:25,030
y el contexto anterior es ahora el contexto actual

326
00:16:25,030 --> 00:16:27,440
donde se ejecuta el código.

327
00:16:27,440 --> 00:16:31,540
En este caso, volvemos al contexto de ejecución global.

328
00:16:31,540 --> 00:16:34,330
y la línea de código donde se encuentra la primera función

329
00:16:34,330 --> 00:16:36,100
fue llamado por primera vez.

330
00:16:36,100 --> 00:16:40,290
Así que aquí, el valor devuelto finalmente se asigna a X

331
00:16:40,290 --> 00:16:42,713
y la ejecución ha terminado.

332
00:16:43,640 --> 00:16:47,230
Ahora el programa permanecerá en este estado

333
00:16:47,230 --> 00:16:51,420
para siempre hasta que finalmente esté realmente terminado.

334
00:16:51,420 --> 00:16:55,040
Y eso solo sucede cuando cerramos la pestaña del navegador,

335
00:16:55,040 --> 00:16:56,580
o la ventana del navegador.

336
00:16:56,580 --> 00:17:00,110
Sólo cuando el programa está realmente terminado así,

337
00:17:00,110 --> 00:17:02,750
es cuando el contexto de ejecución global

338
00:17:02,750 --> 00:17:05,750
también se saca de la pila.

339
00:17:05,750 --> 00:17:10,750
Y así es en pocas palabras cómo funciona la pila de llamadas.

340
00:17:10,770 --> 00:17:13,890
Así que espero que tenga sentido ahora que decimos

341
00:17:13,890 --> 00:17:17,370
ese código Java script se ejecuta dentro de la pila de llamadas.

342
00:17:17,370 --> 00:17:19,830
Y en realidad es más exacto decir

343
00:17:19,830 --> 00:17:23,480
ese código se ejecuta dentro de los contextos de ejecución

344
00:17:23,480 --> 00:17:25,020
que están en la pila.

345
00:17:25,020 --> 00:17:29,090
Pero el punto general es que el código se ejecuta en la pila de llamadas,

346
00:17:29,090 --> 00:17:30,853
lo cual es por supuesto cierto.

347
00:17:31,720 --> 00:17:32,670
Excelente.

348
00:17:32,670 --> 00:17:34,850
A continuación, aprenderemos un poco más

349
00:17:34,850 --> 00:17:37,310
sobre el entorno variable,

350
00:17:37,310 --> 00:17:39,890
y cómo se crean las variables.

351
00:17:39,890 --> 00:17:42,893
Así que estad atentos al próximo vídeo.