var, let y const

Con la llegada de ES6 (2015), ahora en JavaScript se tiene tres formas de declarar una variable: var let y const. En este bit te presentaré las diferencias entre cada una de ellas.

var fruit = "🍎 Apple";
let animal = "🐋 Whale";
const ball = "🏀 Basketball";

var

La forma clásica y antigua de declarar una variable. Con var empezar con un valor es opcional, el código va a seguir funcionando y solo habrá un undefined.

var animal; // undefined

scope

La sentencia var declara una variable con scope de función, es decir, solo es accesible desde la misma función y no fuera.

var name = "Fili";

function printName() {
	var name = "Diego";
	console.log(name); // Diego
}

console.log(name); // Fili

No cuenta con scope de bloque (todo lo que se encuentre entre {}), haciendo que variables del mismo nombre se vean afectadas y que el código sea propenso a errores.

var name = "Fili";

if (true) {
	var name = "Diego";
	console.log(name); // Diego
}

console.log(name); // Diego

Reasignación y redeclaración

Una variable declarada con var puede ser reasignada sin ningún problema e incluso puede ser re-declarada.

var ball = "🏀 Basketball";
ball = "⚽️ Soccer"

console.log(ball); // ⚽️ Soccer

var ball = "🎾 Tennis";

console.log(ball) // 🎾 Tennis

let

Una nueva forma de declarar variables con la llegada de ES6. let al igual que con var, empezar con un valor es opcional, el código va a seguir funcionando.

let animal; // undefined

scope

La sentencia let declara una variable con scope de bloque.

let name = "Fili";

function printName() {
	let name = "Diego";

	if(true) {
		let name = "Mike";
		console.log(name); // Mike
	}

	console.log(name) // Diego
}

console.log(name) // Fili

Reasignación y redeclaración

Una variable declarada con let puede ser reasignada, pero no puede ser re-declarada.

let ball = "🏀 Basketball";
ball = "⚽️ Soccer";

console.log(ball); // "⚽️ Soccer"

let ball = "🎾 Tennis"; // Identifier "ball" has already been declared 

const

Al igual que con let, const es una nueva forma de declarar variables. Con const no se tiene la posibilidad de poder iniciar sin valor, este tiene que ser constante y no puede cambiar.

const animal; // Missing initializer in const declaration

scope

La sentencia const declara una variable con scope de bloque.

const name = "Fili";

function printName() {
	const name = "Diego";

	if(true) {
		const name = "Mike";
		console.log(name); // Mike
	}

	console.log(name) // Diego
}

console.log(name); // Fili

Reasignación y redeclaración

Una variable declarada con const no puede ser reasignada ni re-declarada.

const ball = "🏀 Basketball";
ball = "⚽️ Soccer"; // Assigment to constant variable

const ball = "🎾 Tennis"; // Identifier "ball" has already been declared 

const ≠ inmutable

A pesar de que ya mencione que una constante no puede ser reasignada o re-declarada, sí que puede cambiar. Cuando se agregan elementos a un array o un objeto, no se están reasignando o volviendo a declarar, se están agregando nuevos valores que apuntan a la constante.

const food = [];
food.push("🌮 Taco");
console.log(food); // ["🌮 Taco"]

food.pop();
console.log(food); // []

const animal = {};
animal.type = "🐶 Dog";
console.log(animal) // { type: "🐶 Dog"}

animal.type = "🐱 Cat";
console.log(animal); // { type: "🐱 Cat"}

En resumen, las diferencias entre cada una de las variables son las siguientes:

Recursos

• MDN var
• MDN let
• MDN const
• VAR vs LET vs CONST: Todas las diferencias