¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Aprende ES6 - Let, Const y ámbitos

Este es el primer artículo en el que nos metemos de lleno con ES6. Si esto no te suena de nada y estás intentando ponerle algún sentido a las siglas, ¡no te preocupes! Echa un vistazo a nuestra Introducción a ES6.

ES6 introduce bastantes cosas nuevas en la sintaxis. Como vamos a ir despacito, comenzaremos por let y const, sin duda una de las características más conocidas (y que quizá te suenen) de ES6.

La sentencia let

La sentencia let funciona de manera similar a una sentencia var, es decir, nos permite crear una variable. No obstante, let se comporta de manera diferente en cuanto a ámbitos se refiere.

Quizá te suene el término hoisting en JavaScript o quizá no, así que por si acaso, vamos a explicarlo.

Hoist significa elevar en castellano y eso es básicamente lo que significa. Cuando una variable es declarada, ocurre en lo más alto de su ámbito. Veámoslo con un ejemplo:

function ejemplo(x) {  
    console.log(y); // undefined (no da error)
    console.log(z); // ReferenceError: z is not defined
    if (x) {
        var y = 5; // La declaración de y es elevada a lo más alto
    }
}

El motivo por el que esto ocurre, es porque y (a pesar de estar dentro de un if, queda declarada en la parte más alta de la función. Es por esto que es recomendable declarar todas las variables al principio de cada bloque, para evitar confusiones.

Ahora bien, en ciertas situaciones nos podría venir bien declarar "bloques" de ámbitos en vez de tener que crear funciones que crearan uno nuevo, o quizá usar aquellos creados por if, for, case, etc. Quizá no lo sepas pero JavaScript nos permite crear bloques tal que así:

{{ var django = 'no, no es django' }}
console.log(django)  
// <- 'no, no es django'

Con var, es posible acceder a la variable fuera del bloque no obstante, no ocurrirá lo mismo con let.

{{ let django = 'no, no es django' }}
console.log(django)  
// ReferenceError: django is not defined

¿Cómo funciona let?

La sentencia let es una alternativa a var. Sigue las reglas de ámbito de bloque en vez de la ligada a funciones que hemos visto antes. Esto implica que no hacen falta funciones para crear nuevos ámbitos.

Además, las variables declaradas con let no son elevadas. Para muestra un ejemplo:

function ejemplo(x) {  
    console.log(y); // ReferenceError: y is not defined
    if (x) {
        let y = 5; // La declaración de y ya no es elevada
    }
}

Puedes usar la sentencia let en cualquier lugar en el que uses una sentencia var. El uso más común es en un bucle for en cuyo caso las variables serían elevadas y, lo que es peor, quedan declaradas.

Imagina que haces dos bucles seguidos. Esto nos daría un error:

for (var i = 0; i < 10; i++) {  
  console.log(i + 1);
}

// i vale 11 aquí.

for (var i = 0; i < 20; i++) {  
  console.log(i + 1);
}

// var i already defined

Ya que la variable ya ha sido definida. No sé vosotros pero a mi no me gusta mucho tener que quitar var, ni andar persiguiendo el alfabeto. let al rescate:

for (let i = 0; i < 10; i++) {  
  console.log(i + 1);
}

// i no existe aquí

for (let i = 0; i < 20; i++) {  
  console.log(i + 1);
}
// :)

Usando let, la variable solo es accesible dentro de las llaves del bucle for.

La sentencia const

Lo bueno de const es que es realmente similar a let. Sus declaraciones no son elevadas y también quedan enmarcadas en ámbito de bloque, y no de función.

Ahora, veamos las diferencias, pero antes (y por si aun no lo habías deducido), aclarar que const es una abreviatura de constante.

  • Las variables const tienen que tener un valor inicial.
  • Las variables const solo pueden ser asignadas una vez, en dicho valor inicial.
  • Asignar valores a una variable const fallará sin producir errores.
  • Redeclarar una variable const con el mismo nombre provocará un error.

Veamos un rápido ejemplo:

var x; // x === undefined  
const z; // SyntaxError: const declarations must have an initializer

const y = 10; // y === 10  

Una vez que una constante ha sido declarada, no se puede cambiar la referencia ni el literal que tiene asignado, aunque sí podemos hacer algunas cosas:

const sabrosas = { frutas: ['manzana', 'naranja', 'pera'] }  
sabrosas = {}  
// sabrosas es de solo lectura
sabrosas.frutas.push('plátano')  
console.log(sabrosas);  
// { frutas: ['manzana', 'naranja', 'pera', 'plátano'] }

Si quisiéramos evitar que frutas pudiera ser modificada tendríamos que usar Object.freeze.

const es sin duda un gran añadido al lenguaje ya que nos permite preservar valores en vez de confiar en que no van a cambiar o limitarnos a usar nombres en mayúsculas. No obstante, por lo que acabamos de ver, más que constante podríamos decir que es una referencia constante.

¡Y hasta aquí por hoy! ¡Pronto veremos más elementos nuevos de ES6!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!