ProgramandooIntentándolo

Variables y nuevos tipos de objetos JavaScript 6

Como es un lenguaje no tipado en javaScript las variables pueden almacenar cualquier tipo de objeto y por este motivo todas las variables se declaraban de la misma forma, usando var o simplemente poniendo el nombre de la variable sin más, hasta la la versión 6 de javaScript (ECMAScript v6) en la que se han introducido las constantes y las variables de bloque.

También se han incluido nuevos tipos de objetos interesantes como mapas Map y conjuntos Set y la no menos interesante nueva forma para intercalar variables dentro de cadenas de texto.

“Tipos” de variables

En realidad más correcto que tipos de variables sería hablar de ámbito de las variables por que los tipos que hay lo que diferencian es el ámbito en el que serán visibles, con excepción de las constantes que en realidad sí que serían un tipo, o más bien lo contrario a una variable.

Variables globales

En javaScript se pueden crear las variable globales de 2 formas, usando var si se declara fuera de cualquier función o simplemente poniendo el nombre de la variable en cualquier parte del código sin var.


var variableGlobal1 = "hola";

function hazAlgo() {
  variableGlobal2 = "vale";
  var variableNormal = "...";
}

hazAlgo();

console.log(variableGlobal1);   // hola
console.log(variableGlobal2);   // vale
console.log(variableNormal);    // ReferenceError: variableNormal is not defined

Variables locales

Las variables locales y globales en realidad son lo mismo, por algo se declaran de la misma forma (con var), la “diferencia” radica en el ámbito en el que se declaran, si se declara fuera de cualquier función es una variable global y si se declara dentro es local (solo es global en su ámbito), es decir, será accesible desde cualquier otra función declarada al mismo nivel o un nivel inferior que la variable local pero no será accesible desde fuera.


var variableGlobal1 = "hola";

function hazAlgo() {
  var variableLocal1 = "vale";

  function hazOtraCosa() {
    var variableLocal2 = "en otro momento";
    console.log(variableLocal1, variableLocal2);
  }

   hazOtraCosa();
  // Aqui variableLocal2 no esta definida
}

// Aqui variableLocal1 no esta definida
// Aqui variableLocal2 no esta definida

hazAlgo();  // vale en otro momento

Una vez terminado el repaso de las formas clásicas de definir variables, vamos con lo nuevo.

Variables de bloque

Con let se pueden declarar variables que solo sean accesibles dentro del ámbito en el que se declaran (de verdad), las variables declaradas con let dentro de bucles o estructuras condicionales solo son visibles dentro dicho ámbito, usando var aunque se podría pensar que sería así la realidad es bien distinta.


// Usando var
for (var i = 0; i < 2; i++) {
    console.log(i);       // 0, 1
}
console.log(i);         // 2

if (true) {
    var antes = "Hola";
}
console.log(antes);     // Hola


// Usando let
for (let i = 1; i < 6; i++) {
    console.log(i)       // 1, 2, 3, 4, 5
}
console.log(i);        // 2

if (true) {
    let ahora = "Hola";
}
console.log(ahora);    // ReferenceError: ahora is not defined

En este ejemplo se puede ver como con al declarar una variable con var en un bucle for o dentro de un if la variable es totalmente accesible desde fuera como se puede comprobar en las líneas 5, 10 y 17 mientras que con let las variables solo son accesibles dentro del ámbito en el que se declaran y por lo tanto si hay una variable exterior con el mismo nombre que una de las variables de propio ámbito declarada con let dentro de ese ámbito tendremos el valor de dicha variable pero al salir el valor "global" no se habrá visto afectado como se puede ver con la varible i, que despues del segundo for mantiene el valor 2 y no 7 como ocurriría si hubiésemos usado var dentro de el segundo for.

Constantes

Hasta ahora no existían las constantes en javaScript y aun que podíamos remarcar una constante poniendo el nombre en mayúsculas no se podía impedir que su valor fuese modificado.

Ahora con const se pueden declarar constantes de forma real y si intentamos cambiarle el valor o declarar una constante sin asignarle un valor se producirá un error.


const DIAS_SEMANA = 7;

console.log(DIAS_SEMANA);  // 7

DIAS_SEMANA = 8;           // TypeError: invalid assignment to const `DIAS_SEMANA'

const DIAS_MES;            // SyntaxError: missing = in const declaration

Nuevos tipos de objetos

Se añaden a los tipos tipos basicos (Strings, numeros y Booleans), Object y Array dos nuevos tipos Map y Set

Map

Con Map se pueden crear mapas clave/valor, vamos a ver algunas de las operaciones que podemos hacer con este nuevo tipo de objeto.


var coche = new Map();
coche.set("marca", "chevrolet");
coche.set("modelo", "aveo");
coche.set("color", "blanco");

console.log(coche);                 // Map { marca: "chevrolet", modelo: "aveo", color: "blanco" }
console.log(coche.get("marca"));    // chevrolet
console.log(coche.has("tv"));       // false
console.log(coche.delete("color")); // true
console.log(coche.has("color"));    // false

// Itera el Map
coche.forEach(function(coche) {
  console.log(coche);               // chevrolet, aveo
});

// Itera el Map
for (var [clave, valor] of coche) {
  console.log(clave + " - " + valor);   // marca - chevrolet, modelo - aveo
}

// Itera las claves
for (var clave of coche.keys()) {
  console.log(clave);                   // marca, modelo
}

// Itera los valores
for (var valor of coche.values()) {
  console.log(valor);                   // chevrolet, aveo
}

coche.clear();
console.log(coche);                     // Map {  }

Set

Otro de los nuevos objetos añadidos es Set que permite almacenar listas de valores únicos.


var dias = new Set();

dias.add("Lunes");
dias.add("Martes");
dias.add("Miercoles");
dias.add("Jueves");
dias.add("Viernes");
dias.add("Sabado").add("Domingo");
dias.add("Viernes");                // Como ya esta en el set no produce ningun efecto

console.log(dias);                  // Set [ "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado", "Domingo" ]
console.log(dias.has("Sabado"));    // true
console.log(dias.size);             // 7
console.log(dias.delete("Lunes"));  // true
console.log(dias.size);             // 6

dias.forEach(function(dia) {
  console.log(dia);                 // Martes, Miercoles, Jueves, Viernes, Sabado, Domingo
});

dias.clear();
console.log(dias.size);             // 0

Interpolar variables dentro de strings

Otro de los puntos interesantes introducidos referente a los tipos de datos es la simplificación para la interpolación de variables dentro de strings sin la necesidad de estar concatenando las cadenas de texto trozo a trozo con las variables con lo que el código se hace más legible.


var texto1 = "es";  
var texto2 = "facil";  
// hasta ahora
console.log("Ahora " + texto1 + " mas " + texto2 + " meter variables en un string");  // Ahora es mas facil meter variables en un string
// Con ES6
console.log(`Ahora ${texto1} mas ${texto2} meter variables en un string`);            // Ahora es mas facil meter variables en un string
console.log("Ahora ${texto1} mas ${texto2} meter variables en un string");            // Ahora ${texto1} mas ${texto2} meter variables en un string

Para poder hacer uso de ${variable} el string tiene que estar creado con ` (acento grave), si se usan comillas simples o dobles no se interpreta la variable y el resultado será el texto tal cual está escrito.