< Declaración de variables con let y const en ES6 />

← JavaScript ⌂ Home

Function Scoping

Antes de ES6, la declaración de variables en JavaScript se hacía usando la palabra reservada var, estas variables tienen scope de función, es decir, su alcance era dentro de la función que las encierra.

var score = 10; // Global

function getScore() {
    var score = 15; // Local
    console.log(score) // 15
}

getScore();
console.log(score); // 10

Otro ejemplo para entender cómo funciona el scope de función es el siguiente, donde el bloque if no genera un nuevo scope, los cambios realizados dentro del bloque if afectan a la variable declarada fuera del bloque.

var score = 10; 

if (score) {
    score = 15; // pasa lo mismo con var score = 15; 
    console.log(score); // 15
}

console.log(score); // 15

Para entender mejor cómo funcionan las declaraciones con var les recomiendo leer el post donde explico el hoisting.

Block Scoping

Con ES6 ahora tenemos dos formas de declarar variables con let y const, la ventaja es que son declaradas con scope de bloque, es decir, que las llaves { } crean un nuevo scope para las variables.

Las variables declaradas usando let y const solo existen en el bloque donde fueron declaradas.

let score = 10; 

{
    let score = 15; 
    console.log(score) // 15
}

console.log(score); // 10

Por otra parte, a diferencia de let, const crea variables inmutables, su valor debe ser asignado junto con la declaración y no puede ser cambiado después en el programa.

const score = 42; 

console.log(score); // 42 

score = 1000; // TypeError

Y siempre se debe inicializar una variable declarada con const.

const value; // SyntaxError 

Si lo que se requiere es una constante con un valor no definido se debe hacer lo siguiente.

const value = undefined;

Otra cosa a tomar en cuenta es que al declarar las variables con let y const nos ayuda a evitar el efecto hoisting, que se tenía al declarar variables con var.

console.log(score); // undefined
var score = 15; 

Observamos que la variable score se inicializa con el valor undefined. En cambio con let ocurre lo siguiente.

console.log(score); // Reference Error: score is not defined
let score = 15;

Observamos que ocurre un Reference Error causado por acceder a una variable que ha sido declarada pero no inicializada, const funciona de una manera similar, pero como vimos, la única diferencia es que debe ser inicializada durante la declaración.

let value = true;

if (true) { // Inicia un nuevo scope
    console.log(value); // ReferenceError
    let value;
}
console.log(value); // true

Conclusiones

Es altamente recomendable comenzar a usar let y const para declarar variables y dejar de usar var, nuestro código será más entendible, limpio y fácil de debuggear con un scope de bloque y si sabes que una variable no va a cambiar durante el programa usa const, de otra manera usa let.