Variables en JavaScript

Variables en JavaScript 1
¿Qué aprenderás? 2
Introducción 2
Variables 3
Constantes 6
Ejercicio guiado: Trabajando con variables y constantes 7

¡Comencemos!

_ 1

www.desafiolatam.com
¿Qué aprenderás?

● Distinguir variables y constantes como recurso para almacenar valores en

JavaScript.

● Codificar una rutina JavaScript utilizando las variables y sus distintos tipos de datos
para resolver un problema planteado.

Introducción

Así como en matemáticas entendemos una variable como un elemento que permite hacer
referencia a algún valor, tal como en las ecuaciones y fórmulas, en programación nos
referimos a ellas como un espacio de memoria donde se almacena un dato.

Esto es esencial para cualquier programa de mediana complejidad, pues permite que el
programa mantenga su funcionamiento, independientemente de los valores que ingresen a
él.

En este capítulo abordaremos este concepto, sus ventajas y desventajas. Además,

tendremos un primer acercamiento a lo que son los tipos de datos. De esta manera, iremos
adquiriendo poco a poco herramientas que nos permitan agregar dinamismo a la lógica de
los programas que desarrollemos, adquiriendo la experiencia necesaria para resolver
desafíos cada vez más complejos.

¡Vamos con todo!

_ 2

www.desafiolatam.com
Variables

En programación, las variables permiten almacenar datos en pequeñas cajas. Por ejemplo, si
tenemos que guardar el nombre de un usuario que ingresó a la plataforma de desafío latam,
para luego imprimirlo por pantalla y así el usuario pueda ver su nombre, lo podemos guardar
en una variable, en alguna “cajita”.

Las variables en JavaScript se declaran de la siguiente manera:

var usuario = 'Alexis';

var edad = 30;

Se declaran con la palabra var, esta palabra reservada se encarga de decirle a JavaScript o al
computador que lo que viene es una variable. Luego, seguido de var viene el nombre que
queremos colocarle a la variable, a continuación después del signo = viene el dato que
estamos almacenando. Decidir qué nombre asignarle a una variable suele ser una tarea
polémica y entretenida, por esa razón te invitamos a revisar la Lectura Complementaria -
Consejos para nombrar una variable en donde aprenderás las buenas prácticas para el
nombramiento de una variable según su tipo de dato.

Para poder utilizar una variable hay miles de formas, todo va a depender de la manera que
nosotros creemos que es más conveniente manipularla.

Como su nombre lo dice, en una variable su valor puede variar. Vamos a hacer un ejemplo
para poder entenderlo. En el siguiente código declaramos una variable “nombre” y
almacenamos el dato de tipo texto (string) “Alexis”:

var nombre = "Alexis";

alert(nombre);

La forma en la que asignamos el valor de la variable nombre representa la forma

“literal”, no obstante también es posible crear cadenas de texto haciendo una
instancia del objeto String, si quieres saber más te invitamos a consultar la
documentación oficial.

Si bien el código anterior podría haber sido escrito de la siguiente forma, esta no es la más
recomendable.

alert('Alexis');

_ 3

www.desafiolatam.com
Esta forma no es correcta ya que siempre tendrá el mismo resultado. Es decir, siempre
mostrará el mensaje Alexis en la alerta. La gracia de usar variables es que permiten conocer
a simple vista qué es lo que se está guardando en ella.

Para saber a simple vista qué es lo que se está almacenando en una variable es importante
nombrarlas adecuadamente. En el ejemplo a continuación, con sólo leer el nombre de la
variable es posible saber qué es lo que está almacenando.

alert(nombre);

El siguiente código también es válido, pero no se puede saber con solo leerlo cuál va a ser
su resultado.

alert(a);

Esto dado que la variable “a” podría guardar un nombre, la edad de una persona, la cantidad
de pasos que dio en la última hora o cualquier cosa. Debido a lo anterior, es importantísimo
nombrar adecuadamente las variables, es una buena práctica que marca diferencias entre
un buen y un mal desarrollador.

Junto con lo anterior, la importancia de las variables es que se pueden utilizar en más de
una ocasión. Si se considera el siguiente código:

alert('Alexi');
alert('Alexi');
alert('Alexi');
alert('Alexi');
alert('Alexi');

Es posible notar que el nombre está mal escrito, ya que dice Alexi y debería ser Alexis. Para
solucionar este error de escritura, habría que cambiar todos los Alexi por Alexis, es decir,
realizar ese cambio 5 veces. ¿Qué pasaría si el código fuese mucho más grande y hubiera
que realizar ese cambio 100 o 1.000 veces? Sería una situación muy poco práctica. Si para
lo anterior se hubieran utilizado variables, habría sido necesario realizar un solo cambio.

var nombre = 'Alexi';

alert(nombre);
alert(nombre);
alert(nombre);
alert(nombre);

_ 4

www.desafiolatam.com
 alert(nombre);

En el código anterior, basta con corregir el error en una única línea (la primera) y el programa
funcionará tal y como se espera.

Continuando con el ejemplo anterior, ahora borramos y declaramos la misma variable pero
no le asignamos ningún valor (creamos nuestra caja, la dejamos abierta pero no colocamos
nada dentro de ella por el momento):
var nombre;

Agregamos también otra variable, la cual almacenará una edad:

var edad;

No le asignamos a ninguna de las dos variables un valor, ya que en el ejemplo queremos ver
el por qué del nombre “variable”. El valor se lo asignaremos nosotros cuando carguemos la
página .html en el navegador.

Para hacer esto, agregamos la siguiente línea de código:

nombre = prompt("Ingrese su nombre");

edad = prompt("Ingrese su edad");

// Le asignamos el valor a cada variable desde el valor que ingresamos

en el método prompt.

Lo que el método prompt() nos permite hacer aquí, es solicitar que el usuario ingrese un
dato, luego ese dato ingresado lo almacenamos en cada una de las variables que
declaramos.

Luego, utilizando el comando document.write() imprimimos en la página .html los valores

de cada variable de la siguiente manera:

var nombre;
var edad;

nombre = prompt("Ingrese su nombre");

edad = prompt("Ingrese su edad");

document.write(nombre);
document.write(" ");

_ 5

www.desafiolatam.com
 document.write(edad);

document.write(nombre);
document.write(" ");
document.write(edad);

El ejemplo mostraría como resultado:

Alexis 30

En el comando document.write(); lo que hicimos fue mostrar los valores ingresados y

almacenados en cada variable. El operador + nos sirve para concatenar o unir dos valores
distintos.

En este ejemplo pudimos apreciar básicamente la función de las variables, que el valor
cambia cada vez que nosotros cargamos la página .html e ingresamos datos.

Constantes

Las constantes son parecidas a las variables ya que almacenan datos, con la diferencia que
no pueden cambiar porque son “constantes”. Una variable puede tener un valor, pero luego
puede tener otro y así sucesivamente, pero cuando estemos programando vamos querer en
muchos casos almacenar datos los cuales no queremos que cambien y para esto utilizamos
las constantes.

Cuando yo declaro una constante esta ya no es modificable, sino que solamente tiene
carácter de lectura.

La forma en que nosotros podemos declarar una constante es de la siguiente manera:

const anioNacimiento = 1988;

En vez de “var” como en las variables, acá utilizamos la palabra reservada “const” seguido
del nombre que le pondremos a la constante y posterior su valor.

En la versión anterior a ES6 existía solamente una manera de declarar variables, que era con
la palabra “var”. Ahora con ES6 (ECMAScript 6) tenemos dos opciones más: “const” y una
manera que no vimos pero que brevemente explicaremos aquí, que es “let”.

_ 6

www.desafiolatam.com
“var”, en resumen tiene ámbito de función y la podemos llamar dentro y hacia una función.
Pero con “let” podemos crear variables en ámbitos de bloques. Es decir, por ejemplo, si
declaramos una variable con la palabra reservada “let” denominada “i” en un ciclo repetitivo
o en una estructura condicional, esta variable solamente la podremos ocupar dentro del
mismo ciclo repetitivo o estructura condicional. Al igual que “const”, que también tiene
ámbito de bloques, pero a diferencia de “var” y “let” no puede ser reasignado su valor.

Debido a que este es un primer acercamiento al mundo de la programación, las ventajas y

desventajas entre var, let y const se abordarán en las siguientes unidades a lo largo de la
carrera, al igual que las estructuras condicionales y los ciclos repetitivos en el código.

Ejercicio guiado: Trabajando con variables y constantes

Crear un programa con JavaScript desde un archivo externo que solicite al usuario dos
números enteros mediante el uso del método “prompt()”, almacenando esos dos números
en variables separadas y realizando las cuatro operaciones matemáticas básicas (suma,
resta, multiplicación y división). Luego mostrar el resultado para cada operación en el
mismo documento .html mediante el comando document.write().

● Paso 1: Crear una carpeta en tu computador en tu sitio de trabajo, con el nombre que
desees, luego crea dos archivos dentro de ella, el primero será el index.html y el
segundo será el script.js.

Imagen 1. Carpeta contenedora con los dos archivos creados.

Fuente: Desafío Latam

● Paso 2: En el documento index.html, crear la estructura básica de un documento

HTML y enlace mediante la etiqueta script en el atributo “src” el archivo externo de
JavaScript para que lo puedas implementar.

● Paso 3: Ahora es momento de trabajar en nuestros script.js, para ello, pedir al usuario
los datos y almacenarlos en una variable por separado. En este caso
implementaremos el método “prompt();” para solicitar al usuario los datos y pasarlos
a una variable, quedando de la siguiente manera:

var num1 = prompt("Ingrese el primer número");

var num2 = prompt("Ingrese el segundo número");

_ 7

www.desafiolatam.com
 ● Paso 4: Realizar las operaciones matemáticas e indicar mediante el
document.write() cuál es la operación y cuál sería el resultado. En este caso, se
debe tener cuidado con el valor de las variables, debido a que el método prompt las
recibe como cadena de caracteres y no números, por lo que se deben convertir a
número empleando la función parseInt(), quien se encargará de la transformación
de cadena de caracteres a números enteros. Esa función se estará utilizando
nuevamente en los siguientes capítulos donde será explicada más en detalle.
var num1 = prompt("Ingrese el primer número");
var num2 = prompt("Ingrese el segundo número");

document.write("La suma es: ");

document.write(parseInt(num1)+parseInt(num2));
document.write(" ");
document.write("La resta es: ");
document.write(parseInt(num1)-parseInt(num2));
document.write(" ");
document.write("La multiplicación es: ");
document.write(parseInt(num1)*parseInt(num2));
document.write(" ");
document.write("La división es: ");
document.write(parseInt(num1)/parseInt(num2));

Luego, al abrir el archivo index.html en el navegador web, e ingresar 12 y 34

respectivamente, encontrarás el siguiente resultado:

Imagen 2. Resultado en el documento index.html.

Fuente: Desafío Latam

Ahora veremos cómo utilizar una constante y la diferencia entre una variable. Haremos una
operación matemática con un valor constante que nunca cambia y con un dato variable.

● Paso 5: Reemplazar el contenido del archivo “.js” con el siguiente código:

const pi = 3.14;
var num;

num = prompt("Ingrese número para multiplicar por 'pi': ");

_ 8

www.desafiolatam.com
 alert(pi*num);

● Paso 6: El resultado a continuación corresponde al ingreso del número 4:

Imagen 3. Resultado del código anterior en ventana emergente.

Fuente: Desafío Latam

¿Qué hicimos? Simple, declaramos una constante llamada “pi” la cual matemáticamente
tiene un valor que nunca cambia, ya que siempre “pi” va a tener un valor fijo. También
declaramos una variable “num”, la cual obtendrá su valor de acuerdo a lo que nosotros
ingresemos en pantalla con el método “prompt”.

_ 9

www.desafiolatam.com