1
00:00:00,840 --> 00:00:03,090
Continuemos nuestro viaje

2
00:00:03,090 --> 00:00:07,330
de profundizar en cómo funciona realmente JavaScript

3
00:00:07,330 --> 00:00:08,960
entre bastidores.

4
00:00:08,960 --> 00:00:11,450
Realmente espero que lo hayas disfrutado hasta ahora.

5
00:00:11,450 --> 00:00:14,370
y son capaces de ver el inmenso valor

6
00:00:14,370 --> 00:00:17,460
que estas conferencias traen a la mesa.

7
00:00:17,460 --> 00:00:19,170
Ahora, después de esta conferencia,

8
00:00:19,170 --> 00:00:22,560
finalmente habrá otra conferencia de codificación.

9
00:00:22,560 --> 00:00:25,223
Así que espera, ya casi llegamos.

10
00:00:27,070 --> 00:00:30,770
Pero ahora comencemos con esta conferencia.

11
00:00:30,770 --> 00:00:33,430
Así lo aprendimos en la última lección

12
00:00:33,430 --> 00:00:37,810
que cada contexto de ejecución tiene un entorno variable,

13
00:00:37,810 --> 00:00:41,340
una cadena de ámbito y una palabra clave this.

14
00:00:41,340 --> 00:00:44,510
Entonces, en esta lección, aprendamos qué alcance

15
00:00:44,510 --> 00:00:46,200
y una cadena de alcance son,

16
00:00:46,200 --> 00:00:49,970
por qué son tan importantes y cómo funcionan.

17
00:00:49,970 --> 00:00:51,930
Y empecemos por entender

18
00:00:51,930 --> 00:00:54,190
lo que realmente significa alcance,

19
00:00:54,190 --> 00:00:57,930
y aprender sobre algunos conceptos relacionados también.

20
00:00:57,930 --> 00:01:02,250
Así que el alcance controla cómo las variables de nuestro programa

21
00:01:02,250 --> 00:01:06,293
son organizados y accedidos por el motor de JavaScript.

22
00:01:07,140 --> 00:01:10,430
Entonces, básicamente, el alcance hace la pregunta,

23
00:01:10,430 --> 00:01:12,560
¿Dónde viven las variables?

24
00:01:12,560 --> 00:01:16,993
¿O dónde podemos acceder a una determinada variable y dónde no?

25
00:01:18,030 --> 00:01:19,330
Ahora en JavaScript,

26
00:01:19,330 --> 00:01:22,720
tenemos algo llamado alcance léxico.

27
00:01:22,720 --> 00:01:26,060
Y el alcance léxico significa que la forma en que las variables

28
00:01:26,060 --> 00:01:28,330
se organizan y se accede

29
00:01:28,330 --> 00:01:32,400
está totalmente controlado por la colocación de funciones

30
00:01:32,400 --> 00:01:35,710
y de bloques en el código de los programas.

31
00:01:35,710 --> 00:01:39,470
Por ejemplo, una función que está escrita dentro

32
00:01:39,470 --> 00:01:42,940
otra función tiene acceso a las variables

33
00:01:42,940 --> 00:01:45,930
de la función padre, ¿de acuerdo?

34
00:01:45,930 --> 00:01:49,550
De nuevo, el alcance de las variables está influenciado

35
00:01:49,550 --> 00:01:54,550
por dónde escribimos exactamente nuestras funciones y bloques de código.

36
00:01:55,120 --> 00:01:58,370
Bien, y ahora sobre el alcance en sí.

37
00:01:58,370 --> 00:02:01,300
El alcance es el espacio o entorno.

38
00:02:01,300 --> 00:02:04,430
en el que se declara una determinada variable,

39
00:02:04,430 --> 00:02:06,230
simple como eso.

40
00:02:06,230 --> 00:02:08,050
Y en el caso de las funciones,

41
00:02:08,050 --> 00:02:10,870
eso es esencialmente el entorno variable

42
00:02:10,870 --> 00:02:15,020
que se almacena en el contexto de ejecución de funciones.

43
00:02:15,020 --> 00:02:17,210
Así que si ahora te estás preguntando,

44
00:02:17,210 --> 00:02:19,460
cual es la diferencia entre alcance

45
00:02:19,460 --> 00:02:21,770
y entorno variable?

46
00:02:21,770 --> 00:02:25,510
Entonces la respuesta es que para el caso de las funciones,

47
00:02:25,510 --> 00:02:27,730
es básicamente lo mismo.

48
00:02:27,730 --> 00:02:30,770
Ahora en JavaScript, tenemos el alcance global,

49
00:02:30,770 --> 00:02:33,690
alcance de función y alcance de bloque.

50
00:02:33,690 --> 00:02:36,340
Y hablaremos de esto en un segundo.

51
00:02:36,340 --> 00:02:39,560
Pero primero, definamos también cuál es el alcance

52
00:02:39,560 --> 00:02:41,620
de una variable es.

53
00:02:41,620 --> 00:02:46,590
Entonces, el alcance de una variable es básicamente toda la región.

54
00:02:46,590 --> 00:02:51,170
de nuestro código, donde se puede acceder a una determinada variable.

55
00:02:51,170 --> 00:02:55,170
Ahora, algunas personas usan la palabra alcance para todo esto,

56
00:02:55,170 --> 00:02:58,600
pero me gusta definir todos estos conceptos que tenemos aquí

57
00:02:58,600 --> 00:03:03,160
de una manera clara, porque en realidad sutiles diferencias.

58
00:03:03,160 --> 00:03:06,070
Por ejemplo, si lo miras de cerca,

59
00:03:06,070 --> 00:03:09,940
El alcance no es lo mismo que el alcance de una variable.

60
00:03:09,940 --> 00:03:14,430
Y entonces deberías saber acerca de las diferencias sutiles, ¿verdad?

61
00:03:14,430 --> 00:03:18,240
Y sé que todavía puede sonar igual por ahora,

62
00:03:18,240 --> 00:03:21,040
pero después de ver un par de ejemplos

63
00:03:21,040 --> 00:03:23,050
y escribiendo algo de código real,

64
00:03:23,050 --> 00:03:26,563
entenderás todo lo que te acabo de mostrar aquí.

65
00:03:27,840 --> 00:03:31,000
De todos modos, ahora hablemos de los tres tipos diferentes.

66
00:03:31,000 --> 00:03:33,470
de alcance en JavaScript.

67
00:03:33,470 --> 00:03:38,470
Eso es alcance global, alcance de función y alcance de bloque.

68
00:03:38,750 --> 00:03:42,030
Y recuerda, el alcance es el lugar en nuestro código

69
00:03:42,030 --> 00:03:44,940
donde se declaran las variables.

70
00:03:44,940 --> 00:03:48,310
Y cuando digo variables, exactamente lo mismo

71
00:03:48,310 --> 00:03:50,800
es cierto para las funciones también.

72
00:03:50,800 --> 00:03:54,420
Porque al final, las funciones son solo valores

73
00:03:54,420 --> 00:03:56,990
que se almacenan en variables.

74
00:03:56,990 --> 00:04:01,120
Primero, el alcance global es una vez más

75
00:04:01,120 --> 00:04:03,430
para el código de nivel superior.

76
00:04:03,430 --> 00:04:06,270
Así que esto es para las variables que se declaran

77
00:04:06,270 --> 00:04:09,930
fuera de cualquier función o bloque.

78
00:04:09,930 --> 00:04:12,840
Estas variables serán accesibles en todas partes

79
00:04:12,840 --> 00:04:17,050
en nuestro programa, en todas las funciones y todos los bloques.

80
00:04:17,050 --> 00:04:19,830
Así que realmente, en todas partes.

81
00:04:19,830 --> 00:04:23,730
A continuación, todas y cada una de las funciones crean un alcance.

82
00:04:23,730 --> 00:04:27,120
Y las variables declaradas dentro del alcance de esa función

83
00:04:27,120 --> 00:04:30,230
solo son accesibles dentro de esa función.

84
00:04:30,230 --> 00:04:33,230
Esto también se llama alcance local.

85
00:04:33,230 --> 00:04:35,800
opuesto al alcance global.

86
00:04:35,800 --> 00:04:40,150
Entonces, las variables locales viven en la función, por así decirlo.

87
00:04:40,150 --> 00:04:41,920
Y fuera de la función,

88
00:04:41,920 --> 00:04:45,740
las variables entonces no son accesibles en absoluto.

89
00:04:45,740 --> 00:04:48,390
Nuevamente, esto es técnicamente lo mismo.

90
00:04:48,390 --> 00:04:51,130
como las funciones entorno variable,

91
00:04:51,130 --> 00:04:54,280
pero todavía tenemos que darle el nombre de alcance

92
00:04:54,280 --> 00:04:55,510
en este contexto,

93
00:04:55,510 --> 00:04:58,610
porque los bloques también crean ámbitos.

94
00:04:58,610 --> 00:05:01,010
De todos modos, en este ejemplo aquí,

95
00:05:01,010 --> 00:05:06,010
la variable now es 2037 dentro de la función cog H.

96
00:05:06,560 --> 00:05:09,240
Y por lo tanto, podemos usarlo en la función

97
00:05:09,240 --> 00:05:10,960
para hacer cálculos.

98
00:05:10,960 --> 00:05:13,260
Pero fuera de la función,

99
00:05:13,260 --> 00:05:15,730
mientras intentamos registrarlo en la consola,

100
00:05:15,730 --> 00:05:18,440
obtenemos un error de referencia.

101
00:05:18,440 --> 00:05:22,010
Entonces JavaScript está tratando de encontrar la variable now

102
00:05:22,010 --> 00:05:23,770
en este ámbito global,

103
00:05:23,770 --> 00:05:27,370
tan fuera de la función, pero no puede encontrarlo.

104
00:05:27,370 --> 00:05:29,750
Y entonces va a haber un error.

105
00:05:29,750 --> 00:05:32,430
Y si recuerdas, o eliges un proyecto de juego

106
00:05:32,430 --> 00:05:34,060
de la sección anterior,

107
00:05:34,060 --> 00:05:36,820
también está la razón por la que tuvimos que declarar

108
00:05:36,820 --> 00:05:41,080
un par de variables fuera de la función init,

109
00:05:41,080 --> 00:05:42,410
¿recuerda eso?

110
00:05:42,410 --> 00:05:45,920
Así que teníamos algunas variables declaradas en la función init,

111
00:05:45,920 --> 00:05:47,570
y luego eso nos dio un error

112
00:05:47,570 --> 00:05:50,030
porque otras funciones estaban intentando

113
00:05:50,030 --> 00:05:51,860
para acceder a estas variables.

114
00:05:51,860 --> 00:05:54,580
Pero, por supuesto, estaban en el ámbito de la función.

115
00:05:54,580 --> 00:05:56,860
Y por lo que tenían un alcance local,

116
00:05:56,860 --> 00:05:58,210
por lo que no pudimos acceder a ellos

117
00:05:58,210 --> 00:06:02,400
fuera de esa función donde fueron declarados.

118
00:06:02,400 --> 00:06:04,610
Y aquí, en realidad no importa

119
00:06:04,610 --> 00:06:07,230
qué tipo de función estamos usando.

120
00:06:07,230 --> 00:06:10,380
Declaraciones de funciones, expresiones de funciones

121
00:06:10,380 --> 00:06:14,223
y las funciones de flecha crean su propio alcance.

122
00:06:15,260 --> 00:06:19,500
Ahora, tradicionalmente, solo se utilizan funciones para crear ámbitos.

123
00:06:19,500 --> 00:06:20,850
en JavaScript.

124
00:06:20,850 --> 00:06:25,850
Pero a partir de ES6, los bloques también crean ámbitos ahora.

125
00:06:25,860 --> 00:06:26,810
Y con bloques,

126
00:06:26,810 --> 00:06:29,970
nos referimos a todo lo que está entre llaves,

127
00:06:29,970 --> 00:06:34,510
como el bloque de una sentencia if o un bucle for.

128
00:06:34,510 --> 00:06:36,920
Entonces, al igual que con las funciones,

129
00:06:36,920 --> 00:06:39,570
variables declaradas dentro de un bloque

130
00:06:39,570 --> 00:06:42,350
solo son accesibles dentro de ese bloque

131
00:06:42,350 --> 00:06:44,970
y no fuera de ella.

132
00:06:44,970 --> 00:06:47,950
Ahora, la gran diferencia es que los ámbitos de bloque

133
00:06:47,950 --> 00:06:52,950
solo se aplica a las variables declaradas con let o const, ¿de acuerdo?

134
00:06:53,540 --> 00:06:57,500
De nuevo, solo las variables let y const

135
00:06:57,500 --> 00:07:01,600
están restringidas al bloque en el que fueron creadas.

136
00:07:01,600 --> 00:07:04,910
Por eso decimos que las variables let y const

137
00:07:04,910 --> 00:07:06,710
tienen alcance de bloque.

138
00:07:06,710 --> 00:07:10,890
Entonces, si declaro una variable usando var en este bloque,

139
00:07:10,890 --> 00:07:14,520
entonces esa variable aún sería accesible

140
00:07:14,520 --> 00:07:16,550
fuera del bloque,

141
00:07:16,550 --> 00:07:19,430
y estaría dentro del alcance de la función actual

142
00:07:19,430 --> 00:07:21,410
o al ámbito global.

143
00:07:21,410 --> 00:07:25,570
Y entonces decimos que var tiene un alcance de función.

144
00:07:25,570 --> 00:07:27,970
Así que en ES5 y antes,

145
00:07:27,970 --> 00:07:31,260
solo teníamos alcance global y alcance de función.

146
00:07:31,260 --> 00:07:35,400
Y es por eso que las variables ES5 declaradas con var,

147
00:07:35,400 --> 00:07:39,080
solo se preocupan por las funciones, pero no por los bloques.

148
00:07:39,080 --> 00:07:40,960
Simplemente los ignoran.

149
00:07:40,960 --> 00:07:44,170
Finalmente, también a partir de ES6,

150
00:07:44,170 --> 00:07:47,070
todas las funciones ahora también tienen alcance de bloque,

151
00:07:47,070 --> 00:07:49,010
al menos en modo estricto,

152
00:07:49,010 --> 00:07:52,040
que siempre deberías estar usando de todos modos.

153
00:07:52,040 --> 00:07:55,420
Y al igual que con las variables let y const,

154
00:07:55,420 --> 00:07:58,750
esto significa que las funciones declaradas dentro de un bloque

155
00:07:58,750 --> 00:08:03,410
solo son accesibles dentro de ese bloque, ¿de acuerdo?

156
00:08:03,410 --> 00:08:06,730
Y veremos ejemplos de todo eso en el siguiente vídeo,

157
00:08:06,730 --> 00:08:09,023
cuando vamos a volver a la codificación.

158
00:08:10,230 --> 00:08:13,930
Entonces, para recapitular, let y const variables

159
00:08:13,930 --> 00:08:17,260
así como las funciones tienen un alcance de bloque.

160
00:08:17,260 --> 00:08:20,440
Y si ya conoces otros lenguajes de programación,

161
00:08:20,440 --> 00:08:23,090
el alcance del bloque probablemente esté más en línea

162
00:08:23,090 --> 00:08:25,230
con lo que ya sabes.

163
00:08:25,230 --> 00:08:28,680
Los ámbitos de función son extraños para algunos principiantes.

164
00:08:28,680 --> 00:08:30,400
en el mundo JavaScript.

165
00:08:30,400 --> 00:08:35,070
Y es por eso que se introdujeron los ámbitos de bloque en ES6.

166
00:08:35,070 --> 00:08:38,440
Pero ahora para entender todo esto un poco mejor,

167
00:08:38,440 --> 00:08:42,560
veamos un ejemplo más real y detallado

168
00:08:42,560 --> 00:08:45,493
y también aprenda sobre la cadena de alcance.

169
00:08:47,520 --> 00:08:50,520
Y aquí tenemos un código con diferentes funciones.

170
00:08:50,520 --> 00:08:51,650
y bloques,

171
00:08:51,650 --> 00:08:53,720
y vamos a echar un vistazo a los alcances

172
00:08:53,720 --> 00:08:58,330
que están en este código, así como construir la cadena de alcance.

173
00:08:58,330 --> 00:09:02,290
Y por supuesto, comenzamos con el alcance global.

174
00:09:02,290 --> 00:09:05,030
Como puede ver, la variable myName

175
00:09:05,030 --> 00:09:07,360
es la única declaración de variable

176
00:09:07,360 --> 00:09:10,100
que tenemos en el ámbito global.

177
00:09:10,100 --> 00:09:12,600
Ahora, técnicamente, la primera función

178
00:09:12,600 --> 00:09:14,700
también cuenta como una variable

179
00:09:14,700 --> 00:09:17,010
que está presente en el ámbito global,

180
00:09:17,010 --> 00:09:18,870
pero quiero mantenerlo simple aquí.

181
00:09:18,870 --> 00:09:22,180
Y entonces solo consideraré declaraciones de variables

182
00:09:22,180 --> 00:09:24,510
y sin funciones, ¿de acuerdo?

183
00:09:24,510 --> 00:09:27,500
Solo tenga en cuenta que lo que sea que esté explicando aquí

184
00:09:27,500 --> 00:09:31,363
para variables también funciona igual para funciones.

185
00:09:32,310 --> 00:09:35,020
De todos modos, dentro del ámbito global,

186
00:09:35,020 --> 00:09:38,220
tenemos un ámbito para la primera función

187
00:09:38,220 --> 00:09:42,820
porque cada función crea su propio alcance, ¿recuerdas?

188
00:09:42,820 --> 00:09:44,970
¿Y qué hay en el alcance?

189
00:09:44,970 --> 00:09:47,870
Bueno, es la variable edad la que se declara

190
00:09:47,870 --> 00:09:50,500
justo en la parte superior de la función.

191
00:09:50,500 --> 00:09:52,960
A continuación, dentro del primer ámbito,

192
00:09:52,960 --> 00:09:55,670
Consideremos ahora la segunda función,

193
00:09:55,670 --> 00:09:58,270
que también creará su propio alcance

194
00:09:58,270 --> 00:10:01,820
que contiene la variable de trabajo establecida en profesor.

195
00:10:01,820 --> 00:10:03,060
Así que como ves,

196
00:10:03,060 --> 00:10:06,400
tenemos una estructura anidada de alcances

197
00:10:06,400 --> 00:10:09,490
con un alcance dentro del otro.

198
00:10:09,490 --> 00:10:12,680
Pero ahora viene la parte realmente interesante.

199
00:10:12,680 --> 00:10:15,200
Porque aquí en la segunda función,

200
00:10:15,200 --> 00:10:17,180
tenemos esta línea de código

201
00:10:17,180 --> 00:10:19,810
donde necesitamos la variable myName

202
00:10:19,810 --> 00:10:21,610
y la variable edad,

203
00:10:21,610 --> 00:10:26,070
los cuales no fueron declarados dentro del alcance actual.

204
00:10:26,070 --> 00:10:28,720
Pero realmente necesitamos estas variables aquí,

205
00:10:28,720 --> 00:10:33,530
porque de lo contrario no podemos crear esta cadena aquí, ¿verdad?

206
00:10:33,530 --> 00:10:35,700
Entonces, ¿cómo se puede arreglar esto?

207
00:10:35,700 --> 00:10:38,890
¿Cómo sabrá el motor de JavaScript los valores?

208
00:10:38,890 --> 00:10:40,970
de estas variables?

209
00:10:40,970 --> 00:10:43,730
Bueno, el secreto es que cada alcance

210
00:10:43,730 --> 00:10:46,520
siempre tiene acceso a todas las variables

211
00:10:46,520 --> 00:10:49,050
de todos sus ámbitos exteriores.

212
00:10:49,050 --> 00:10:51,710
Entonces, desde todos sus ámbitos principales.

213
00:10:51,710 --> 00:10:54,970
En nuestro ejemplo, esto significa que el segundo alcance

214
00:10:54,970 --> 00:10:57,950
puede acceder a la variable de edad desde el alcance

215
00:10:57,950 --> 00:10:59,900
de la primera función.

216
00:10:59,900 --> 00:11:03,010
Por supuesto, esto también significa que el primer alcance

217
00:11:03,010 --> 00:11:06,690
puede acceder a las variables que están en el ámbito global,

218
00:11:06,690 --> 00:11:09,560
porque ese es el ámbito principal.

219
00:11:09,560 --> 00:11:11,480
Como consecuencia de esto,

220
00:11:11,480 --> 00:11:14,870
el segundo osciloscopio también podrá acceder

221
00:11:14,870 --> 00:11:18,140
la variable myName del alcance global,

222
00:11:18,140 --> 00:11:21,030
porque tiene acceso a las variables

223
00:11:21,030 --> 00:11:22,713
del primer alcance.

224
00:11:23,670 --> 00:11:28,180
Y por cierto, todo esto también se aplica a los argumentos de función.

225
00:11:28,180 --> 00:11:31,043
Pero en este ejemplo, simplemente no tenemos ninguno.

226
00:11:31,900 --> 00:11:36,590
Y así es esencialmente cómo funciona la cadena de alcance.

227
00:11:36,590 --> 00:11:37,650
En otras palabras,

228
00:11:37,650 --> 00:11:41,130
si un alcance necesita usar una determinada variable,

229
00:11:41,130 --> 00:11:43,940
pero no puede encontrarlo en el alcance actual,

230
00:11:43,940 --> 00:11:46,460
buscará en la cadena de alcance

231
00:11:46,460 --> 00:11:48,840
y ver si puede encontrar una variable

232
00:11:48,840 --> 00:11:51,060
en uno de los ámbitos principales.

233
00:11:51,060 --> 00:11:54,160
Si puede, utilizará esa variable.

234
00:11:54,160 --> 00:11:57,620
Y si no puede, entonces habrá un error.

235
00:11:57,620 --> 00:12:00,503
Y este proceso se llama búsqueda de variables.

236
00:12:01,870 --> 00:12:04,710
Ahora es importante tener en cuenta que estas variables

237
00:12:04,710 --> 00:12:09,460
no se copian de un ámbito a otro, ¿de acuerdo?

238
00:12:09,460 --> 00:12:13,190
En su lugar, los alcances simplemente buscan en la cadena de alcance

239
00:12:13,190 --> 00:12:15,970
hasta que encuentran una variable que necesitan

240
00:12:15,970 --> 00:12:17,940
y luego lo usan.

241
00:12:17,940 --> 00:12:20,760
Lo que también es extremadamente importante tener en cuenta

242
00:12:20,760 --> 00:12:24,240
es que esto no funciona al revés.

243
00:12:24,240 --> 00:12:27,560
Un cierto alcance nunca, nunca tendrá acceso

244
00:12:27,560 --> 00:12:29,940
a las variables de un ámbito interno.

245
00:12:29,940 --> 00:12:33,650
En este ejemplo, el primer ámbito, por ejemplo,

246
00:12:33,650 --> 00:12:36,900
nunca tendrá acceso a la variable de trabajo

247
00:12:36,900 --> 00:12:40,840
que se almacena en el segundo ámbito, ¿de acuerdo?

248
00:12:40,840 --> 00:12:45,460
De nuevo, un ámbito solo puede buscar en una cadena de ámbitos,

249
00:12:45,460 --> 00:12:48,520
pero no puede mirar hacia abajo básicamente.

250
00:12:48,520 --> 00:12:50,840
Entonces solo se puede usar el ámbito principal,

251
00:12:50,840 --> 00:12:52,603
pero sin alcances secundarios.

252
00:12:53,450 --> 00:12:56,220
De todos modos, con todo esto en su lugar ahora,

253
00:12:56,220 --> 00:12:58,690
esta línea de código se puede ejecutar

254
00:12:58,690 --> 00:13:00,400
e imprimir en la consola.

255
00:13:00,400 --> 00:13:03,390
Jonas es un profesor de 30 años,

256
00:13:03,390 --> 00:13:06,460
aunque las variables myName y age

257
00:13:06,460 --> 00:13:09,260
no se definieron en el alcance actual.

258
00:13:09,260 --> 00:13:13,950
Todo lo que hizo el motor fue sacarlos de la cadena de alcance.

259
00:13:13,950 --> 00:13:16,140
Y como te habrás dado cuenta,

260
00:13:16,140 --> 00:13:20,180
de hecho, ya hemos hecho esto antes en nuestro propio código.

261
00:13:20,180 --> 00:13:23,520
Realmente no entendíamos lo que estaba pasando.

262
00:13:23,520 --> 00:13:25,300
y cómo funcionó todo.

263
00:13:25,300 --> 00:13:27,940
Pero ahora sabemos cómo funciona.

264
00:13:27,940 --> 00:13:29,233
Increíble, ¿verdad?

265
00:13:30,180 --> 00:13:33,870
De todos modos, todavía nos queda un alcance más aquí,

266
00:13:33,870 --> 00:13:36,993
y ese es el creado por este bloque aquí.

267
00:13:38,010 --> 00:13:40,880
Recuerda que a partir de ES6,

268
00:13:40,880 --> 00:13:45,130
no solo las funciones crean ámbitos, sino también bloques.

269
00:13:45,130 --> 00:13:49,810
Sin embargo, estos ámbitos solo funcionan para los tipos de variables ES6.

270
00:13:49,810 --> 00:13:52,930
Así que para las variables let y const.

271
00:13:52,930 --> 00:13:56,010
Es por eso que la única variable que está en el alcance

272
00:13:56,010 --> 00:13:58,480
es la variable década.

273
00:13:58,480 --> 00:14:02,650
La variable millennial no se declara con const o let,

274
00:14:02,650 --> 00:14:07,380
y, por lo tanto, no se limita solo a este bloque.

275
00:14:07,380 --> 00:14:11,270
En cambio, la variable millennial es en realidad parte

276
00:14:11,270 --> 00:14:13,580
del primer ámbito de función.

277
00:14:13,580 --> 00:14:17,780
De nuevo, para una variable declarada con var,

278
00:14:17,780 --> 00:14:20,490
los ámbitos de bloque no se aplican en absoluto.

279
00:14:20,490 --> 00:14:24,160
Son funciones con ámbito, no con ámbito de bloque.

280
00:14:24,160 --> 00:14:26,700
Let y const por otro lado

281
00:14:26,700 --> 00:14:30,440
son de hecho bloques de ámbito, ¿de acuerdo?

282
00:14:30,440 --> 00:14:32,690
Esta es una de las cosas fundamentales.

283
00:14:32,690 --> 00:14:36,710
que debe tener en cuenta acerca de let, const y var,

284
00:14:36,710 --> 00:14:39,760
y sobre el alcance en general.

285
00:14:39,760 --> 00:14:43,280
Entonces, si está tomando notas y espero que esté tomando

286
00:14:43,280 --> 00:14:44,970
muchas notas,

287
00:14:44,970 --> 00:14:47,543
entonces esto definitivamente debe estar ahí.

288
00:14:48,450 --> 00:14:50,330
Ahora sobre una cadena de alcance,

289
00:14:50,330 --> 00:14:54,043
si la variable millennial está en el ámbito de la primera función,

290
00:14:54,043 --> 00:14:57,010
entonces, por supuesto, el segundo alcance de la función

291
00:14:57,010 --> 00:14:59,130
también tiene acceso a ella,

292
00:14:59,130 --> 00:15:02,550
incluso si realmente no necesita esa variable.

293
00:15:02,550 --> 00:15:04,810
También la cadena de alcance, por supuesto,

294
00:15:04,810 --> 00:15:07,500
también se aplican a los ámbitos de bloque.

295
00:15:07,500 --> 00:15:10,400
Y por lo tanto en o si el alcance del bloque,

296
00:15:10,400 --> 00:15:13,120
tenemos acceso a todas las variables

297
00:15:13,120 --> 00:15:15,670
de todos sus ámbitos exteriores.

298
00:15:15,670 --> 00:15:17,950
Entonces, desde el primer alcance de la función,

299
00:15:17,950 --> 00:15:20,890
y por supuesto desde el ámbito global.

300
00:15:20,890 --> 00:15:23,090
Por eso dije en la última diapositiva

301
00:15:23,090 --> 00:15:25,110
que las variables en un ámbito global

302
00:15:25,110 --> 00:15:27,640
son accesibles desde todas partes.

303
00:15:27,640 --> 00:15:29,760
Lo son, porque siempre lo son.

304
00:15:29,760 --> 00:15:32,290
en la parte superior de la cadena de alcance.

305
00:15:32,290 --> 00:15:35,350
De hecho, llamamos variables en el ámbito global,

306
00:15:35,350 --> 00:15:39,200
variables globales, muy creativo, ¿verdad?

307
00:15:39,200 --> 00:15:43,670
Pero en realidad usamos mucho este término en JavaScript.

308
00:15:43,670 --> 00:15:45,630
Ahora es importante entender

309
00:15:45,630 --> 00:15:47,890
que nuestro alcance de bloques morados

310
00:15:47,890 --> 00:15:50,920
no tiene acceso a ninguna variable

311
00:15:50,920 --> 00:15:53,890
desde el alcance de la segunda función amarilla.

312
00:15:53,890 --> 00:15:56,240
Y lo mismo, al revés.

313
00:15:56,240 --> 00:15:58,070
¿Y por qué es eso?

314
00:15:58,070 --> 00:16:00,920
Bueno, es por el alcance léxico

315
00:16:00,920 --> 00:16:03,230
como aprendimos en la última diapositiva.

316
00:16:03,230 --> 00:16:05,710
Entonces, la forma en que podemos acceder a las variables

317
00:16:05,710 --> 00:16:08,660
depende de donde se coloque el alcance,

318
00:16:08,660 --> 00:16:11,650
así que donde está escrito en el código.

319
00:16:11,650 --> 00:16:14,730
En este caso, ninguno de estos dos alcances está escrito

320
00:16:14,730 --> 00:16:17,110
uno dentro del otro.

321
00:16:17,110 --> 00:16:20,810
Ambos son ámbitos secundarios de la primera función.

322
00:16:20,810 --> 00:16:24,400
Incluso podríamos decir que son unos visores hermanos.

323
00:16:24,400 --> 00:16:27,250
Y así, por las reglas del alcance léxico,

324
00:16:27,250 --> 00:16:31,070
no pueden tener acceso a las variables de los demás,

325
00:16:31,070 --> 00:16:35,530
simplemente porque uno no está escrito dentro del otro.

326
00:16:35,530 --> 00:16:37,540
También podemos decir que la cadena de alcance

327
00:16:37,540 --> 00:16:40,803
solo funciona hacia arriba, no hacia los lados.

328
00:16:41,860 --> 00:16:45,200
De acuerdo, entonces esto fue mucho para asimilar,

329
00:16:45,200 --> 00:16:48,430
pero espero que todo siga teniendo sentido

330
00:16:48,430 --> 00:16:49,670
en este punto.

331
00:16:49,670 --> 00:16:51,400
Y si no, no te preocupes,

332
00:16:51,400 --> 00:16:54,010
veremos todo esto funcionando en la práctica

333
00:16:54,010 --> 00:16:56,060
en el siguiente vídeo.

334
00:16:56,060 --> 00:16:57,380
Pero por ahora, sin embargo,

335
00:16:57,380 --> 00:17:00,350
hay una cosa más de la que tenemos que hablar,

336
00:17:00,350 --> 00:17:03,010
cuál es la diferencia entre la cadena de alcance

337
00:17:03,010 --> 00:17:04,740
y para llamar a la pila.

338
00:17:04,740 --> 00:17:08,360
Recibo muchas preguntas sobre esto todo el tiempo.

339
00:17:08,360 --> 00:17:10,840
Y por eso decidí hablar de

340
00:17:10,840 --> 00:17:13,900
cómo la pila de llamadas, el contexto de ejecución,

341
00:17:13,900 --> 00:17:16,360
entornos variables y alcance

342
00:17:16,360 --> 00:17:19,310
todos están relacionados entre sí.

343
00:17:19,310 --> 00:17:22,470
Entonces, antes de pasar al siguiente video.

344
00:17:22,470 --> 00:17:23,303
Y una vez más,

345
00:17:23,303 --> 00:17:25,703
veamos un poco más de código aquí.

346
00:17:26,720 --> 00:17:31,550
Entonces tenemos tres funciones llamadas primera, segunda y tercera,

347
00:17:31,550 --> 00:17:34,760
para que esto sea más fácil de entender.

348
00:17:34,760 --> 00:17:37,430
Empezamos llamando a la primera función,

349
00:17:37,430 --> 00:17:39,730
que luego llama a la segunda función,

350
00:17:39,730 --> 00:17:42,950
que a su vez llama a la tercera función.

351
00:17:42,950 --> 00:17:45,130
Por lo que aprendimos antes,

352
00:17:45,130 --> 00:17:50,130
la pila de llamadas para este ejemplo se verá así, ¿verdad?

353
00:17:50,780 --> 00:17:53,870
Un contexto de ejecución para cada función.

354
00:17:53,870 --> 00:17:57,250
en el orden exacto en que fueron llamados.

355
00:17:57,250 --> 00:17:59,910
También incluyeron la variable entorno.

356
00:17:59,910 --> 00:18:02,570
de cada contexto de ejecución.

357
00:18:02,570 --> 00:18:06,010
Por ahora, todo esto no tiene nada que ver con los alcances.

358
00:18:06,010 --> 00:18:08,490
o la cadena de alcance, ¿de acuerdo?

359
00:18:08,490 --> 00:18:12,000
Todo lo que estoy haciendo es crear un contexto de ejecución

360
00:18:12,000 --> 00:18:14,560
para cada llamada de función y llenarlo

361
00:18:14,560 --> 00:18:17,820
con las variables de esa función.

362
00:18:17,820 --> 00:18:20,410
Y puedes pausar el video aquí por un momento.

363
00:18:20,410 --> 00:18:24,003
comprender el contenido de cada entorno variable.

364
00:18:25,440 --> 00:18:28,120
Bien, y ahora que hiciste eso

365
00:18:28,120 --> 00:18:31,770
y tenemos todos estos entornos variables en su lugar,

366
00:18:31,770 --> 00:18:35,250
en realidad podemos comenzar a construir la cadena de alcance.

367
00:18:35,250 --> 00:18:39,300
Como siempre, vamos a comenzar con el alcance global.

368
00:18:39,300 --> 00:18:42,390
Y las variables disponibles en el alcance global.

369
00:18:42,390 --> 00:18:46,360
son exactamente los que están almacenados en el entorno variable

370
00:18:46,360 --> 00:18:49,160
del contexto de ejecución global.

371
00:18:49,160 --> 00:18:52,020
Y dado todo lo que hemos aprendido hasta ahora,

372
00:18:52,020 --> 00:18:54,670
eso tiene sentido, ¿verdad?

373
00:18:54,670 --> 00:18:56,800
Y tenga en cuenta que en este ejemplo,

374
00:18:56,800 --> 00:19:00,640
De hecho, estoy incluyendo funciones en cada ámbito.

375
00:19:00,640 --> 00:19:03,283
a diferencia de lo que hicimos en la diapositiva anterior.

376
00:19:04,150 --> 00:19:08,110
Ahora en el ámbito global, también llamamos a la primera función,

377
00:19:08,110 --> 00:19:11,880
que es la razón por la que tenemos un contexto de ejecución para ello

378
00:19:11,880 --> 00:19:13,530
en la pila de llamadas.

379
00:19:13,530 --> 00:19:17,260
Y esta función, por supuesto, también tiene su propio alcance,

380
00:19:17,260 --> 00:19:20,140
que contiene todas las variables que se declaran

381
00:19:20,140 --> 00:19:22,620
dentro de la función.

382
00:19:22,620 --> 00:19:26,100
Y una vez más, esto es exactamente lo mismo.

383
00:19:26,100 --> 00:19:27,900
como el entorno variable

384
00:19:27,900 --> 00:19:30,820
del contexto de ejecución de funciones.

385
00:19:30,820 --> 00:19:32,930
Sin embargo, eso no es todo

386
00:19:32,930 --> 00:19:36,550
porque ahora ya sabemos sobre la cadena de alcance.

387
00:19:36,550 --> 00:19:40,740
Entonces, el primer alcance también tiene acceso a todas las variables.

388
00:19:40,740 --> 00:19:42,440
desde su ámbito principal,

389
00:19:42,440 --> 00:19:44,353
gracias a la cadena de alcance.

390
00:19:45,220 --> 00:19:46,860
Ahora, como ya sabemos,

391
00:19:46,860 --> 00:19:49,530
la cadena de alcance tiene que ver con el orden

392
00:19:49,530 --> 00:19:53,080
en el que las funciones están escritas en el código.

393
00:19:53,080 --> 00:19:55,450
Pero lo que es realmente importante tener en cuenta aquí

394
00:19:55,450 --> 00:19:59,400
es que la cadena de alcance no tiene nada que ver con el orden

395
00:19:59,400 --> 00:20:01,370
en el que se llamaron funciones.

396
00:20:01,370 --> 00:20:05,180
O en otras palabras, la cadena de alcance no tiene nada que ver

397
00:20:05,180 --> 00:20:10,180
con el orden de los contextos de ejecución en la pila de llamadas.

398
00:20:10,280 --> 00:20:13,590
La cadena de alcance obtiene los entornos variables.

399
00:20:13,590 --> 00:20:17,960
del contexto de ejecución como se muestra aquí con las flechas rojas,

400
00:20:17,960 --> 00:20:19,520
Pero eso es todo.

401
00:20:19,520 --> 00:20:22,870
El orden de las llamadas a funciones no es relevante.

402
00:20:22,870 --> 00:20:26,120
a la cadena de alcance en absoluto, ¿de acuerdo?

403
00:20:26,120 --> 00:20:28,550
Realmente tenlo en cuenta.

404
00:20:28,550 --> 00:20:32,000
Ahora, pasando a la segunda función ahora,

405
00:20:32,000 --> 00:20:37,000
una vez más, su alcance es igual a su entorno variable.

406
00:20:37,280 --> 00:20:41,650
También está escrito léxicamente dentro de la primera función.

407
00:20:41,650 --> 00:20:43,000
Y por supuesto,

408
00:20:43,000 --> 00:20:47,120
también tendrá acceso a todos sus ámbitos principales.

409
00:20:47,120 --> 00:20:50,570
Entonces podemos decir que la cadena de alcance en un cierto alcance

410
00:20:50,570 --> 00:20:54,640
es igual a sumar todos los entornos variables

411
00:20:54,640 --> 00:20:57,000
de todos los ámbitos principales.

412
00:20:57,000 --> 00:20:58,790
Y este es nuestro alcance,

413
00:20:58,790 --> 00:21:02,230
y la cadena de alcance están integradas en el motor de JavaScript

414
00:21:02,230 --> 00:21:03,663
entre bastidores.

415
00:21:04,650 --> 00:21:05,650
Bueno.

416
00:21:05,650 --> 00:21:07,700
Ahora en la segunda función,

417
00:21:07,700 --> 00:21:11,220
tratamos de llamar a la tercera función.

418
00:21:11,220 --> 00:21:13,270
Pero, ¿por qué funciona eso?

419
00:21:13,270 --> 00:21:16,150
Bueno, funciona porque la tercera función

420
00:21:16,150 --> 00:21:20,010
está en la cadena de ámbito del segundo ámbito de función

421
00:21:20,010 --> 00:21:23,770
como podemos ver aquí en nuestro diagrama de cadena de alcance.

422
00:21:23,770 --> 00:21:28,470
Es una función en el ámbito global o una función global,

423
00:21:28,470 --> 00:21:32,030
y por lo tanto es accesible en todas partes.

424
00:21:32,030 --> 00:21:34,740
Por supuesto, esto creará un nuevo alcance.

425
00:21:34,740 --> 00:21:38,363
junto con la cadena de alcance como ya sabemos.

426
00:21:39,230 --> 00:21:43,330
Genial, entonces, ¿qué sucede en esta tercera función?

427
00:21:43,330 --> 00:21:47,120
Bueno, estamos tratando de actuar como variables B, C,

428
00:21:47,120 --> 00:21:49,750
D y A aquí.

429
00:21:49,750 --> 00:21:53,160
D no hay problema porque está justo ahí

430
00:21:53,160 --> 00:21:55,330
en el tercer ámbito de funciones.

431
00:21:55,330 --> 00:21:57,610
Así que ese es fácil.

432
00:21:57,610 --> 00:22:01,460
Entonces la variable C no está en un ámbito local

433
00:22:01,460 --> 00:22:05,460
y entonces JavaScript necesita hacer una búsqueda de variables.

434
00:22:05,460 --> 00:22:07,810
Entonces busca en una cadena de alcance

435
00:22:07,810 --> 00:22:10,120
buscando la variable C,

436
00:22:10,120 --> 00:22:12,300
pero no está allí.

437
00:22:12,300 --> 00:22:14,010
Y por supuesto que no lo es,

438
00:22:14,010 --> 00:22:17,510
porque C está definido en la segunda función,

439
00:22:17,510 --> 00:22:20,980
y simplemente no hay forma en que la tercera función

440
00:22:20,980 --> 00:22:25,420
puede acceder a las variables definidas en la segunda función.

441
00:22:25,420 --> 00:22:26,540
Y eso es cierto,

442
00:22:26,540 --> 00:22:30,640
aunque fue la segunda función la que llamó a la tercera.

443
00:22:30,640 --> 00:22:32,780
Y aquí hay aún más pruebas

444
00:22:32,780 --> 00:22:35,400
que el orden en que se llaman las funciones

445
00:22:35,400 --> 00:22:38,840
no afecta la cadena de alcance en absoluto.

446
00:22:38,840 --> 00:22:40,970
Y aquí como resultado,

447
00:22:40,970 --> 00:22:42,990
obtenemos el error de referencia

448
00:22:42,990 --> 00:22:46,700
porque tanto C como B no se pueden encontrar

449
00:22:46,700 --> 00:22:50,063
en el tercer ámbito ni en la cadena de ámbito.

450
00:22:51,030 --> 00:22:51,863
Bueno.

451
00:22:51,863 --> 00:22:54,810
Y con esto, espero haberlo dejado muy claro.

452
00:22:54,810 --> 00:22:58,540
ese contexto de ejecución, entornos variables,

453
00:22:58,540 --> 00:23:03,240
el alcance de la pila de llamadas y la cadena de alcance son todos diferentes,

454
00:23:03,240 --> 00:23:06,040
pero todavía conceptos muy relacionados.

455
00:23:06,040 --> 00:23:08,450
Y si aún no está claro como el cristal,

456
00:23:08,450 --> 00:23:12,220
entonces no hay problema en volver a ver esta diapositiva,

457
00:23:12,220 --> 00:23:15,423
o tal vez incluso toda esta conferencia un poco más tarde.

458
00:23:16,540 --> 00:23:19,830
Y sé que esta fue una conferencia bastante larga.

459
00:23:19,830 --> 00:23:23,000
con un montón de cosas para asimilar.

460
00:23:23,000 --> 00:23:25,250
Y aquí hay un resumen útil

461
00:23:25,250 --> 00:23:28,830
con las principales conclusiones de este video.

462
00:23:28,830 --> 00:23:32,667
Entonces, para comenzar, el alcance hace la pregunta,

463
00:23:32,667 --> 00:23:34,990
"¿Dónde viven las variables?"

464
00:23:34,990 --> 00:23:38,277
O "¿Dónde podemos acceder a una determinada variable,

465
00:23:38,277 --> 00:23:39,860
"¿Y dónde no?"

466
00:23:39,860 --> 00:23:42,623
De eso se trata el alcance.

467
00:23:43,480 --> 00:23:47,230
Ahora, hay tres tipos de alcance en JavaScript.

468
00:23:47,230 --> 00:23:50,810
El alcance global, alcances definidos por funciones

469
00:23:50,810 --> 00:23:55,570
y ámbitos definidos por bloques, a partir de ES6.

470
00:23:55,570 --> 00:24:00,200
Sin embargo, solo las variables let y const tienen alcance de bloque.

471
00:24:00,200 --> 00:24:04,030
Las variables declaradas con var terminan automáticamente

472
00:24:04,030 --> 00:24:05,993
en el ámbito de función más cercano.

473
00:24:06,830 --> 00:24:10,590
A continuación, en JavaScript, tenemos alcance léxico,

474
00:24:10,590 --> 00:24:14,580
lo que significa que las reglas de dónde podemos acceder a las variables

475
00:24:14,580 --> 00:24:17,100
se basan en el lugar de las funciones del código

476
00:24:17,100 --> 00:24:18,943
y se escriben bloques.

477
00:24:19,820 --> 00:24:22,580
Y ahora, que empiece la magia,

478
00:24:22,580 --> 00:24:25,820
porque cada alcance siempre tiene acceso

479
00:24:25,820 --> 00:24:29,710
a todas las variables de todos sus ámbitos externos.

480
00:24:29,710 --> 00:24:32,890
Y esto es lo que llamamos la cadena de alcance.

481
00:24:32,890 --> 00:24:36,630
Cuando una determinada variable no está en el alcance actual,

482
00:24:36,630 --> 00:24:39,150
el motor mira hacia arriba en la cadena de alcance

483
00:24:39,150 --> 00:24:42,630
hasta que encuentre la variable que está buscando,

484
00:24:42,630 --> 00:24:46,240
y este proceso se llama búsqueda de variables.

485
00:24:46,240 --> 00:24:48,720
Es importante tener en cuenta que la cadena de alcance

486
00:24:48,720 --> 00:24:50,850
es una calle de sentido único.

487
00:24:50,850 --> 00:24:55,300
Entonces, un alcance nunca tendrá acceso a las variables.

488
00:24:55,300 --> 00:24:59,620
de un alcance interno, solo de alcances externos.

489
00:24:59,620 --> 00:25:03,490
También podemos pensar en la cadena de alcance en un cierto alcance

490
00:25:03,490 --> 00:25:05,690
como siendo igual a sumar

491
00:25:05,690 --> 00:25:10,280
todos los entornos variables de todos los ámbitos principales.

492
00:25:10,280 --> 00:25:12,780
Y finalmente, debemos tener en cuenta

493
00:25:12,780 --> 00:25:15,350
que la cadena de alcance no tiene nada que ver

494
00:25:15,350 --> 00:25:18,970
con el orden en que se llamaron las funciones.

495
00:25:18,970 --> 00:25:21,460
Así que el orden de las llamadas a funciones

496
00:25:21,460 --> 00:25:24,343
no afecta la cadena de alcance en absoluto.

497
00:25:25,260 --> 00:25:27,920
Bien, y ahora eso es todo.

498
00:25:27,920 --> 00:25:32,410
Esto es, en pocas palabras, alcance en JavaScript.

499
00:25:32,410 --> 00:25:34,363
Nos vemos en el próximo vídeo.