1
00:00:01,530 --> 00:00:03,490
El siguiente tema del que tenemos que hablar

2
00:00:03,490 --> 00:00:07,570
es un concepto muy mal entendido en JavaScript

3
00:00:07,570 --> 00:00:09,313
y eso es izar.

4
00:00:11,550 --> 00:00:14,380
Entonces aprendimos que un contexto de ejecución

5
00:00:14,380 --> 00:00:16,810
siempre contiene tres partes.

6
00:00:16,810 --> 00:00:18,800
Un entorno variable,

7
00:00:18,800 --> 00:00:21,530
la cadena de alcance en el contexto actual,

8
00:00:21,530 --> 00:00:23,500
y la palabra clave del disco.

9
00:00:23,500 --> 00:00:26,110
Ya aprendimos sobre la cadena de alcance

10
00:00:26,110 --> 00:00:28,800
y ahora es el momento de echar un vistazo más de cerca

11
00:00:28,800 --> 00:00:31,090
en el entorno variable

12
00:00:31,090 --> 00:00:33,750
y en particular en cómo las variables

13
00:00:33,750 --> 00:00:37,320
en realidad se crean en JavaScript.

14
00:00:37,320 --> 00:00:38,810
Entonces en JavaScript

15
00:00:38,810 --> 00:00:41,630
tenemos un mecanismo llamado elevación.

16
00:00:41,630 --> 00:00:43,600
Y izar básicamente hacer

17
00:00:43,600 --> 00:00:46,450
algunos tipos de variables accesibles,

18
00:00:46,450 --> 00:00:49,570
o digamos usable en el código

19
00:00:49,570 --> 00:00:52,963
antes de que se declaren en el código.

20
00:00:53,830 --> 00:00:56,520
Ahora, muchas personas simplemente definen el levantamiento

21
00:00:56,520 --> 00:01:00,030
diciendo que las variables se levantan mágicamente

22
00:01:00,030 --> 00:01:03,530
o movido a la parte superior de su alcance

23
00:01:03,530 --> 00:01:06,640
por ejemplo, en la parte superior de una función.

24
00:01:06,640 --> 00:01:08,790
Y eso es en realidad lo que iza

25
00:01:08,790 --> 00:01:11,020
parece en la superficie.

26
00:01:11,020 --> 00:01:12,520
Pero detrás de escena

27
00:01:12,520 --> 00:01:15,830
de hecho, eso no es lo que sucede.

28
00:01:15,830 --> 00:01:17,970
En cambio, detrás de escena

29
00:01:17,970 --> 00:01:19,780
el código es básicamente escaneado

30
00:01:19,780 --> 00:01:24,420
para declaraciones de variables antes de que se ejecute.

31
00:01:24,420 --> 00:01:26,430
Así que esto sucede durante el llamado

32
00:01:26,430 --> 00:01:29,660
fase de creación del contexto de ejecución

33
00:01:29,660 --> 00:01:32,010
que hablábamos antes.

34
00:01:32,010 --> 00:01:35,530
Luego, para cada variable que se encuentra en el código,

35
00:01:35,530 --> 00:01:37,630
se crea una nueva propiedad

36
00:01:37,630 --> 00:01:40,330
en un objeto de entorno variable.

37
00:01:40,330 --> 00:01:43,470
Y así es como funciona realmente la elevación.

38
00:01:43,470 --> 00:01:46,150
Ahora, izar no funciona igual

39
00:01:46,150 --> 00:01:48,160
para todos los tipos de variables.

40
00:01:48,160 --> 00:01:50,890
Y entonces, analicemos la forma en que funciona el alojamiento.

41
00:01:50,890 --> 00:01:53,100
para declaraciones de funciones,

42
00:01:53,100 --> 00:01:55,620
variables definidas con var

43
00:01:55,620 --> 00:01:58,670
variables definidas con let o const

44
00:01:58,670 --> 00:02:00,700
y expresiones de funciones,

45
00:02:00,700 --> 00:02:03,410
y también funciones de flecha.

46
00:02:03,410 --> 00:02:07,060
Entonces, las declaraciones de funciones en realidad se elevan

47
00:02:07,060 --> 00:02:10,360
y el valor inicial en la variable entorno

48
00:02:10,360 --> 00:02:13,550
se establece en la función real.

49
00:02:13,550 --> 00:02:15,970
Así que en la práctica, lo que esto significa

50
00:02:15,970 --> 00:02:18,490
es que podemos usar declaraciones de funciones

51
00:02:18,490 --> 00:02:22,430
antes de que se declaren en el código,

52
00:02:22,430 --> 00:02:24,340
de nuevo, porque se almacenan

53
00:02:24,340 --> 00:02:26,650
en el objeto de entorno variable,

54
00:02:26,650 --> 00:02:30,360
incluso antes de que el código comience a ejecutarse.

55
00:02:30,360 --> 00:02:32,070
Y en realidad te lo dije antes

56
00:02:32,070 --> 00:02:35,030
que las declaraciones de funciones funcionan de esta manera,

57
00:02:35,030 --> 00:02:37,290
pero ahora entiendes por qué.

58
00:02:37,290 --> 00:02:39,900
Es por izar.

59
00:02:39,900 --> 00:02:43,100
Y solo para hacer esta tabla un poco más completa

60
00:02:43,100 --> 00:02:46,450
para que sirva como una buena descripción general para usted,

61
00:02:46,450 --> 00:02:49,280
También muestro aquí que las declaraciones de función

62
00:02:49,280 --> 00:02:52,800
tienen un alcance de bloque como aprendimos antes.

63
00:02:52,800 --> 00:02:55,360
Sólo tenga en cuenta que esto es sólo cierto

64
00:02:55,360 --> 00:02:57,220
para el modo estricto.

65
00:02:57,220 --> 00:02:59,430
Entonces, si está usando un modo descuidado,

66
00:02:59,430 --> 00:03:00,800
que no deberías,

67
00:03:00,800 --> 00:03:04,070
entonces las funciones se funcionan esculpir.

68
00:03:04,070 --> 00:03:07,310
A continuación, las variables declaradas con var.

69
00:03:07,310 --> 00:03:10,370
también se izan, pero la elevación funciona

70
00:03:10,370 --> 00:03:12,430
de una manera diferente aquí.

71
00:03:12,430 --> 00:03:14,010
Entonces, a diferencia de las funciones,

72
00:03:14,010 --> 00:03:16,860
cuando intentamos acceder a una variable var

73
00:03:16,860 --> 00:03:19,220
antes de que se declare en un código,

74
00:03:19,220 --> 00:03:21,760
no obtenemos el valor declarado

75
00:03:21,760 --> 00:03:23,980
pero nos quedamos indefinidos.

76
00:03:23,980 --> 00:03:28,110
Y este es un comportamiento realmente extraño para los principiantes.

77
00:03:28,110 --> 00:03:31,080
Puede esperar que simplemente obtenga un error

78
00:03:31,080 --> 00:03:33,980
cuando se usa una variable antes de declararla

79
00:03:33,980 --> 00:03:36,140
o para obtener el valor real.

80
00:03:36,140 --> 00:03:38,610
Pero para no quedar indefinido

81
00:03:38,610 --> 00:03:42,300
porque ser indefinido es realmente extraño

82
00:03:42,300 --> 00:03:45,640
y tampoco es realmente útil, ¿verdad?

83
00:03:45,640 --> 00:03:47,500
Y en realidad este comportamiento

84
00:03:47,500 --> 00:03:51,130
es una fuente común de errores en JavaScript.

85
00:03:51,130 --> 00:03:53,230
Así que esta es una de las principales razones

86
00:03:53,230 --> 00:03:55,060
por qué en JavaScript moderno

87
00:03:55,060 --> 00:03:58,250
casi nunca usamos var.

88
00:03:58,250 --> 00:03:59,550
Ahora por otro lado,

89
00:03:59,550 --> 00:04:03,680
Las variables let y const no se elevan.

90
00:04:03,680 --> 00:04:07,060
Quiero decir, técnicamente en realidad están izados.

91
00:04:07,060 --> 00:04:11,120
pero su valor se establece básicamente en un valor inicializado.

92
00:04:11,120 --> 00:04:14,420
Así que no hay valor para trabajar en absoluto.

93
00:04:14,420 --> 00:04:17,410
Y así, en la práctica, es como si izaran

94
00:04:17,410 --> 00:04:19,950
no estaba pasando en absoluto.

95
00:04:19,950 --> 00:04:22,280
En su lugar, decimos que estas variables

96
00:04:22,280 --> 00:04:27,280
se colocan en una llamada Zona Muerta Temporal o TDZ

97
00:04:27,540 --> 00:04:30,700
lo que hace que no podamos acceder a las variables

98
00:04:30,700 --> 00:04:32,800
entre el comienzo del alcance

99
00:04:32,800 --> 00:04:36,600
y al lugar donde se declaran las variables.

100
00:04:36,600 --> 00:04:38,010
Entonces como consecuencia,

101
00:04:38,010 --> 00:04:41,380
si intentamos usar una variable let o const

102
00:04:41,380 --> 00:04:45,050
antes de que se declare, obtenemos un error.

103
00:04:45,050 --> 00:04:49,620
También tenga en cuenta que let y const tienen un alcance de bloque.

104
00:04:49,620 --> 00:04:51,620
Entonces solo existen en el bloque.

105
00:04:51,620 --> 00:04:53,700
en que fueron creados.

106
00:04:53,700 --> 00:04:55,850
Y todos estos factores juntos

107
00:04:55,850 --> 00:04:58,700
es básicamente la razón por la que let y const

108
00:04:58,700 --> 00:05:01,420
se introdujeron por primera vez en el idioma,

109
00:05:01,420 --> 00:05:04,130
y por qué los usamos ahora en lugar de var

110
00:05:04,130 --> 00:05:06,450
en JavaScript moderno.

111
00:05:06,450 --> 00:05:07,283
Bueno.

112
00:05:07,283 --> 00:05:09,960
Pero ahora, ¿qué pasa con las expresiones de funciones?

113
00:05:09,960 --> 00:05:11,940
y funciones de flecha?

114
00:05:11,940 --> 00:05:14,710
¿Cómo funciona la elevación para esto?

115
00:05:14,710 --> 00:05:17,270
Bueno, depende si fueron creados.

116
00:05:17,270 --> 00:05:20,540
usando var o const o let.

117
00:05:20,540 --> 00:05:23,020
Porque ten en cuenta que estas funciones

118
00:05:23,020 --> 00:05:24,790
son simplemente variables.

119
00:05:24,790 --> 00:05:27,460
Y entonces se comportan exactamente de la misma manera.

120
00:05:27,460 --> 00:05:30,940
como variables con respecto al izaje.

121
00:05:30,940 --> 00:05:33,220
Esto significa que una expresión de función

122
00:05:33,220 --> 00:05:36,420
o función de flecha creada con var

123
00:05:36,420 --> 00:05:38,600
se eleva a indefinido.

124
00:05:38,600 --> 00:05:41,660
Pero si se crea con let o const,

125
00:05:41,660 --> 00:05:45,130
no se puede usar antes de que se declare en un código

126
00:05:45,130 --> 00:05:48,150
debido a la Zona Muerta Temporal

127
00:05:48,150 --> 00:05:52,620
así que de nuevo, al igual que las variables normales, ¿verdad?

128
00:05:52,620 --> 00:05:56,250
Y esta es en realidad la razón por la que te dije antes

129
00:05:56,250 --> 00:05:58,840
que no podemos usar expresiones de función

130
00:05:58,840 --> 00:06:01,450
antes de escribirlos en el código,

131
00:06:01,450 --> 00:06:03,823
a diferencia de las declaraciones de funciones.

132
00:06:05,480 --> 00:06:06,380
Bueno.

133
00:06:06,380 --> 00:06:08,320
Pero ahora antes de terminar,

134
00:06:08,320 --> 00:06:10,550
echemos un vistazo más detallado

135
00:06:10,550 --> 00:06:14,020
en esta misteriosa Zona Muerta Temporal.

136
00:06:14,020 --> 00:06:16,090
Así que en este código de ejemplo

137
00:06:16,090 --> 00:06:19,620
vamos a ver la variable del trabajo.

138
00:06:19,620 --> 00:06:24,210
Es una const, por lo que tiene un alcance solo para este bloque if

139
00:06:24,210 --> 00:06:25,760
y va a ser accesible

140
00:06:25,760 --> 00:06:29,330
a partir de la línea donde se define.

141
00:06:29,330 --> 00:06:30,490
¿Por qué?

142
00:06:30,490 --> 00:06:33,920
Bueno, porque existe esta Zona Muerta Temporal

143
00:06:33,920 --> 00:06:36,130
para la variable del trabajo.

144
00:06:36,130 --> 00:06:38,230
Es básicamente la región del alcance.

145
00:06:38,230 --> 00:06:40,540
en el que se define la variable,

146
00:06:40,540 --> 00:06:43,260
pero no se puede usar de ninguna manera.

147
00:06:43,260 --> 00:06:47,650
Entonces es como si la variable ni siquiera existiera.

148
00:06:47,650 --> 00:06:50,510
Ahora, si aún intentáramos acceder a la variable

149
00:06:50,510 --> 00:06:53,390
mientras que en la TDZ como en realidad

150
00:06:53,390 --> 00:06:56,580
do en la primera línea de este bloque if,

151
00:06:56,580 --> 00:06:58,810
entonces obtenemos un error de referencia

152
00:06:58,810 --> 00:07:01,170
diciéndonos que no podemos acceder al trabajo

153
00:07:01,170 --> 00:07:03,320
antes de la inicialización.

154
00:07:03,320 --> 00:07:04,970
Exactamente como aprendimos

155
00:07:04,970 --> 00:07:06,823
en la última diapositiva, ¿verdad?

156
00:07:07,720 --> 00:07:10,773
Sin embargo, si tratamos de acceder a una variable

157
00:07:10,773 --> 00:07:13,710
que en realidad ni siquiera fue creado,

158
00:07:13,710 --> 00:07:15,470
como en la última línea aquí

159
00:07:15,470 --> 00:07:17,670
donde queremos registrar x,

160
00:07:17,670 --> 00:07:20,090
entonces recibimos un mensaje de error diferente

161
00:07:20,090 --> 00:07:23,720
diciendo que x no está definida en absoluto.

162
00:07:23,720 --> 00:07:25,820
Lo que esto significa es que el trabajo es

163
00:07:25,820 --> 00:07:28,430
de hecho en la Zona Muerta Temporal

164
00:07:28,430 --> 00:07:30,550
donde todavía está inicializado,

165
00:07:30,550 --> 00:07:32,370
pero el motor sabe que lo hará

166
00:07:32,370 --> 00:07:34,900
eventualmente ser inicializado

167
00:07:34,900 --> 00:07:37,610
porque ya leyó el código antes

168
00:07:37,610 --> 00:07:41,010
y establecer la variable de trabajo en el entorno variable

169
00:07:41,010 --> 00:07:43,200
a no inicializado.

170
00:07:43,200 --> 00:07:45,530
Luego, cuando la ejecución llega a la línea

171
00:07:45,530 --> 00:07:47,690
donde se declara la variable,

172
00:07:47,690 --> 00:07:50,300
se elimina de la Zona Muerta Temporal

173
00:07:50,300 --> 00:07:53,000
y entonces es seguro de usar.

174
00:07:53,000 --> 00:07:56,130
Para recapitular, básicamente todos y cada uno

175
00:07:56,130 --> 00:07:58,540
let y const variable obtienen su propia

176
00:07:58,540 --> 00:08:00,570
Zona Muerta Temporal que comienza

177
00:08:00,570 --> 00:08:02,250
al principio del alcance

178
00:08:02,250 --> 00:08:05,180
hasta la línea donde se define.

179
00:08:05,180 --> 00:08:07,660
Y la variable solo es segura de usar

180
00:08:07,660 --> 00:08:09,990
después de la TDZ,

181
00:08:09,990 --> 00:08:12,740
por lo que la Zona Muerta Temporal.

182
00:08:12,740 --> 00:08:15,920
Muy bien, ahora cuál es realmente la necesidad

183
00:08:15,920 --> 00:08:19,480
para que JavaScript tenga una zona muerta temporal?

184
00:08:19,480 --> 00:08:22,320
Bueno, la razón principal por la que TDZ

185
00:08:22,320 --> 00:08:25,340
se introdujo en ES6 es que

186
00:08:25,340 --> 00:08:27,490
el comportamiento que describí antes

187
00:08:27,490 --> 00:08:31,660
hace que sea mucho más fácil evitar y detectar errores.

188
00:08:31,660 --> 00:08:35,030
Porque usar una variable que está configurada como indefinida

189
00:08:35,030 --> 00:08:37,150
antes de que sea realmente declarado

190
00:08:37,150 --> 00:08:39,150
puede causar errores graves

191
00:08:39,150 --> 00:08:41,320
que puede ser difícil de encontrar.

192
00:08:41,320 --> 00:08:43,050
Y les mostraré un pequeño ejemplo.

193
00:08:43,050 --> 00:08:44,253
en la próxima conferencia.

194
00:08:45,290 --> 00:08:48,430
Así que acceder a las variables antes de la declaración

195
00:08:48,430 --> 00:08:51,650
es una mala práctica y debe evitarse.

196
00:08:51,650 --> 00:08:53,530
Y la mejor forma de evitarlo

197
00:08:53,530 --> 00:08:55,360
es simplemente obteniendo un error

198
00:08:55,360 --> 00:08:57,410
cuando intentamos hacerlo.

199
00:08:57,410 --> 00:09:00,653
Y eso es exactamente lo que hace una zona muerta temporal.

200
00:09:01,610 --> 00:09:05,880
Una segunda y menor razón por la que existe la TDZ

201
00:09:05,880 --> 00:09:07,570
es hacer variables constantes

202
00:09:07,570 --> 00:09:10,770
realmente funcionan de la manera en que se supone que deben hacerlo.

203
00:09:10,770 --> 00:09:14,560
Entonces, como saben, no podemos reasignar variables constantes.

204
00:09:14,560 --> 00:09:16,270
Así que no será posible

205
00:09:16,270 --> 00:09:18,350
para configurarlos como indefinidos primero

206
00:09:18,350 --> 00:09:21,700
y luego asignar su valor real más adelante.

207
00:09:21,700 --> 00:09:24,340
Const nunca debe reasignarse.

208
00:09:24,340 --> 00:09:27,200
Y por lo tanto, solo se asigna cuando se ejecuta

209
00:09:27,200 --> 00:09:30,090
realmente llega a la declaración.

210
00:09:30,090 --> 00:09:31,690
Y eso lo hace imposible

211
00:09:31,690 --> 00:09:34,160
para usar la variable antes.

212
00:09:34,160 --> 00:09:36,083
¿Bueno? ¿Tiene sentido?

213
00:09:37,000 --> 00:09:40,530
Ahora, si la elevación crea tantos problemas,

214
00:09:40,530 --> 00:09:43,720
¿Por qué existe en primer lugar?

215
00:09:43,720 --> 00:09:45,720
Me hacen esta pregunta todo el tiempo.

216
00:09:45,720 --> 00:09:48,660
Y entonces, hablemos rápidamente de eso aquí.

217
00:09:48,660 --> 00:09:51,460
Así que el creador de JavaScript básicamente

218
00:09:51,460 --> 00:09:53,050
izaje implementado

219
00:09:53,050 --> 00:09:55,480
para que podamos usar declaraciones de funciones

220
00:09:55,480 --> 00:09:57,330
antes de que los usemos.

221
00:09:57,330 --> 00:09:58,930
porque esto es fundamental

222
00:09:58,930 --> 00:10:01,020
para algunas técnicas de programación,

223
00:10:01,020 --> 00:10:03,570
como la recursividad mutua.

224
00:10:03,570 --> 00:10:06,100
Algunas personas también piensan que hace código

225
00:10:06,100 --> 00:10:08,310
mucho más legible.

226
00:10:08,310 --> 00:10:12,220
Ahora, el hecho de que también funcione para declaraciones var

227
00:10:12,220 --> 00:10:14,700
es porque esa era la única forma de izar

228
00:10:14,700 --> 00:10:17,390
podría implementarse en su momento.

229
00:10:17,390 --> 00:10:20,090
Así que el izado de variables var

230
00:10:20,090 --> 00:10:22,140
es básicamente solo un subproducto

231
00:10:22,140 --> 00:10:24,290
de las funciones de elevación.

232
00:10:24,290 --> 00:10:27,000
Y probablemente parecía una buena idea.

233
00:10:27,000 --> 00:10:29,860
para simplemente establecer las variables en indefinidas,

234
00:10:29,860 --> 00:10:33,460
que en retrospectiva no es realmente tan bueno.

235
00:10:33,460 --> 00:10:35,780
Pero debemos recordar que JavaScript

236
00:10:35,780 --> 00:10:38,160
nunca tuvo la intención de convertirse en el enorme

237
00:10:38,160 --> 00:10:41,090
lenguaje de programación que es hoy.

238
00:10:41,090 --> 00:10:43,350
Además, no podemos eliminar esta función.

239
00:10:43,350 --> 00:10:44,850
del lenguaje ahora.

240
00:10:44,850 --> 00:10:48,323
Entonces, solo usamos let y const para solucionar esto.

241
00:10:49,610 --> 00:10:51,580
Muy bien, genial.

242
00:10:51,580 --> 00:10:53,780
Y con todo lo dicho,

243
00:10:53,780 --> 00:10:57,573
Ahora trabajemos en algunos ejemplos prácticos de elevación.