¿Qué son las variables en JavaScript? - Curso de JavaScript de cero a máster - Capítulo 3


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.

Archivo JS

var color1;
let color2;

Cómo inicializar una variable en JavaScript

Las variables del ejemplo están declaradas, 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 (=).

Archivo JS

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:

Archivo JS

 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.

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.

Archivo JS

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

Sigamos.

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().

Archivo JS

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

alert(color1);

Resultado en el navegador

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

Ventana alert() JavaScript con el valor de una variable

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.

Archivo JS

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

alert(color1);

Resultado en el navegador

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.

Mostrar valor de una variable en JavaScript

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 color 1 en los diferentes momentos.

Archivo JS

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

color1 = "Azul";
alert(color1);

Resultado en el navegador

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.

Mostrar valor de una variable en JavaScript

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

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

  2. Código JS

    Let numero1 = 100
    Let numero1 = 200
    alert(numero1);
  3. 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.
  4. 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í: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.