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

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 partes información que podemos cambiar en los programas de computadora. Dado que las ubicaciones de la memoria no son muy legibles para los humanos, y cambiar con el tiempo - comenzamos a anotar variable datos, con significantes legibles por humanos a los que podemos recurrir para señalar indirectamente datos en la memoria.

Estos significantes son comúnmente llamados Variables Donde variables de referencia.

Las variables son básicamente punteros Donde Las referencias a ciertos datos en la memoria de una máquina, y el puntero se puede cambiar dinámicamente para reflejar el verdadero estado de los datos que hemos "etiquetado".

Notar: Común y coloquialmente, se dice que "variables almacenan datos" y que son "contenedores de datos". Esto es técnicamente incorrecto y se deriva de un límite semántico confuso: no está claro si las personas se refieren a variables de referencia Donde objetos de memoria. (Referencia) Las variables son punterosy ellos indicar para 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 declararon usando var palabra clave; sin embargo, con la introducción de ES6 nuevas formas de declarar variables, let y const, fueron presentados. Esto a menudo genera preguntas, principalmente sobre qué palabra clave usar y cuándo:

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

En esta guía, exploraremos la diferencia entre las tres formas diferentes de declarar variables en JavaScript: var, let y constsus campos de aplicación y cuándo elegir cuáles.

¿Qué es el alcance en JavaScript?

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

  • Alcance global: Variables declaradas fuera de todo bloque de código Donde Una función se denominan variables globales porque tienen un alcance globaly puede ser referenciado desde cualquier función o bloque.

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

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


var name = "John Doe";
function logName() {
  console.log(name);
};
    
logName();

En el ejemplo anterior, name está disponible en el logName() función, porque tiene un alcance global. Existe en el contexto de la aplicación, y el logName() ¡la función puede llamar a este contexto!

  • Ámbito local: Variables declaradas en cualquier bloque de código Donde Una función se denominan variables locales, porque tienen un ámbito local. Solo se pueden hacer referencia en bloques de código o funciones. en que se definen.
function logName() {
  
  var name = "John Doe";
  var id = 1;
  console.log(name);
};
    
function logId() {
  console.log(id);
}
    
logId();

Esto se explica por:

error: Uncaught ReferenceError: id is not defined

¿Cómo llegar? id está definido - pero no está definido en el alcance desde logId() Una función. En cuanto a la función - no id existe. Comienza comprobando si hay un variable de ámbito local. Como no hay ninguno, comprueba si hay uno. variable de alcance global. Que no - id no se define en el contexto de logId()!

Con primer/recall fuera del camino, echemos un vistazo a cómo var, let y const ¡Depende del rango y cuándo se va a usar cada uno!

los variable Palabra clave 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 la memoria.

Utilizando var es el método más antiguo de declaración de variables en JavaScript. Declarar una variable y inicializarlo asignándole un valor usando el operador de asignación (=):


var name = "John Doe";

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


var name;

name = "John Doe";

Notar: En lenguajes fuertemente tipados, como Java, durante mucho tiempo se definiría el pegar de la variable durante declaracióny durante inicialización, solo podía asignar un valor que coincidiera con ese tipo. Desde Java 10 - a var Se agregó una palabra clave que es independiente del tipo e infiere el tipo en tiempo de ejecución.

Campo de aplicación variable

Cuando se define en una función - cualquier var se limita a esta función. Cuando se define fuera de una función, una var es mundial:

  var firstName = "John";
  
  function checkLastName() {
    var lastName = "Doe";
  }

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

var firstName = "John";
  
function checkLastName() {
    var lastName = "Doe";
    console.log(lastName); 
    console.log(firstName); 
}
  
checkLastName();
console.log(lastName); 

Consulte nuestra guía útil y práctica para aprender Git, con las mejores prácticas, los estándares aceptados por la industria y la hoja de trucos incluida. Deja de buscar en Google los comandos de Git y, de hecho, aprender ¡esta!

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

el problema con variable

var no tiene rango de bloque. Al declarar una variable en un bloque de código, use llaves ({}), su alcance "sale" del bloque! Por ejemplo:

var name = "John Doe";
  
var someBool = true;
if (someBool) {
  var name = "Daniel Joan";
}
  
console.log(name);

los name que apunta a "John Doe" es global, y el name que apunta a "Daniel Joan" se define en un bloque. Sin embargo, cuando tratamos de imprimir el name esto está en el alcance que encontramos:

Daniel Joan

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

Declarar variables usando var Las declaraciones en cualquier parte de su código pueden ser confusas, sobrescribir las variables globales existentes y, por extensión, errores, como vimos en el fragmento de código.

es aquí que let y const ¡patada en!

los dejar Palabra clave en JavaScript

los let La declaración se introdujo con ES6 y desde entonces se ha convertido en el método preferido para declarar variables. Se considera una mejora con respecto a var declaraciones y este en el alcance del bloque (variables accesibles solo en el bloque inmediato), evitando el problema principal que puede surgir al usar var.

Campo de aplicación dejar

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

let firstName = "John";
let lastName = "Doe";

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

Esta vez - el firstName refiriéndose a "Jane" y la firstName refiriéndose a "Juan" ¡no se superpongan! El código da:

Jane
John

los firstName declarado en el bloque se limita al bloque en el ámbito y el declarado fuera del bloque está disponible globalmente. Los dos casos de firstName se tratan como referencias de variables diferentes porque tienen ámbitos diferentes.

los constante Palabra clave en JavaScript

los const declaración se introdujo con ES6, junto con lety es muy similar a let. const apunta a datos en la memoria que contienen valores constantes, como sugiere el nombre. const las variables de referencia no se pueden reasignar a otro objeto en la memoria:

const name = "John";
const name = "Jane";

Esto se explica por:

Uncaught SyntaxError: Identifier 'name' has already been declared

Campo de aplicación constante

El alcance de una variable definida con el const palabra clave, como el alcance de let declaraciones, se limita 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:

const name = "John";
name = "Doe";
  

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, se puede reducir a algunas mejores prácticas:

  • const se prefiere a leta quien se prefiere var. Evitar el uso de var.
  • let se prefiere a const cuando sabe que el valor al que apunta cambiará con el tiempo.
  • const es ideal para valores globales y constantes.
  • Las bibliotecas se suelen importar como const.

Al importar e instalar una biblioteca, no desea poder reasignar la instancia a otra cosa, porque ingresará en una pendiente resbaladiza de "uso de la biblioteca", mientras que otro "código se desliza" debajo del capó.

Por ejemplo, si fueras a require() una biblioteca como Axios, teóricamente desea utilizar su API. Sin embargo, nada le impide a usted (o a otra persona) apágalo axios ejemplo con otra cosa si no has usado const para declararlo:

let axios = require('axios');
axios.get('some_url').then(someFunction());

axios = "Totally not a string!"
axios.get('some_url').then(someFunction()); 

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

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 el original var al más reciente let y const.

Exploramos los alcances 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 var. Finalmente, exploramos algunas mejores prácticas, observando cuándo usar qué palabra clave.

Si quieres conocer otros artículos parecidos a La diferencia entre var, let y const en JavaScript y las mejores prácticas puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas