Los tipos de variables en JavaScript. Let, var y const

explicarVariables();

Fecha de publicación: 24-07-2021

Para empezar… ¿Qué es una variable? 🤔

Las definiciones más comunes son del tipo “son un contenedor de información” o “es como una caja en la que guardas objetos, donde la caja representa la variable y los objetos dentro de la caja son el valor”. Estas definiciones no están erradas, una variable ES un contenedor de información, cualquier tipo de información; al menos en JavaScript, en otros lenguajes de programación la cosa cambia.

La razón por la que ese contenedor se le llame “variable” es porque es posible que pueda cambiar (variar) en el tiempo.⏳

Un ejemplo común lo vemos en las matemáticas con la famosa letra "X". La letra X es la variable y se le asigna un valor, el que mejor convenga en el momento. En este caso el número 9.

X = 9;

Por suerte para los programadores, no estamos limitados a una sola letra para las variables. ¡Las podemos nombrar como queramos! Pero hay que seguir ciertas reglas que serán aclaradas más adelante. Sigue leyendo.😃

Primero hay que saber cuáles son los tipos de datos o variables que maneja JavaScript.

Tipos de datos

  • Strings o cadenas de texto

Es el dato más común de todos. Es sencillamente la unión de caracteres de texto de forma consecutiva, los espacios también están considerados dentro de este tipo de dato.

Los strings deben estar entre comillas dobles o comillas sencillas. Por ejemplo:

let cadenaDeTexto = “Esta es una cadena de texto”;

No te preocupes si nunca antes has visto algo como esto, más adelante se aclara el tema de declarar variables, qué es esa palabra de “let” y por qué la variable está escrita de esa forma. Sigue leyendo.👀

  • Números

Como su nombre lo indica, las variables manejan datos numéricos y es el segundo dato más usado en programación.

let numeroUno = 1;
let numeroJugador = 10;
let horasDelDia = 24;

Incluso se pueden asignar números negativos.

  • Booleanos o datos binarios

Es el dato que determina el flujo de un programa o aplicación. Solo se expresa de dos maneras: true y false (verdadero y falso / 1 y 0).

let encendido = true;
let encendido = false;

Como para determinar si una bombilla está en funcionamiento o no.

  • Null o valor nulo

Es el tipo de valor que se le asigna a una variable para decir que no contiene un dato.

Un detalle con este tipo dato es que no es lo mismo una variable declarada sin una asignación…

let volumen;

…A una asignada con el valor de null.

let volumen = null;

En el primer ejemplo la variable volumen está declarada y en espera de una asignación en alguna parte del código. En el segundo ejemplo ya tiene un valor asignado pero es nulo, es decirle al programa directamente que la variable volumen no tiene valor, así como la moneda de un país tercermundista en decadencia.

No confundir con el valor de 0 o Undefined.

  • Undefined

Los valores indefinidos son aquellos que están a la espera de una asignación.

let losSecretosDelUniverso = undefined;

Es muy raro usar undefined y null pero no está demás que sepas que existen estos tipos de datos.

  • Symbol

WTF??? sabrán prompt("Indique su deidad de preferencia aquí."); y Brendan Eich para qué sirve esto.

Los datos mencionados anteriormente se les conocen como datos primitivos ya que son los que se usaban antes de que saliera la versión 6 del lenguaje (ECMAScript6). Después de esta versión se agregaron otro tipo de datos como los objetos y los arreglos pero esos son un tema algo más complejo que se explicarán después.😁

Otros detalles sobre las variables en JavaScript

JavaScript es un lenguaje de programación débilmente tipado. ¿Esto qué quiere decir?

A diferencia de otros lenguajes de programación a las variables se les puede asignar cualquier tipo de dato, no hay que indicar si este va a ser un número entero (6), un número flotante o decimal (0.6) o un string. Simplemente se declara y se asigna.

Algunos lo consideran una desventaja pero depende del programador.🤷‍♂️

Existen algunos estándares para declarar las variables en este lenguaje. Veamos cómo es esto.👀

Declarando variables en JavaScript

La declaración de variables es “case sensitive”. No es lo mismo

let vasoDeAgua = "agua";

que

let VasoDeAgua = "agua";

A pesar de que ambas se llaman igual y tengan el mismo dato, el lenguaje las va a considerar variables diferentes solo por la diferencia entre la letra V.

El segundo punto es que el nombre de las variables debe ser descriptiva. Mientras más explícita sea la descripción, mejor.

let primer_pokemon = "Bulbasaur";

El tercer punto es la forma de declarar variables, acá te las explico:

  • Team Camel Case 🐪
  • Es la forma de declarar variables de nombres compuestos colocando a partir de la segunda palabra una letra mayúscula.

    let unaVariableRandom = "Randomness";
  • Team Upper Camel Case o Pascal Case 🐫
  • Es lo mismo que el team anterior solo que la primera letra de la variable empieza en mayúscula.

    let ToolEsTremendaBanda = true;
  • Team Underscore 🧛‍♀️
  • Esta forma de declarar variables usa el guión bajo al inicio del nombre y para separar nombres compuestos.

    let _im_so_under_score = "xD";

    También es válido no declarar la variable con el guión bajo al inicio.

  • Team Billete 🤑
  • Este team declara las variables usando el símbolo de $ al inicio del nombre de la variable.

    let $theNumberOfTheBeast = 666;🤘

Los nombres de las variables no pueden empezar con un número u otro símbolo. Al momento de imprimirlas les va a dar un error e incluso su editor les puede señalar el error de declaración.

Si llegaron la lectura hasta acá, unas cuantas líneas arriba escribí que explicaría lo de la palabra “let” antes del nombre de la variable. Ha llegado el momento con el siguiente punto. 😎

Declaración de variables con var, let y const

A estas tres palabras se les conoce como palabras reservadas y se usan para la declaración de variables.

var variable1;
let variable2;
const variable3;

El scope o alcance de las variables. Diferencias entre var, let y const

Antes de la salida de ECMAScript6 sólo existía la palabra reservada var para la declaración de variables. Con esta forma de declarar hay que tener cuidado porque tiene un alcance global en el transcurso de tu programa.

¿Y qué es el alcance global?

Es que la variable va a estar disponible en CUALQUIER parte del código.

Puedes llamarla y utilizarla en el momento que sea dentro de tu programa y eso puede ser algo confuso y hasta peligroso porque puede haber errores de reasignación de valores. Y esa es otra particularidad del lenguaje, las variables son reasignables a excepción de las constantes.

Si existe un alcance global, también existe un alcance local. True; 👍

Los alcances locales están determinados por corchetes dentro del programa ( { } ).

📢 ¡¡PRESTA ATENCIÓN!!

Es en este caso donde entra la palabra reservada let. Lo que lo diferencia de var es que su alcance local no va a ser afectado si hay una variable con el mismo nombre fuera del bloque de código.

Por este tipo de control es preferible declarar las variables con let en vez de var.

Para entender mejor este punto es preferible graficarlo. 🙂

//Lo que está encerrado dentro del borde blanco es el alcance o scope global.
//En este punto la variable podrá ser usada en cualquier parte del programa.

var edad = 17;
function mostrarEjemplo(){
var edad = 23;
if (edad > 18){
console.log("Puede comprar alcohol.");
}
console.log(edad);
}
/*Lo que está dentro del borde rojo es el scope o alcance local de estas líneas de código. Fíjate en los corchetes de color amarillo.*/

/*No te preocupes si no entiendes algo. De momento sólo enfócate en la variable edad y dónde se encuentra ubicada dentro del scope.*/
mostrarEjemplo();

En el ejemplo anterior la variable edad fue declarada dos veces, en el scope global con el valor de 17 y en el scope local con el valor de 23.

JavaScript va a tomar en cuenta la última vez que fue declarada la variable y va a reasignar el valor de edad de 17 a 23, por lo que esta persona ha falsificado su documento de identidad y puede comprar alcohol.

Ahora el mismo ejemplo con let.

let edad = 23;
function mostrarEjemplo(){
let edad = 17;
if (edad > 18){
console.log("Puede comprar alcohol.");
}
console.log(edad);
/*En este caso el individuo no puede comprar su preciada cerveza porque la variable edad no fue mutada por la declaración que está en el scope global. El valor de edad en este scope es de 17.*/
}
mostrarEjemplo();

Puedes copiar estos códigos en tu editor de texto para comprobarlo pero ten cuidado con la reasignación de variables si copias ambos.

El caso para usar const es cuando quieres utilizar un dato que sea inmutable en el transcurso de tu algoritmo. Como puede ser un número de ID o un nombre.A no ser que seas el individuo del ejemplo anterior.

const pi = 3.1416;
const realBadAss = "John Wick";

Si te ha gustado este artículo házmelo saber a través de mis redes sociales, dime también si crees que faltó algún detalle por explicar, si no te gustó o si quieres invitarme un café.😆