La diferencia entre var, let y const en JavaScript y las mejores prácticas

En esta guía, aprenda cuál es la diferencia entre las declaraciones de variables var, let y const en JavaScript, incluidas las mejores prácticas, con ejemplos.

Introducción

La programación siempre ha incluido la definición de datos, la manipulación de datos y finalmente la visualización de datos. Los datos se pueden representar como bits de información que podemos alterar en programas de computadora. Dado que las ubicaciones de la memoria no son muy legibles para los humanos y cambian a lo largo del tiempo, comenzamos a anotar datos variables, con significantes legibles para los humanos, a los que podemos llamar para apuntar indirectamente a los datos en la memoria. .

Estos significantes son comúnmente llamados variables o variables de referencia.

Las variables son, esencialmente, punteros o referencias a algunos datos en la memoria de una máquina, y el puntero se puede cambiar dinámicamente para reflejar el estado real de los datos que hemos "etiquetado".

{.icon aria-hidden=“true”}

Nota: Común y coloquialmente, se dice que "las variables almacenan datos" y que son "contenedores de datos". Esto es técnicamente incorrecto y se deriva de un límite semántico borroso: no está claro si las personas se refieren a variables de referencia u objetos en memoria. (Referencia) Las variables son punteros y apuntan a objetos en la memoria de la máquina, donde se almacenan los datos. Los términos coloquiales son lo suficientemente comunes como para encontrarlos presentes en la documentación, pero vale la pena mantener la asignación de memoria de objetos al menos en la parte posterior de la cabeza.

Antes del lanzamiento de ES2015 (ES6), las variables de JavaScript solo se declaraban con la palabra clave var; sin embargo, con la introducción de ES6, se introdujeron nuevas formas de declarar variables, let y const. Esto a menudo genera preguntas, principalmente sobre qué palabra clave se debe usar y cuándo:

1
2
3
var english = "Hello there!";
let french = "Bonjour!";
const german = "Hallo!";

En esta guía, exploraremos la diferencia entre las tres formas de declarar variables en JavaScript: var, let y const, sus alcances y cuándo elegir cuál.

¿Qué es el alcance en JavaScript?

Alcance es un concepto importante a comprender para escribir código en la mayoría de los lenguajes de programación, y juega un papel importante en la elección de la palabra clave variable que desea utilizar. El alcance define disponibilidad variable. En JavaScript, tenemos dos ámbitos: global y local.

  • Alcance global: Las variables declaradas fuera de cualquier bloque de código o función se conocen como variables globales porque tienen un alcance global y pueden ser referenciadas desde cualquier función o bloque.

{.icon aria-hidden=“true”}

Nota: En un documento de JavaScript, solo existe un alcance global.

Supongamos que tiene un archivo de script. Nuevamente, cualquier variable declarada fuera de cualquier función o bloque tiene un alcance global:

1
2
3
4
5
6
7
// Initialized outside of function or block
var name = "John Doe";
function logName() {
  console.log(name);
};
    
logName();

En el ejemplo anterior, se puede acceder a name dentro de la función logName(), ya que tiene un alcance global. ¡Existe en el contexto de la aplicación, y la función logName() puede llamar a ese contexto!

  • Alcance local: Las variables declaradas dentro de cualquier bloque de código o función se conocen como variables locales, porque tienen un alcance local. Solo se pueden hacer referencia a ellos dentro de los bloques de código o funciones en los que están definidos.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function logName() {
  // Initialized within a function or block
  var name = "John Doe";
  var id = 1;
  console.log(name);
};
    
function logId() {
  console.log(id);
}
    
logId();

Esto resulta en:

1
error: Uncaught ReferenceError: id is not defined

¿Cómo? id está definido, pero no está definido en el alcance de la función logId(). En lo que respecta a la función, no existe ningún id. Comienza comprobando si hay una variable de alcance local. Como no hay ninguno, comprueba si hay una variable de ámbito global. Si no, ¡id no está definido desde el contexto de logId()!

Con la cartilla/recordatorio fuera del camino, echemos un vistazo a cómo var, let y const dependen del alcance, ¡y cuándo se debe usar cada uno!

La palabra clave var en JavaScript

En JavaScript, var es una palabra clave reservada seguida de un nombre de variable de referencia. El nombre definido después de la palabra clave se puede usar como un puntero a los datos en memoria.

Usar var es el método más antiguo de declaración de variables en JavaScript. Declaremos una variable e inicialícela asignándole un valor usando el operador de asignación (=):

1
2
// Declaration and initialization
var name = "John Doe";

Alternativamente, puede dividir esto en dos pasos: variable declaración (qué es) y variable inicialización (asignarle un valor):

1
2
3
4
// Declaration
var name;
// Initialization
name = "John Doe";

{.icon aria-hidden=“true”}

Nota: En lenguajes fuertemente tipados, como Java, durante mucho tiempo, definía el tipo de la variable durante la declaración, y durante la inicialización, solo podía asignar un valor ajustando ese tipo. Desde Java 10, se ha agregado una palabra clave var, que es independiente del tipo e infiere el tipo durante el tiempo de ejecución.

Ámbito de var

Cuando se define dentro de una función, cualquier var está restringida a esa función. Cuando se define fuera de una función, una var es global:

1
2
3
4
5
  var firstName = "John";
  
  function checkLastName() {
    var lastName = "Doe";
  }

Tenemos dos declaraciones en el ejemplo anterior: firstName tiene un alcance global porque está definido fuera de una función, y lastName tiene un alcance local/función porque está definido dentro de una función:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var firstName = "John";
  
function checkLastName() {
    var lastName = "Doe";
    console.log(lastName); // "Doe"
    console.log(firstName); // "John"
}
  
checkLastName();
console.log(lastName); // Uncaught ReferenceError: lastName is not defined

Hasta aquí todo bien. Sin embargo, var tiene un problema.

El problema con var

var no tiene alcance de bloque. Cuando declara una variable dentro de un bloque de código, usando llaves ({}), ¡su alcance "fluye" del bloque! Por ejemplo:

1
2
3
4
5
6
7
8
var name = "John Doe";
  
var someBool = true;
if (someBool) {
  var name = "Daniel Joan";
}
  
console.log(name);

El nombre que apunta a "John Doe" es global, y el nombre que apunta a "Daniel Joan" se define dentro de un bloque. Sin embargo, cuando intentamos imprimir el nombre que está dentro del alcance, nos encontramos con:

1
Daniel Joan

var no tiene alcance de bloque. Podemos pensar que hemos definido un var name local para apuntar a "Daniel Joan", pero lo que hemos hecho en realidad es sobrescribir el var name que apunta a "John Doe ".

Declarar variables utilizando las declaraciones var en todas partes de su código puede generar confusión, sobrescribir las variables globales existentes y, por extensión, errores, tal como vimos en el fragmento de código.

¡Aquí es donde entran en juego let y const!

La palabra clave let en JavaScript

La declaración let se introdujo con ES6 y desde entonces se ha convertido en el método preferido para la declaración de variables. Se considera una mejora sobre las declaraciones var y is de ámbito de bloque (variables a las que solo se puede acceder en el bloque inmediato), evitando el problema principal que puede surgir con el uso de var.

Alcance de let

Una variable definida con la palabra clave let tiene un alcance limitado al bloque o función en el que se define:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let firstName = "John";
let lastName = "Doe";

let someBool = true;
if(someBool){
    let firstName = "Jane";
    console.log(firstName);
}
  
console.log(firstName);

Esta vez, el firstName que se refiere a "Jane" y el firstName que se refiere a "John" no se superponen. El código da como resultado:

1
2
Jane
John

El firstName declarado dentro del bloque está limitado al alcance del bloque y el declarado fuera del bloque está disponible globalmente. Ambas instancias de firstName se tratan como referencias de variables diferentes, ya que tienen alcances diferentes.

La palabra clave const en JavaScript

La declaración const se introdujo con ES6, junto con let, y es muy similar a let. const apunta a datos en la memoria que contienen valores constantes, como su nombre lo indica. Las variables de referencia const no se pueden reasignar a un objeto diferente en la memoria:

1
2
const name = "John";
const name = "Jane";

Esto resulta en:

1
Uncaught SyntaxError: Identifier 'name' has already been declared

Alcance de const

El alcance de una variable definida con la palabra clave const, como el alcance de las declaraciones let, está limitado al bloque definido por llaves (una función o un bloque). La principal distinción es que no se pueden actualizar ni volver a declarar, lo que implica que el valor permanece constante dentro del alcance:

1
2
3
4
const name = "John";
name = "Doe";
  
// Uncaught TypeError: Assignment to constant variable. 

Buenas convenciones de codificación {#buenas convenciones de codificación}

Entonces, ¿qué significa todo esto y cuál debería elegir, además de los requisitos obvios para evitar errores? En realidad, esto se puede resumir en un par de buenas prácticas:

  • Se prefiere const a let, que se prefiere a var. Evite usar var.
  • Se prefiere let a const cuando se sabe que el valor al que apunta cambiará con el tiempo.
  • const es excelente para valores constantes globales.
  • Las bibliotecas normalmente se importan como const.

Al importar una biblioteca y crear una instancia, no desea poder reasignar la instancia a otra cosa, ya que entraría en una pendiente resbaladiza de "usar la biblioteca", mientras que otra cosa es " deslizando código en" debajo del capó.

Por ejemplo, si tuviera que requerir () una biblioteca como Axios, probablemente querrá usar su API. Sin embargo, no hay nada que le impida a usted (o a otra persona) cambiar la instancia axios por otra si no ha usado const para declararlo:

1
2
3
4
5
let axios = require('axios');
axios.get('some_url').then(someFunction());

axios = "Totally not a string!"
axios.get('some_url').then(someFunction()); // String has no method `get()`

Al hacer que axios sea const, se evita este problema. Además, puede definir constantes globales, que se pueden usar como constantes de configuración:

1
2
const WIDTH = 1920;
const HEIGHT = 1080;

Conclusión

En esta guía, hemos explorado la progresión de la declaración de variables en JavaScript, desde la var original hasta las nuevas let y const.

Hemos explorado Scopes en JavaScript y cómo los diferentes significantes de declaración afectan el alcance de una variable en el código, observando un problema evidente con el uso de var. Finalmente, hemos explorado algunas buenas prácticas, señalando cuándo usar qué palabra clave. a clave.