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 var tiene 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 var es que no usamos modo estricto "use strict" es posible que crear variables de forma automática.
  • Además, las declaración de variables con var son 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 let no se alzan y se crean de forma automática. Como sí ocurría con var.
  • La segunda forma "nueva" es utilizar const para 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 , Set y 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 let y const y olvidarse de var. Personalmente creo que mientras sepas lo que haces y el alcance y consecuencias de tus decisiones, es tu responsabilidad.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue