¿Qué son las variables de JavaScript?

En este tercer capítulo, dejamos atrás las introducciones para ir de lleno con el código. En este caso empezamos por lo más básico de todo lenguaje, las variables, siempre presentes.

¿Qué son las variables?

Una variable es un contenedor lógico que almacena datos de todo tipo, es decir, información. Cada lenguaje de programación lleva los suyos, números enteros, decimales, texto, etc.

Su nombre dice mucho de ellas, ya que una variable está diseñada para variar, inicialmente en tu código puede tener un valor e ir cambiando durante toda la ejecución de este.

¿Cómo se declaran las variables en JavaScript?

En JavaScript podemos utilizar la palabra reservada let, tal y como viste en el capítulo anterior o la palabra var, seguido del nombre que le quieras dar.

Palabra del lenguaje nº 3 encontrada.
var es una palabra reservada del lenguaje y se utiliza para declarar variables como ocurre con let.

var color1;
let color2;

¿Cómo inicializar una variable en JavaScript?

Las variables del ejemplo anterior, están declaradas, pero no tienen ningún valor, solo su nombre. Para añadir algún dato a una variable, hay que inicializarla. Esto se consigue con el operador de asignación, que en JavaScript es el símbolo igual =.

var color1 = "Rojo";
let color2 = "Verde"

Estas dos variables tienen ahora un tipo de dato de texto, color1 tiene el valor de "Rojo" y color2, "Verde". Esto solo es texto plano, no son colores, es solo un ejemplo de texto para que veas como se guardan datos en las variables. También, en el capítulo anterior viste como guardar un número.

Los datos de tipo texto se escriben entre comillas en las variables.

Antes de seguir con el tema de las variables, ten en cuenta que hay que terminar cada línea con un punto y coma, de ese modo, se separan, ya que recuerda que ignora los espacios en blanco. Sin el punto y coma, el código anterior sería así para el navegador:

var color1 = "Rojo"let color2 = "Verde"

Hay veces en los que no te va a dar error si te dejas alguno sin poner. Pon atención a esto, ya que es una de las causas de error más comunes.
Más adelante verás que se puede trabajar (no desde siempre) sin poner los puntos y coma, de momento, acostúmbrate a usarlos.

Otro detalle sobre el punto y coma. También puedes hacer esto, separar diversas líneas en la misma línea con punto y coma, el resultado es el mismo, pero esto no es una buena práctica, así que te recomiendo que no lo hagas.

 // Mala práctica.
var color1 = "Rojo"; let color2 = "Verde";

¿Cómo mostrar el valor de una variable de JavaScript en el navegador?

Lo puedes hacer de varias formas, una que ya sabes del capítulo anterior es con la función alert().

var color1 = "Rojo";
let color2 = "Verde";

alert(color1);

El resultado es que me devuelve en el alert() el valor de la variable color1.

Reasignar valores a una variable en JavaScript

Tal y como he dicho, las variables están diseñadas para variar, de modo, que es importante conocer como hacerlas cambiar de valor.

Una vez está declarada la variable (pones var o let y el nombre), no tienes que volver a repetir let o var para darle un nuevo valor.

var color1 = "Rojo";
color1 = "Azul";

alert(color1);

El resultado es que me devuelve en el alert() el valor Azul, el cuál ha sustituido a Rojo. Esto lo puedes hacer cuantas veces quieras. Pero recuerda, let o var es solo para crear la variable, luego no tienes que utilizarlo de nuevo en la misma variable.

El flujo de ejecución de JavaScript

El flujo de ejecución del código va de arriba abajo en JavaScript. Se ejecuta primero esta línea, var color1 que tiene el valor Rojo. En el momento que llegamos a la segunda línea, color1 tiene un valor de Azul y ha perdido ese valor Rojo. Finalmente, se lee la última línea, la del alert() en la que ve que en ese momento color1 es igual a Azul.

Probemos esto con dos alert() que muestren el valor de color1 en los diferentes momentos.

var color1 = "Rojo";
alert(color1);

color1 = "Azul";
alert(color1);

El resultado es que me devuelve en el alert el valor Azul, el cuál ha sustituido a Rojo. Esto lo puedes hacer cuantas veces quieras. Pero recuerda, let o var es solo para crear la variable, luego no tienes que utilizarlo.

Hay formas de modificar el flujo de ejecución normal de JavaScript, por ejemplo, con estructuras de control de flujo (condicionales). No hay prisa, aún faltan unos cuantos capítulos para llegar a esto.

Ejercicios de JavaScript

3. Corrige las siguientes líneas de código solo si encuentras algo mal.

Let numero1 = 100
Let numero1 = 200
alert(numero1);

4. Crea una variable llamada numero y dale un valor de 50. En otra línea, dale a esta variable el valor de 75. Finalmente, debes escribir un alert() que muestre el último valor de numero.
5. Crea una variable llamada nombre con un valor de texto con tu propio nombre. Haz que salga tu nombre en un alert().

La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.