Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.
Aprende JavaScript moderno
Nuevas variables const y let
- Antes de hablar nuevos tipos de variables JavaScript debemos recordar cómo funciona la declaración fundamental de variables con
var. - Las variables creadas con
vartiene un ámbito funcional, es decir, sólo son accesibles en el ámbito de la función donde se crean y en ámbitos interiores. Si no se crean dentro de una función entonces su ámbito es global.
var name = "Andrés"
function greetings() {
var name = "Juan"
return function() {
console.log(name) // Closure
}
}
greetings()()
var i = 1;
for (i; i <= 10; i++) {
console.log(i)
}
console.log(i) // Seguimos teniendo acceso
- Algo que ocurre con
vares que no usamos modo estricto"use strict"es posible que crear variables de forma automática. - Además, las declaración de variables con
varson alzadas al inicio de la función donde se definen. - Con todo esto claro es momento de presentarte las dos nuevas formas de crear variables que quizá ya conozcas.
- La primera es con
let. Al utilizarlo creamos una variable que tiene ámbito de bloque, es decir, viven únicamente entre las dos llaves{}. Algo soñado por muchos y que se intentaba conseguir con patrones como los IIFE o expresiones funcionales inmediatamente invocadas.
for (let i = 1; i <= 10; i++) {
console.log(i)
}
console.log(i) // Ya no tenemos acceso
if (true) {
let tranform = name.toUpperCase(); // Accedemos a "name" porque se creó globalmente
}
console.log(transform) // No tenemos acceso
- Las variables creads con
letno se alzan y se crean de forma automática. Como sí ocurría convar. - La segunda forma "nueva" es utilizar
constpara crear constantes. No poder crearlas hasta ahora es una deficiencia de JavaScript que se ha intentando paliar utilizando variables con identificadores en mayúsculas, para dar a entender que son constantes aunque pueden por supuesto ser alteradas. - Si intento cambiar el valor de la constante, me encontraré con un error.
const IVA = .21
IVA = .16 // Error
- Para entender de verdad cómo funcionan las constantes JavaScript debes saber que si el valor de la constante es compuesto, como un
Object,Array,Map,Sety demás, lo que no podrás cambiar es la referencia a ese valor, pero sí su contenido.
const Person = {}
Person.name = name // No hay problema
Person = {} // Error, perdemos la referencia al objeto
const Person2 = Person
Person2.city = "Valencia"
console.log(Person) // Estamos lidiando con referencias a valores
- Ahora que sabes cómo crear variables con JavaScript moderno, quizás te preguntas cuándo utilizar cada tipo. No hay una repuesta clara. Muchos prefieren usar sólo
letyconsty olvidarse devar. Personalmente creo que mientras sepas lo que haces y el alcance y consecuencias de tus decisiones, es tu responsabilidad.
Descarga la chuleta de Vue 3
Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️
DESCARGA GRATIS LA CHULETA AHORA 💾No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
