ES6 let vs var vs const

 

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 letpalabra clave en ES6

letes 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)

1 2 3 4 5

'use strict'; console.log(userid); var userid = 1;   // undefined

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. undefinedSin 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)

1 2 3 4 5

'use strict'; console.log(userid); let userid = 1;   // ReferenceError: can't access lexical declaration `userid' before initialization

Esta vez usamos la letpalabra 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 letpalabra clave elimina el izado que suele tener lugar cuando varse 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.

1 2 3 4 5

'use strict'; let userid = 1; console.log(userid);   // 1

Ah, sí, finalmente. Obtenemos lo que hemos querido, que es asignar correctamente el número 1 a nuestra useridvariable. 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.

1 2 3 4 5

'use strict'; let userid; console.log(userid);   // undefined

Al igual que varen ES5, si declaramos pero no inicializamos una variable leten 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”.

1 2 3 4 5 6 7 8

'use strict'; let userid = 10; {     let userid = 200; } console.log(userid);   // 10

Este es un ejemplo que hace uso del alcance de bloque en ES6. En este ejemplo aquí, definimos useriddos 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 letpalabras clave de nuevo a varnos da un resultado muy diferente. Veamos.

1 2 3 4 5 6 7 8

'use strict'; var userid = 10; {     var userid = 200; } console.log(userid);   // 200

Puede ver que cuando volvemos a usar la varpalabra clave, esa asignación de 200 useriddentro del bloque básicamente sobrescribe la declaración de variable original y la inicialización de 10to 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 letse utiliza?

¿Qué sucede si intentamos acceder a una variable definida con letfuera del bloque en el que se usó? Probémoslo ahora.

1 2 3 4 5 6 7

'use strict'; {     let userid = 200; } console.log(userid);   // ReferenceError: userid is not defined[Learn More]

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

1 2 3 4 5 6 7 8 9

'use strict'; function updateUserId() {     userid = 1234; } let userid = null; updateUserId(); console.log(userid);   // 1234

Declaramos una función y asignamos el valor de 1234a la useridvariable en esa función. La nota useridaún no ha sido declarada oficialmente. Después de la función, la declaramos useridy la configuramos en nullusing 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 useriden la función ocurre en la zona muerta temporal . El compilador toma nota de useridla 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

'use strict'; let userid = 321; for (let userid = 0; userid < 10; userid++) {     console.log(userid); } console.log(userid);   // 0 // 1 // 2 // 3 // 4 // 5 // 6 // 7 // 8 // 9 // 321

Al observar la salida de este script de ejemplo de ES6, podemos ver que la useridvariable declarada antes del ciclo for usando la letpalabra clave, y la useriddeclarada dentro del ciclo for, también con la letpalabra 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 useriden 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 useridse 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 varo a letpara declarar el icontador en el bucle for. Veamos.

1 2 3 4 5 6 7 8 9 10

'use strict'; let arrayOfFunctions = []; for (var i = 0; i < 5; i++) {     arrayOfFunctions.push(function () {         return i;     }); } console.log(arrayOfFunctions[0]());   // 5

Ahora, la función que vive en el índice 0 en la matriz devuelve el valor de ipara la primera iteración del ciclo. Entonces pensarías que idebería ser así 0, pero vemos en su 5lugar. ¿Porqué es eso? La razón es que se crea un cierre sobre la ivariable y al final del ciclo, ise establece en 5. Debido a esto, la función siempre regresará 5.

1 2 3 4 5 6 7 8 9 10

'use strict'; let arrayOfFunctions = []; for (let i = 0; i < 5; i++) {     arrayOfFunctions.push(function () {         return i;     }); } console.log(arrayOfFunctions[0]());   // 0

En esta segunda iteración de usar el cierre, lo cambiamos y lo usamos en letlugar de varen el forciclo. 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 leten un ciclo for, cada iteración del ciclo obtendrá su propia ivariable. Cualquier cierre creado se cerrará por encima de su propio valor o idiferente al usarlo var.

---

Constantes en ES6

En ES6, ahora puede hacer uso de constantes en su código JavaScript mediante el uso de la constpalabra 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 consten ES6.

---

Usando MAYÚSCULAS y la constpalabra clave ES6

1 2 3 4 5

'use strict'; const TAXES = 'Too High'; console.log(TAXES);   // Too High

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 constsin inicialización

1 2 3 4 5

'use strict'; const TAXES; console.log(TAXES);   // SyntaxError: missing = in const declaration

Al hacer uso de la constpalabra 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

1 2 3 4 5 6

'use strict'; const TAXES = 'Too High'; TAXES = 'Way Too High'; console.log(TAXES);   // TypeError: invalid assignment to const `TAXES'

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.

1 2 3 4 5 6 7 8 9

'use strict'; const TAXES = 'Too High'; if (TAXES == 'Too High') {     const TAXES = 'Way Too High'; }   console.log(TAXES);   // Too High

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 consttiene 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 letvs varvs constresumen

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.