ES6 let vs var vs const, oh my! ES6 ya está aquí y los desarrolladores lo están utilizando ahora. Hay muchas diferencias entre ES6 y su predecesor ES5, y si desea hacer uso de las nuevas funciones disponibles, debe aprender cómo funcionan las cosas en ES6. En este tutorial, comenzaremos desde el principio en ES6 y examinaremos la nueva palabra clave let, la palabra clave const, así como el alcance del bloque en ES6. Abróchate el cinturón y profundicemos en los inicios de ES6 ahora mismo.
La nueva let
palabra clave en ES6
let
es una nueva palabra clave para la declaración de variables en ES6 y una de las cosas clave que hace es deshacerse de la elevación. Veamos qué significa eso.
Declaración e inicialización de variables de estilo ES5 (elevación)
Aquí tenemos un script simple que registra el valor de a userid
. Tenga en cuenta que asignamos el valor de userid
después de cerrar la sesión. En este caso encontramos el resultado de undefined
. undefined
Sin embargo, ¿ cómo puede ser ? Esto se debe a la forma en que JavaScript usa la elevación , lo que significa que mueve la declaración a la parte superior de cualquier función, o en este ejemplo estamos en el ámbito global. Veamos cómo pueden cambiar las cosas si usamos la palabra clave let en ES6.
Declaración e inicialización de variables de estilo ES6 (sin elevación)
Esta vez usamos la let
palabra clave y notamos la diferencia. Obtenemos un error bastante retorcido: ReferenceError: no se puede acceder a la declaración léxica 'userid' antes de la inicialización . ¿Por qué pasó esto? Esto se debe a que en ES6, el uso de la let
palabra clave elimina el izado que suele tener lugar cuando var
se usa a. En JavaScript moderno, encontramos a muchos desarrolladores de software que abandonan var y se mueven a dejar exclusivamente porque ayuda a reducir los errores y errores difíciles de encontrar.
Declarar una variable con dejar antes de usar
Ahora seguiremos haciendo uso de la palabra clave let , pero ahora cambiemos el orden de asignación de la variable y cierre la sesión en la consola. Asignaremos antes de iniciar sesión.
Ah, sí, finalmente. Obtenemos lo que hemos querido, que es asignar correctamente el número 1 a nuestra userid
variable. Parece un poco extraño que lo llamaran let , ya que let sigue siendo una variable, pero lamentablemente esta es la convención de nomenclatura del nuevo tipo de variable en ES6. Déjalo ser, déjalo ser, hablando palabras de sabiduría, déjalo ser ...
Declarar una variable con let, pero sin asignación
¿Qué pasa si declaramos una variable usando let
, pero no le asignamos nada antes de hacer uso de ella? ¿Qué sucede en este escenario? Echemos un vistazo.
Al igual que var
en ES5, si declaramos pero no inicializamos una variable let
en ES6, el valor se establece en undefined
.
Block Scope en ES6!
ES6 ahora tiene alcance de bloque, y esta es una de las nuevas características que tanto a mí como a muchos otros nos entusiasman. En ES5 todo lo que teníamos era el alcance de la función, y la gente ideó todas las formas de administrar el alcance a través de patrones esotéricos y complejos como la Expresión de Función Invocada Inmediatamente de IIFE - Pronunciada “dudosa”.
Este es un ejemplo que hace uso del alcance de bloque en ES6. En este ejemplo aquí, definimos userid
dos tiempos. Primero se define en el ámbito global, luego lo definimos entre las llaves que denota un bloque de código. Cuando desconectamos el valor de esa variable fuera del bloque, tenga en cuenta que obtenemos el valor de 10
. Esto es lo que se llama alcance de bloque . Cambiar esas let
palabras clave de nuevo a var
nos da un resultado muy diferente. Veamos.
Puede ver que cuando volvemos a usar la var
palabra clave, esa asignación de 200 userid
dentro del bloque básicamente sobrescribe la declaración de variable original y la inicialización de 10
to userid
. Por supuesto, tener un bloque aleatorio como este ejemplo no es realmente común, pero esto se aplicaría a cosas como si y para declaraciones que hacen uso de bloques.
¿Puede acceder a una variable fuera del bloque cuando let
se utiliza?
¿Qué sucede si intentamos acceder a una variable definida con let
fuera del bloque en el que se usó? Probémoslo ahora.
Parece que obtenemos un error de ReferenceError: el ID de usuario no está definido [ Más información ]. Los amables amigos de Mozilla Developer Network nos dicen exactamente lo que esto significa: hay una variable inexistente referenciada en alguna parte. Esta variable debe declararse o debe asegurarse de que esté disponible en su secuencia de comandos o alcance actual. Lo que eso nos dice en este ejemplo es que cuando un bloque termina, las variables locales definidas en ese bloque ya no están disponibles.
La zona muerta temporal
Declaramos una función y asignamos el valor de 1234
a la userid
variable en esa función. La nota userid
aún no ha sido declarada oficialmente. Después de la función, la declaramos userid
y la configuramos en null
using let
. updateUserId () get es llamado, luego desconectamos el valor de userid
. El resultado de esta llamada a console.log es 1234
. Esto se debe a que el uso de userid
en la función ocurre en la zona muerta temporal . El compilador toma nota de userid
la función a pesar de que aún no está declarada, y es por eso que todavía funciona y se desconecta 1243
.
Alcance de bloque ES6 con bucles for
Al observar la salida de este script de ejemplo de ES6, podemos ver que la userid
variable declarada antes del ciclo for usando la let
palabra clave, y la userid
declarada dentro del ciclo for, también con la let
palabra clave, son dos variables diferentes que cada una tiene sus propios valores y propio ámbito asociado a ellos. A medida que el bucle for comienza a ejecutarse, registra el valor de userid
en cada iteración. En esta parte de la secuencia de comandos, el userid
ámbito del bucle for. Cuando el ciclo termina, ese es el final de ese bloque y fuera de ese bloque userid
se encuentra el valor 321, que fue declarado e inicializado en la parte superior.
Cierre de ES5 vs cierre de ES6
El cierre funciona de manera un poco diferente en ES6 vs ES5, así que echemos un vistazo a eso aquí. Creamos una matriz que contiene una función en cada índice de la matriz. Completamos esta matriz usando el método .push () de JavaScript. Por lo tanto, en cada iteración se agrega una función a la matriz. Lo único que hace cada función es devolver el valor de i
. Finalmente, desconectamos el resultado de llamar a la función en el índice cero de la matriz. Verá resultados diferentes en función de si se usa a var
o a let
para declarar el i
contador en el bucle for. Veamos.
Ahora, la función que vive en el índice 0 en la matriz devuelve el valor de i
para la primera iteración del ciclo. Entonces pensarías que i
debería ser así 0
, pero vemos en su 5
lugar. ¿Porqué es eso? La razón es que se crea un cierre sobre la i
variable y al final del ciclo, i
se establece en 5
. Debido a esto, la función siempre regresará 5
.
En esta segunda iteración de usar el cierre, lo cambiamos y lo usamos en let
lugar de var
en el for
ciclo. Cuando ahora desconectamos el valor de llamar a la función que existe en el índice 0 en la matriz, el resultado es 0
. Esto es un poco más parecido a lo que cabría esperar. Cuando usamos let
en un ciclo for, cada iteración del ciclo obtendrá su propia i
variable. Cualquier cierre creado se cerrará por encima de su propio valor o i
diferente al usarlo var
.
Constantes en ES6
En ES6, ahora puede hacer uso de constantes en su código JavaScript mediante el uso de la const
palabra clave. Una constante se usa cuando necesita declarar algo para que tenga un valor que no cambiará en ningún momento. Veamos algunos ejemplos del uso de una constante y su uso const
en ES6.
Usando MAYÚSCULAS y la const
palabra clave ES6
En realidad, no es necesario utilizar todas las letras mayúsculas para el nombre de la constante, pero esta es una convención en la programación en casi cualquier lenguaje, por lo que tiene sentido usarla aquí también en ES6 JavaScript.
Intentando usar un const
sin inicialización
Al hacer uso de la const
palabra clave, debe inicializarla al mismo tiempo. Si no lo hace, se encontrará con un problema como muestra el ejemplo anterior.
Reasignación de un valor a una constante
Si intenta asignar un nuevo valor a una constante después de que ya ha sido declarada e inicializada, obtendrá un error similar a lo que ve aquí: TypeError: asignación inválida a const 'TAXES' . Una vez que se declara e inicializa una constante, eso es todo, no puede actualizar o cambiar su valor en ese ámbito.
Constantes en diferentes ámbitos
Hablando de constantes y alcances, veamos un ejemplo de eso ahora.
En este ejemplo, podemos ver que a la constante TAXES se le asigna un valor dos veces. No se arroja ningún error y obtenemos un valor de 'Demasiado alto' cuando desconectamos el valor de IMPUESTOS. Wat? Bueno, lo que pasa es que similar a let
, a const
tiene el concepto de alcance de bloque. Por lo tanto, cuando el script profundiza en la rama if, de hecho asigna 'Way Too High' a la constante TAXES. Sin embargo, sucede que esta instancia de TAXES está completamente separada de la constante TAXES definida al comienzo del script. Hay dos ámbitos en juego aquí, el ámbito de bloque de la instrucción if y el ámbito global externo. Las constantes del mismo nombre pueden coexistir pacíficamente en diferentes ámbitos, incluso con el mismo nombre. No hay problemas con eso.
ES6 let
vs var
vs const
resumen
Si es nuevo en ES6, es de esperar que haya aprendido algunas cosas sobre las nuevas palabras clave let y const, así como el alcance del bloque. Admito que cubrir los conceptos básicos de bajo nivel no es tan divertido como los tutoriales en los que podemos crear algo más práctico, pero aprender los conceptos básicos de cualquier nueva tecnología es clave para construir una base sólida sobre la cual desarrollar nuestro conocimiento. Esta fue una buena introducción y tocamos el uso de let y la comprensión de las diferencias que existen al usar var. La palabra clave let no se eleva, por lo que este es un comportamiento completamente nuevo que debemos aprender, pero también coincide más estrechamente con lo que podríamos pensar sobre el código en general. También vimos que tenemos una nueva palabra clave const que nos permite definir constantes en nuestros programas, de forma similar a como lo haríamos en otros lenguajes que soportan constantes. Finalmente, echamos un vistazo al alcance del bloque.
0 Comentarios
Dejanos tu comentario para seguir mejorando!