Cómo declarar variables en JavaScript - var, let y const.
Existe una gran duda de como declarar variables, como se usan y en donde.
En la versión ES5 de JavaScript se usaba solo la declaración “var”, pero en ES6 fue cuando se agregaron las declaraciones “let” y “const”, en este artículo veremos cómo, cuándo y dónde usarlas.
Var
“Var” se utiliza para declarar una variable y adicionalmente se puede añadir un valor.
ejemplo: var i = 0;
Las variables declaradas con “var” son procesadas antes de la ejecución del código.
El scope de una variable declarada con “var”, es su contexto de ejecución.
El scope de esta variable declarada fuera de la función es global.
En JavaScript el concepto de ejecución contiene información sobre el entorno en el que se está ejecutando el código.
Tomemos como ejemplo el siguiente bloque de código:
Podemos ver que cuando la variable es actualizada dentro del condicional “if” el valor se actualiza a 20 a nivel global.
Veamos este ejemplo:
var i = 60;
(function explainVar(){
for( var i = 0; i < 5; i++){
console.log(i) //Output 0, 1, 2, 3, 4
}
})();
console.log("Despues del loop", i) // Output 60
Si declaramos la variable dentro de una función el valor de esta variable se tomará en cuenta solamente dentro del scope de esta función, si se encuentra fuera de esta función tomará el valor asignado previamente.
Por ejemplo:
var i = 60;
(function explainVar(){
for( i = 0; i < 5; i++){
console.log(i) //Output 0, 1, 2, 3, 4
}
})();
console.log("Despues del loop", i) // Output 5
Si olvidas declarar una variable dentro de una función o loop, el intérprete de JavaScript va a declararse de forma global. El valor de “i” a nivel global será reasignado por el “for loop”
LET
Bueno, ES6 resuelve esto implementando “let”.
var i = 60;
(function explainVar(){
for(let i = 0; i < 5; i++){
console.log(i) //Output 0, 1, 2, 3, 4
}
})();
console.log("Despues del loop", i) // Output 60
Funciona de acuerdo a lo esperado, esto pasa porque “let” introduce el “block scope”. La variable asignada “let” solo sera accesible dentro del “foor loop”
Veamos estos ejemplos:
function explainLet(){
let a = 10;
console.log(a); // output 10
if(true){
let a = 20;
console.log(a); // output 20
}
console.log(a); // output 10
}
Es casi el mismo comportamiento que vemos en otros lenguajes:
function explainLet(){
let a = 10;
let a = 20; //throws syntax error
console.log(a);
}
La consola nos mostrará un error y que la variable “let” ya fue declarada e inicializada en el scope de esa función:
“Error Message: Uncaught SyntaxError: Identifier ‘a’ has already been declared”.
El uso de “let” mantendrá tus funciones limpias y claras.
Mucha gente dice que “let” es el nuevo “var”.
CONST
Ahora que ya tenemos una idea más clara de las variables podemos empezar hablar de “const”.
“Const” es igual que “let”, con una pequeña gran diferencia que no se puede reasignar su valor.
function explainConst(){
const x = 10;
console.log(x); // output 10
}
¿Qué pasa si tratamos de re asignar la variable “const”?
function explainConst(){
const x = 10;
console.log(x); // output 10
x = 20; //throws type error
console.log(x);
}
La consola mostrará un error cuando tratemos de re asignar el valor de una variable “const”:
Error Message : Uncaught TypeError: Assignment to constant variable.
En mi opinión es ideal usar “const” si no tienes que re asignar el valor de tu variable en ningún momento. Lo ideal es minimizar el estado de mutación o “mutable state”. Es importante saber que nuestro código estará corriendo muchos procesos a la vez. Cada que uses “let” es bueno analizar si realmente cambiará el valor de esta variable en algún momento, de no ser así usa “const”.
function explainVar(){ var a = 10; console.log(a); // output 10 if(true){ var a = 20; console.log(a); // output 20 } console.log(a); // output 20 }