Tal vez no lo parecía
pero izar es en realidad un proceso bastante sencillo.
Entonces, repasemos los diferentes escenarios aquí.
comenzando con las variables.
Así que vamos a crear tres variables aquí
utilizando las tres formas diferentes de declararlos.
Así que ahora deja el trabajo, maestro.
y luego const para el año de nacimiento
llamémoslo simplemente año 1991.
Y ahora intentemos usar
todas estas tres variables
antes de declararlos, solo para ver que pasa.
Así que yo, trabajo y año.
Así que de las reglas que aprendimos
en la conferencia anterior,
¿Qué esperas que pase ahora?
Bueno, el primer resultado de registro de puntos de la consola es indefinido,
y eso es porque las variables declaradas
con var son realmente izadas,
pero se izan al valor de indefinidos.
Y por lo tanto, cuando tratamos de acceder a ellos
undefined es exactamente el resultado que obtenemos.
Y esa es la razón por la que vemos esto aquí.
Entonces por el contrario tenemos esta variable let,
y entonces aquí vemos que no podemos
acceder al trabajo antes de la inicialización.
Y ese es exactamente el tipo de error
que les mostré en la última diapositiva.
Y el origen de este error.
es el hecho de que la variable del trabajo sigue siendo
en la zona muerta temporal aquí en este punto.
Correcto, recuerda que la zona muerta temporal
de una variable declarada con let o const,
comienza desde el principio del alcance actual
y eso es básicamente aquí,
así que en este caso, es el alcance global.
Entonces, desde el comienzo del alcance
hasta el punto del código donde se define
y así aquí.
Y esto significa que en este punto, por supuesto,
la variable del trabajo todavía está en la zona muerta temporal,
y lo mismo es cierto para el año.
Y ahora tenemos el mismo error aquí
también para la variable año.
Muy bien, entonces comentemos ambos.
Déjame justo aquí
que es izar con variables
y ahora vamos a probar funciones.
Así que vamos a crear declaraciones de función
y expresiones de función aquí.
Así que funciona, y nuevamente usaré un complemento simple
déjame llamarlo, addDecl,
que significa declaración a, b
y devuelve a más b,
y ahora una expresión de función.
Entonces addExpression, a la vez devuelve un plus b.
Y ahora que estamos haciendo estos dos,
también creemos una flecha.
Así que agregue Flecha, a, b y devuelva a más b implícitamente.
Así que espero que recuerdes
que así es como funciona la función flecha.
Y ahora una vez más
intentemos usar estas funciones,
antes de que se definan.
Y entonces los registraré en la consola,
así que el resultado de llamarlos
porque devolvieron algo,
y entonces necesitamos registrar el resultado en la consola
pues como ya sabes.
Así que sumamos dos más tres,
y ahora que crees que pasara?
¿Crees que volverá a ser indefinido?
al igual que tenemos aquí con la variable var?
Vamos a ver.
Y no, en realidad obtenemos el resultado de cinco.
Y así de hecho pudimos
para llamar a la declaración de la función
antes de que se definiera realmente aquí en el código.
Muy bien, y ahora intentemos lo mismo.
para las otras dos expresiones y addArrow,
pero ahora espero que ya puedas
anticipar lo que va a pasar.
Y así de hecho obtenemos un
no se puede acceder a addExpression antes de la inicialización.
Y ese es exactamente el mismo error.
que tenemos antes aquí
con estas variables let y const.
Y eso es porque esta función aquí ahora mismo
es simplemente una variable constante también.
Y eso significa que ahora también
en la zona muerta temporal, ¿verdad?
Así que de nuevo simplemente estamos asignando
un valor de función a esta variable.
Y como esta variable se definió con const,
ahora está en una zona muerta temporal
y por lo tanto obtenemos este exacto
mismo mensaje de error que antes.
Y lo mismo por supuesto
va a pasar con la flecha, ¿verdad?
Pero ahora déjame mostrarte lo que sucede
cuando los cambiamos a var.
Entonces, ¿crees que ahora funcionará de alguna manera?
De acuerdo, todavía obtenemos un error,
pero es otro mensaje de error aquí.
Así que en este momento addExpression no es una función.
Una vez mas
lo mismo sucederá con la flecha.
Bien, y ahora pensemos en la razón.
para este mensaje de error diferente aquí.
Como ya sabes, cualquier variable declarada
con var se izará y se establecerá en indefinido.
Y ahora este addExpression aquí es esencialmente eso,
es una variable declarada con var
y por lo tanto ahora mismo es indefinido.
Y luego aquí estamos intentando
para llamar indefinido básicamente.
Así que estamos haciendo esencialmente esto tan indefinido
y luego estamos tratando de llamarlo.
Y por lo tanto, no deberíamos obtener exactamente el mismo error.
Entonces ves que no es una función.
Y de hecho, déjame mostrarlo.
a ti aquí aún mejor.
Entonces addArrow ahora debería estar indefinido,
y de hecho, aquí está.
Y una vez más es porque
ahora declaramos estos dos aquí con var.
Bien, entonces simplemente eliminemos ambos
y para que guardes esto como referencia,
Dejaré este como var.
y esto como una constante,
pero solo sepa que ninguno de los dos funcionará.
La única función que puedes usar
antes de declararlo, es la declaración de la función add.
Bueno. Así que ahora cubrimos todas las reglas aquí
y vi cómo funciona la elevación.
Pero ahora vamos a mostrarme un ejemplo muy bueno
lo que puede demostrar una trampa de izar.
Y entonces es un error que podemos cometer fácilmente
si no tenemos cuidado
y al mismo tiempo usa var,
para declarar nuestras variables.
Así que escribamos un ejemplo aquí.
Entonces, para comenzar, declaremos una función ficticia aquí,
entonces una función que es una declaración de función,
y eso es importante
Entonces, una función ficticia que eliminará
el carrito de compras
Así que digamos que tenemos
como un sitio web o una aplicación de comercio electrónico.
Así que simplemente iniciemos sesión aquí, todos los productos eliminados.
Y entonces esta es una función peligrosa.
vale, que no deberíamos estar llamando sin cuidado.
A continuación, también declaremos una variable.
que contiene el número de productos.
Y ahora usaré una var
y esto te mostrará una vez más
por qué no deberíamos usar var productos igual a 10.
Y ahora aquí en la parte superior de nuestro código,
vamos a escribir algo de logica
que eliminará el carrito de compras,
siempre que el número de productos sea cero.
Ahora ya sabemos que el cero es un valor falso
y entonces podemos escribir esto, ¿verdad?
Entonces, en este caso, queremos llamar,
eliminar el carrito de la compra ahora, ¿verdad?
De nuevo, aquí tenemos var numProducts establecido en 10,
pero entonces aquí tenemos esta lógica
en el que queremos escribir que
cuando no hay productos,
queremos eliminar el carrito de compras.
Pero ahora, ¿qué sucedería realmente?
Entonces eliminamos todos los productos
aunque numProducts es en realidad 10.
Entonces, ¿por qué sucedió eso?
Bueno, es debido a la elevación.
Así que en este punto del código aquí,
la variable numProducts es de hecho,
no 10 en cambio, ¿cuál es?
Bueno, es indefinido.
Y eso se debe a la forma en que funciona la elevación.
con variables var.
Así que les mostramos eso muy rápidamente,
y de hecho, ahora aquí de la línea 71,
cuál es este, obtenemos esto indefinido.
Y sabemos que undefined también es un valor falso,
y por lo tanto, este código inculcará ejecutar
aunque pensamos que numProducts es 10,
pero de hecho, es indefinido,
y eso también activará la ejecución.
de este si bloque aquí.
Ahora, por supuesto,
esto es solo un pequeño ejemplo ficticio
pero en una gran base de código
con miles de líneas de código
y sin las mejores prácticas,
algo como esto puede pasar totalmente
y va a ser un error,
que será difícil de encontrar.
Entonces, ¿cuáles son estas mejores prácticas?
¿Cuál es la conclusión de todo esto?
Bueno, como primer paso, como te dije muchas veces
simplemente no use var para declarar variables.
Use const la mayor parte del tiempo para declarar variables
y deja, si realmente necesitas cambiar
la variable más tarde.
También para escribir código limpio,
debes declarar tus variables
en la parte superior de cada alcance.
Eso solo hará que tu código
al menos lucir un poco mejor.
Finalmente, siempre declara todas tus funciones primero.
y utilizarlos sólo después de la declaración.
Y esto se aplica a todo tipo de funciones,
incluso declaraciones de funciones, que se izan.
Entonces podrías usar declaraciones de funciones
antes de declararlos,
pero aún así no hagas eso, simplemente no está limpio.
Bien, entonces lo que te acabo de decir
son las mejores prácticas,
no las reglas de cómo funciona en JavaScript.
Muy bien, y ahora solo para terminar,
ya que estamos hablando de las diferencias
entre let, const y var aquí,
solo tomemos dos minutos
para ver otra pequeña diferencia entre ellos.
Así que volvamos a declarar una variable para cada
Sea y igual a dos.
Así que los valores no importan en absoluto aquí.
Y ahora vamos a echar un vistazo
en el objeto de la ventana en la consola.
De acuerdo, x ha estado fuera de curso, z aquí,
y ahora echemos un vistazo aquí
en el objeto ventana aquí en la consola.
Y la ventana es el objeto global.
de JavaScript en el navegador.
Y puedes ver todo tipo de cosas aquí,
por ejemplo, la ventana de alerta
que hemos usado antes
o también algunas otras funciones
que probablemente ya hayamos usado antes.
Así que no voy a entrar en eso aquí,
pero lo que es importante,
así que vamos hasta aquí abajo
y, por supuesto, puedes explorar esto por ti mismo
por si te interesa,
pero lo que importa aquí
es que además de todas estas funciones,
también obtenemos una propiedad de x igual a uno.
Y esa es exactamente la variable
que declaramos aquí usando la palabra clave var.
Sin embargo, no podemos encontrar y o z aquí
en cualquier parte de este objeto.
Y eso es porque fueron declarados
con let o const.
Y entonces las variables declaradas de esa manera
no cree propiedades en el objeto de la ventana.
Así que déjame demostrarte esto aún mejor.
Entonces podemos decir o podemos probar,
x igual, igual, igual ventana punto x.
Así que aquí estamos probando si x
es en realidad una propiedad del objeto ventana.
Y si lo es, entonces por supuesto
x debe ser igual que el punto x de la ventana.
Y en realidad es cierto.
Y ahora lo mismo para y y z,
y así, en estos casos, ambos son falsos.
Entonces, en conclusión, solo quería hacerle saber
que las variables declaradas con var,
creará una propiedad
en el objeto de ventana global.
Y eso puede tener algunas implicaciones en algunos casos.
Y de nuevo, puedes tomarte un tiempo
para explorar el objeto ventana
porque es muy interesante ver
todo lo que hay ahí.
Está bien, pero dicho esto
pasemos finalmente a nuestro siguiente tema
que va a ser la palabra clave del disco.