Diferencias entre var, let y const en JavaScript

Javascript

Diferencias entre var, let y const en JavaScript

Con ES2015 (ES6) aparecieron muchas características nuevas y llamativas, como por ejemplo, la forma de declarar variables.

En esta versión se añadieron let y const como formas de declaración de variables, a la forma que ya existía var.

var

Es la forma tradicional de declarar una variable, por ejemplo:

var edad = 21;

El ámbito de una variable es en esencia el lugar o lugares donde está disponible.

Si la variable es declarada con este método, dependerá el lugar en el que esté situada. Esto es, si la variable se declara dentro de una función, su ámbito es esa misma función y no podrá ser utilizada fuera de ella.

En cambio, si se declara fuera de una función, diremos que el ámbito es global, pudiendo ser utilizada tanto fuera como dentro de funciones.

En el siguiente ejemplo declararemos dos variables, una con ámbito global y otra con ámbito dentro de una función.

var nombre = "Ada";

function prueba(){
	var apellido = "Web";
	console.log(nombre); // Ada
	console.log(apellido); // Web
}

prueba();
console.log(nombre); // Ada
console.log(apellido); // Uncaught ReferenceError: apellido is not defined

Como hemos visto en el ejemplo anterior, dispondremos de la variable nombre tanto dentro como fuera de la función, pero la variable apellido sólo podremos utilizarla dentro de prueba().

Las variables con var se pueden volver a declarar o modificar, es decir, hacer lo siguiente está aceptado por JavaScript.

var nombre = "Ada";
console.log(nombre); // Ada

var nombre = "Web";
console.log(nombre); // Web

var nombre = ["Ada", "Web"];
console.log(nombre); // Array [ "Ada", "Web" ]

var nombre = -89;
console.log(nombre); // -89

Hoisting es un mecanismo de JavaScript en el que las variables y declaraciones de funciones se mueven a la parte superior de su ámbito antes de la ejecución del código. Esto significa que si hacemos esto:

console.log(nombre);
var nombre = "Ada";

Será interpretado así:

var nombre;
console.log(nombre); // undefined
nombre = "Ada";

Las variables con var se elevan a la parte superior de su ámbito y se inicializan con un valor de undefined.

El problema de utilizar var es que podremos cometer errores de bulto al programar, ya que nos es posible redeclarar o modificar el valor de una variable de forma involuntaria.

let

La forma de declarar una variable con let es la siguiente:

let nombre = "Ada";

Las variables declaradas con let tendrán un ámbito de bloque. Un bloque es un trozo de código delimitado por {}. Lo que esté dentro de llaves será considerado un bloque.

if(1<2){
	let apellido = "Web";
	console.log(apellido); // Web
}

console.log(apellido); // Uncaught ReferenceError: apellido is not defined

Vemos que el uso de apellido fuera de su bloque (las llaves donde se definió) devuelve un error. Esto se debe a que las variables let tienen un alcance de bloque.

let puede modificarse, por ejemplo:

if(1<2){
	let nombre = "Ada";
	nombre = "Web";
	console.log(nombre); // Web
}

let no puede redeclararse, por ejemplo:

if(1<2){
	let nombre = "Ada";
	let nombre = "Web"; // Uncaught SyntaxError: redeclaration of let nombre
	console.log(nombre);
}

Lo que sí podremos hacer, es definir la misma variable en distintos ámbitos, al fin y al cabo, serán tratadas como variables diferentes.

let nombre = "Ada";

if(1<2){			
	let nombre = "Web";
	console.log(nombre); // Web
}

console.log(nombre); // Ada

Cuando se utiliza let, no hay que preocuparse de sí se ha utilizado un nombre para una variable antes, puesto que una variable solo existe dentro de su ámbito.

Al igual que var, las declaraciones let se elevan a la parte superior. A diferencia de var que se inicializa como undefined, la palabra clave let no se inicializa. Sí que si intentas usar una variable let antes de declararla, obtendrás un Reference Error.

Por ejemplo:

console.log(nombre); // Uncaught ReferenceError: can't access lexical declaration 'nombre' before initialization
let nombre = "Ada";

const

Las variables declaradas con const son inmutables, es decir, su valor no cambiará en el resto del código. La forma de declararlas es la siguiente.

const nombre = "Ada";

Como decíamos, las variables que declaremos con const no podrán ser alteradas:

const nombre = "Ada";
nombre = 10; // Uncaught TypeError: invalid assignment to const 'nombre'
console.log(nombre);

Ni tampoco redeclaradas:

const nombre = "Ada";
const nombre = "Web"; // Uncaught SyntaxError: redeclaration of const nombre
console.log(nombre);

El ámbito de este tipo de variables es la del bloque:

const nombre = "Ada";

if(1<2){			
	const nombre = "Web";
	console.log(nombre); // Web
}

console.log(nombre); // Ada

En esta sección debemos destacar que en caso de declarar objetos con const, estos serán invariables igual que una variable normal, pero sus propiedades sí que pueden ser actualizadas.

const persona = {
	        nombre: "Ada",
	        apellido: "Web"
	    }

persona.nombre = "Ada modificado";

console.log(persona); // Object { nombre: "Ada modificado", apellido: "Web" }

Al igual que let, const las declaraciones const se elevan a la parte superior, pero no se inicializan.

Tabla comparativa

varletconst
Se puede reasignarsisino
Se puede redeclararsinono
Se almacena en el scope globalsinono
Puede ser hoisteadasinono
Posee un scope de bloquenosisi
Puede declararse sin ser inicializadasisino

Escribe una respuesta