Diferencia entre var, let y const en JavaScript

Desarrollo de JavaScript moderno

¿Qué es el desarrollo de JavaScript moderno?

Los últimos años han marcado una especie de renacimiento en el mundo de JavaScript. Pero para entender dónde está JavaScript hoy, demos un paso atrás y miremos al pasado.

 

JavaScript se introdujo en 1996, pero no fue hasta 1997 que se creó el estándar ECMAScript (ES), en el que se basa JavaScript. En 2009, se publicó ECMAScript 5 (o ES5 como se le llama comúnmente), y esta es la versión de JavaScript con la que la mayoría de los desarrolladores están familiarizados. Sin embargo, no fue hasta el lanzamiento de ECMAScript 2015 (o ES6, como se le conoce más) que JavaScript entró en lo que ahora se conoce como un período de “Desarrollo de JavaScript moderno”.

JavaScript pasó por un lapso de casi 20 años en el que no sucedía mucho. Pero el lanzamiento de ES6, que incluía cosas como clases y módulos, provocó un renovado interés en el desarrollo de JavaScript. De repente, los desarrolladores se dieron cuenta de que JavaScript era más que un lenguaje de programación con el que jugar. Los desarrolladores comenzaron a verlo como algo que pueden usar para armar aplicaciones web complejas.

 

Using a Code Playground

Para comenzar con una prueba de javascript, abriremos en nuestro navegador https://codepen.io/.

Abriremos un nuevo pen y escribiremos lo siguiente:

var message = ‘Hello World’;

console.log(message);  // Shows “Hello World” in console

Function vs Block Scope

Antes de ES6, la única forma en que podía declarar una variable o una función en JavaScript era usando la palabra clave var. Ahora tiene otras opciones, y repasaremos por qué se utilizan.

Para empezar, veamos un poco más de cerca cómo se definen las variables. Se dice que las variables declaradas con la palabra clave var están en el ámbito de la función. Esto significa que una variable existiría solo dentro del alcance de la función en la que fue declarada.

Eso tiene sentido. Y todavía tiene sentido cuando se considera el ámbito global, en el que una variable se declara fuera de una función. Tomemos, por ejemplo, el siguiente código.

var myVar = 1;function myFunc() {  var myVar = 2;  console.log(myVar); }

myFunc();console.log(myVar);

¿Qué números crees que verías en la consola? ¿1 o 2?

Deberías ver ambos. Primero 2 y luego 1. Debido al alcance de la función, se imprime 2 cuando se llama a la función. Y debido al alcance global, 1 se muestra la segunda vez, cuando la variable se escribe en el registro fuera de la función.

La mayoría de los desarrolladores entienden esto y todo va bien hasta que encuentran un código que contiene una declaración if, como este ejemplo.

var myVar = 1;if (true) {  var myVar = 2;  console.log(myVar);}console.log(myVar);

Ahora bien, ¿qué crees que aparecerá en la consola? ¿La misma cosa?

No. La ejecución de ese código da como resultado que el número 2 aparezca dos veces, porque la palabra clave var no admite el alcance del bloque.

Si eres un desarrollador que viene de un lenguaje diferente, como C ++, C # o Java, es posible que hayas aprendido algo sobre el alcance del bloque y el último ejemplo de código no tiene sentido para ti.

No te  preocupes, esto ha confundido a mucha gente.

Un bloque es cualquier código entre llaves. El alcance de bloques garantiza que las variables definidas dentro de esas llaves no se conviertan en variables globales. En cambio, tienen alcance local. Tener este tipo de control sobre el alcance de las variables lo ayuda a evitar comportamientos inesperados en su código.

Let es el nuevo Var

La falta de alcance de bloques ha causado muchos dolores de cabeza a los desarrolladores de JavaScript, especialmente cuando se trata de variables declaradas en bucles for. ES6 tenía como objetivo acabar con todas estas dificultades innecesarias al introducir la palabra clave let.

Las variables asignadas con let siempre tienen un alcance de bloque. Pero este no es el único beneficio de usar la palabra clave let.

Es posible que esté pensando: “Si la palabra clave let es tan buena y evita todos esos errores confusos, ¿por qué alguien querría usar var?”

Por esta razón, muchos desarrolladores de JavaScript ahora usan let casi exclusivamente. Y le sugiero que lo haga también. El uso de variables con alcance de bloque no solo es menos propenso a errores, sino que también facilita que otros desarrolladores sepan cómo se debe establecer el alcance de una variable.

Y también hay Const

ES6 también introdujo otra palabra clave, const. Probablemente puedas adivinar qué tipo de variable define esto; sí, es una constante.

Esto puede resultar útil cuando necesita declarar una variable que no se puede volver a declarar ni reasignar. Básicamente, es de solo lectura. Si declara una variable como una constante y luego intenta reasignarla más adelante en el código, arroja un error de tipo. Las variables declaradas con la palabra clave const también tienen un alcance de bloque y no se pueden elevar.

Sin embargo, hay un par de cosas que debe tener en cuenta al usar la palabra clave const. Dado que los valores constantes no se pueden reasignar, deben inicializarse en el momento en que se declaran. Si intenta ejecutar el siguiente código, obtendrá un error que le indicará un token inesperado o que falta un inicializador en la declaración const.

const BRANDCOLOR;

console.log(BRANDCOLOR);

Puede ejecutar el siguiente código más adelante y la propiedad de acento se reasignará sin arrojar un error.

Los desarrolladores se suelen equivocar con este concepto: las constantes no son inmutables. Esto significa que es posible modificar las propiedades de los objetos o array asignados con const. Por ejemplo, si declara un objeto como este:

const BRANDCOLOR = {  primary: “blue”,  accent: “teal”}

Puede ejecutar el siguiente código más adelante y la propiedad de accent se reasignará sin arrojar un error.

La conclusión de todo esto es que definitivamente debe usar const para definir variables cuyos valores nunca cambiarán.

No olvides que cuando se trata de objetos o matrices, el objeto en sí no se puede reasignar. Las propiedades dentro de ese objeto o matriz son las que pueden cambiar.

¿Por qué escribir lo mismo dos veces?

Los desarrolladores de JavaScript siempre intentan introducir y extraer datos de matrices u objetos. Lo más probable es que se haya encontrado con un código como este, en el que las propiedades de un objeto se inicializan mediante variables:

let firstName = ‘John’, lastName = ‘Doe’;let user = {  firstName : firstName,  lastName : lastName}console.log(user);

En ES6, ya no tiene que repetirlo, siempre que las variables y los nombres de las propiedades del objeto sean los mismos. Este código logra lo mismo:

let firstName = ‘John’, lastName = ‘Doe’;

let user = { firstName, lastName };

console.log(user);

Todo lo que hicimos aquí fue eliminar los nombres de variables repetidos y los dos puntos (:). Esta abreviatura resulta útil cuando tiene objetos que contienen una gran cantidad de campos.

Pero eso no es todo. ES6 proporciona una forma más sencilla de obtener datos de matrices u objetos. Esto también ayuda a reducir las líneas repetitivas de código. Tomemos, por ejemplo, una matriz que contiene cuatro números:

let numbers = [1, 2, 3, 4];

Para obtener datos de esta matriz, puede asignar sus valores a variables como esta:

let one = numbers[0],  two = numbers[1],  three = numbers[2],  four = numbers[3];console.log(one);

Ahora puede acceder a los datos a través de los nombres de las variables. Entonces, aquí el número 1 se imprimirá en la consola. Aunque esto funciona, es posible que prefiera utilizar un método abreviado conocido como desestructuración de matrices.

let [one, two, three, four] = numbers;console.log(one);

Los corchetes en el lado izquierdo de la asignación son parte de la nueva sintaxis de desestructuración. Entonces, este código es lo mismo que decir, “Dame cuatro variables llamadas uno, dos, tres y cuatro, y asigna el primer valor en la matriz de números a la variable uno, el segundo valor a la variable dos, y así sucesivamente. ” Más corto, es mejor”.

Pero ahora digamos que desea obtener solo el tercer valor y no está realmente interesado en asignar variables a los dos primeros elementos. Todavía puede usar esta sintaxis:

let [ , , three] = numbers;

Solo usamos comas como marcadores de posición para los dos primeros elementos, por lo que las variables no se crean detrás y todo lo que está después de la tercera posición se ignora. Prácticamente funciona de la misma manera para los objetos, pero en lugar de corchetes, usa llaves.

Consideramos este objeto:

const APPLE = {  type: ‘red delicious’,  color: ‘red’,  size: ‘large’}

Si desea obtener datos para las dos primeras propiedades y luego imprimir la segunda variable, puede hacerlo.

const { type, color } = APPLE;console.log(color);

Una cosa a tener en cuenta es que si intenta utilizar la sintaxis de desestructuración con un nombre de variable que no existe, obtendrá “indefinido”. Por ejemplo, si intenta hacer lo siguiente, verá undefined en la consola.

const { type, color, size, packaging } = APPLE;console.log(packaging);

Un mejor mensaje de error

Si alguna vez ha trabajado con interpolación de cadenas en otro idioma, probablemente se sintió terriblemente frustrado la primera vez que tuvo que generar un mensaje de error utilizando JavaScript. Hasta ES6, la forma más común de crear cadenas que contenían variables o expresiones era utilizar la concatenación de cadenas estándar. Ya sabes, el antiguo operador de suma (+). ES6 introdujo literales de plantilla, junto con el carácter de tilde (`). Los literales de plantilla le permiten incrustar fácilmente expresiones dentro de su cadena utilizando una notación de expresión que debería resultarle bastante familiar. Por ejemplo, este código se puede utilizar para generar el mensaje “El siguiente usuario, Yo, ha encontrado un error”.

let user = ‘Me’;console.log(‘The following user, ${user} has encountered an error`);

Los literales ofrecen muchas ventajas, como:     La capacidad de incrustar comillas simples y dobles sin utilizar caracteres de escape.

Mensajes de varias líneas, que son excelentes cuando necesita crear una cadena que contenga marcado HTML que abarque varias líneas.    Plantillas etiquetadas, que le permiten ejecutar la plantilla a través de una función que cree. Esto le da un mayor control sobre el aspecto de la cadena resultante. Creemos que una vez que comience a trabajar con plantillas literales, las amará tanto como nosotros.