Storing the information you need — Variables

Almacenando la información que necesitas — Variables

Después de leer los dos últimos artículos, debes saber qué es JavaScript, qué puede hacer por ti, cómo usarlo junto con otras tecnologías web y cuáles son sus características principales desde un alto nivel. En este artículo vamos a centrarnos en lo básico, y veremos cómo trabajar con la mayoría de los componentes más básicos de JavaScript: Variables.

Prerrequisitos: Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.
Objectivo: Familiarizarse con los conceptos básicos de las variables de JavaScript.

Herramientas que necesitas

A lo largo de este artículo, se te pedirá que escriba líneas de código para probar tu comprensión del contenido. Si utilizas un navegador de escritorio, el mejor lugar para escribir este código es la consola de JavaScript del navegador (consulte Qué son las herramientas de desarrollo del navegador para obtener más información sobre cómo acceder a esta herramienta).

Sin embargo, también proporcionamos una consola JavaScript simple más abajo en esta página donde escribir este código si te resulta más comodo.

¿Qué es una variable?

Una variable es un contenedor para un valor, como un número que podríamos usar en una suma, o una cadena que podríamos usar como parte de una oración. Pero una cosa especial acerca de las variables es que el valor que contienen puede cambiar. Veamos un ejemplo:

<button>Presiona</button>
const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('¿Cuál es tu nombre?');
  alert('Hola ' + name + ', me alegro de verte!');
}

En este ejemplo, al presionar el botón se ejecutan un par de líneas de código. La primera línea muestra un cuadro en pantalla que pide al lector que ingrese su nombre, y luego almacena el valor en una variable. La segunda línea muestra un mensaje de bienvenida que incluye su nombre, tomado del valor de la variable.

Para entender por qué esto es tan útil, pensemos en cómo escribiríamos este ejemplo sin usar una variable. Sería algo como esto:

var name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

Puede que no comprendas del todo la sitaxis que estamos utilizando (todavía), pero serás capaz de entender la idea — si no tuviesemos las variables disponibles, tendríamos que implementar un bloque gigante de código que compruebe el nombre enviado por el usuario, y después muestre el mensaje correspondiente para ese nombre. Obviamente eso es ineficiente (el código sería muy grande), y seguiría sin funcionar — posiblemente no pudiese almacenar todas las opciones posibles.

Las variables tienen sentido, y a medida que vayas aprendiendo más sobre JavaScript, te irán resultando más naturales.

Otra cosa especial de las variables es que pueden contener de todo — no solo cadenas y números. Las variables también pueden contener datos complejos e incluso funciones enteras con las que hacer cosas asombrosas. Aprenderás más sobre esto más adelante.

Nota: Hemos dicho que las variables contienen valores. Es una importante tener en cuenta que las variables no son valores por sí mismas. Puedes pensar en ellas con una caja de cartón donde puedes guardar cosas dentro.

Declarando una variable

Para usar una variable, primero tienes que crearla, a esto se le llama declarar una variable. Para hacer esto, escribimos la palabra clave var o let seguida del nombre que le quieres poner a la variable:

let myName;
let myAge;

Aquí estamos creando doss variable llamadas myNamemyAge. Prueba a escribir estas líneas en la consola de tu navegador, o en la consola de debajo. Después, prueba a crear una variable (o dos) con los nombres que tú elijas.

Nota: En JavaScript, todas las instrucciones deben terminar con punto y coma (;) — tu código puede funcionar correctamente si es sólo una línea, pero probablemente no funcionará cuando estés escribiendo múltiples líneas de código juntas. Procura acostumbrarte a incluirlo.

Puedes probar si estos valores existen en el entorno de ejecución tecleando únicamente el nombre de las variables, por ejemplo:

myName;
myAge;

Ahora mismo no tienen ningún valor, son contenedores vacíos. Cuando tecleas el nombre de las variables, deberías recibir de vuelta el resultado undefined. Si las variables no existen, recibirás un mensaje de error — prueba a teclear:

scoobyDoo;

Nota: No confundas una variable que existe y que no tiene asignado ningún valor, con una variable que no existe  — son cosas diferentes.

Inicializar una variable

Una vez que has declarado la variable, puedes inicializarla con un valor. Esto se hace escribiendo el nombre de la variable, seguido del signo de igual (=), continuado por el valor que le quieres dar. Por ejemplo:

myName = 'Chris';
myAge = 37;

Vuelve a la consola y escribe estas líneas. Deberías poder ver en la consola los valores que asignaste a la variable para confirmar que se incializaron correctamente. De nuevo, puedes ver el valor de cada variable escribiendo su nombre en la consola — inténtalo así:

myName;
myAge;

Puedes declarar e incializar una variable al mismo tiempo de la siguiente forma:

let myDog = 'Rover';

Probablemente esto sea lo que hagas la mayoría de veces, es más rápido que hacer las dos acciones en líneas de código diferentes.

Nota: Si escribes un programa multilínea de JavaScript que declara e incializa variables, puedes declarar la variable después de incializarla y seguirá funcionando. Debido a que las declaraciones de variables generalmente se ejecutan  antes que el resto del código. Esto es llamado hoisting — leer var hoisting para mas detalles acerca del tema.

Diferencia entre var y let

En este punto puedes estar pensando "¿por qué necesitamos dos palabras clave para definir las variables? ¿Por qué tener var y let?".

Las razones son un tanto históricas. Cuando Javascript fue creado, sólo existía var. Esto funciona bien en la mayoría de los casos, pero tiene algunos problemas en cómo funciona — su diseño a veces puede ser confuso o molesto. Por eso, se creó let en versiones modernas de JavaScript, una nueva palabra clave que funciona de forma diferente a var, solucionando sus problemas.

A continuación se explican un par de diferencias sencillas. No vamos a entrar en todas las diferencias ahora, pero las descubriras a medida que aprendas más sobre JavaScript (si quieres leer sobre ellas ahora, no dudes en visitar visitar nuestra página de referencia).

Para empezar, si escribes un programa JavaScript multilínea que declare e inicialice una variable, puedes declarar una variable con var después de inicializarla y seguirá funcionando. Por ejemplo:

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

Nota: Este código no funcionará cuando se escriben líneas individuales en una consola JavaScript, sólo cuando se ejecuta un programa multilínea en un documento web.

El código anterior funciona debido al hoisting.

El hoisting ya no funciona con let. Si en el ejemplo anterior cambiáramos var por let , nos daría un error. Esto es algo bueno — declarar una variable después de inicializarla hace que el código sea confuso y más difícil de entender.

En segundo lugar, cuando usas var, puedes declarar la misma variable tantas veces como quieras, pero con let no. Lo siguiente funcionaría:

var myName = 'Chris';
var myName = 'Bob';

Pero lo siguiente daría un error en la segunda línea:

let myName = 'Chris';
let myName = 'Bob';

Tendrías que hacer esto:

let myName = 'Chris';
myName = 'Bob';

Una vez más, se trata de una decisión lingüística sensata. No hay razón para redeclarar las variables - sólo hace que las cosas sean más confusas.

No hay ninguna razón para usar var, a menos que necesites soportar versiones antiguas de Internet Explorer en tu código (no soporta let hasta la versión 11; el navegador Windows Edge soporta let a la perfección).

Note: Actualmente estamos en el proceso de actualizar el curso para usar let en lugar de var.

Actualizando una variable

Una vez que has inicializado la variable con un valor, puedes cambiar (o actualizar) ese valor simplemente dándole un valor diferente. Intenta introducir las siguientes líneas en tu consola:

myName = 'Bob';
myAge = 40;

Reglas para asignar nombres a las variables

Puedes nombrar a una variable casi como quieras, pero hay limitaciones. Generalmente debes limitarte a usar solo caracteres latinos (0-9, a-z, A-Z) y el "caracter subrayado" ( también llamado guión bajo  " _  ").

  • No debes usar otros caracteres, pues puede ocasionar errores o confusión para otros programadores internacionales.
  • No use el guión bajo al inicio del nombre de una variable — esto se usa en ciertos constructores de Javascript.
  • No use números al incio del nombre de una variable. No está permitido y causará un error.
  • Una buena práctica a seguir es usar la convención "lower camel case", donde se unen varias palabras, usando minúsculas para la primera y luego capitalizar las siguientes. Hasta ahora la hemos utilizando para nombrar nuestras variables.
  • Haga los nombres de las variables intuitivas, de manera que describan los datos que contienen.
  • Las variables son case sensitive — eso quiere decir que myage es una variable diferente de myAge.
  • Por último — debe evitar usar palabras reservadas para nombrar variables — con esto, nos referimos a las palabras que conforman la sintaxis de Javascript. Por lo tanto no puede usar palabras como var, function, let, y for para nombrar variables, ya que generará errores.

Nota: Puede encontrar la lista completa de palabrars reservadas para poder evitarlas en  Lexical grammar — keywords.

Ejemplos de nombres correctos:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

Ejemplos de nombres incorrectos:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

Ejemplo de nombres que pueden resultar en error:

var
Document

Prueba a crear unas cuantas variables más, con la esta guía en mente.

Tipos de variables

Hay distintos tipos de datos que se puede almacenar en variables. En esta sección, los veremos de manera breve, en futuros artículos aprenderemos mas detalles acerca de estos.

Hasta ahora hemos visto los 2 primeros, pero hay otros.

Números

Puede almacenar números en las variables, ya sean números enteros como 30 (también llamados integers) números decimales como 2.456 (también llamados floats).

En Javascript no es necesario declarar el tipo de variable, a diferencia de otros lenguajes de programación. Cuando asignas un valor numérico a una variable, no debe incluir comillas:

let myAge = 17;

Strings

Los Strings son piezas de texto. Cuando asignas a una variable un String, debe encerrarlo entre comillas simples ( ' ' ) o dobles ( " " ), de lo contrario Javascript lo interpretará como si se tratase del nombre de otra variable. 

let dolphinGoodbye = 'So long and thanks for all the fish';

Booleanos

Los Booleanos son valores de verdadero o falso — pueden tener 2 valores, truefalse respectivamente. Generalmente se usan en condicionales, despúes de lo cual el código se ejecuta según corresponda. Un ejemplo:

let iAmAlive = true;

Mientras que en la mayoría de casos se usaría así:

let test = 6 < 3;

Usamos el operador "menor que" (<) para probar si 6 es menor que 3. Como era de esperarse, esto retorna false,¡porque 6 no es menor que 3!. 

Arrays

Un array es un objeto que contiene varios elementos encerrados entre corchetes y separados por comas. Intente ejecutar esto en su consola:

let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10,15,40];

Una vez definidos estos arrays, se puede acceder a cada elemento por su ubicación dentro del array. Pruebe estas líneas:

myNameArray[0]; // debería retornar 'Chris'
myNumberArray[2]; // debería retornar 40

Los corchetes especifican un valor de índice que corresponde a la posición del valor que quiere retornar. Los arrays en Javascript están indexadas en cero, es decir, el primer elemento de un array está en el índice 0.

Aprenderás mucho más acerca de arrays en un futuro artículo.

Objetos

En programación, un objeto es una estructura de código que modela o representa a un objeto de la vida real. Puedes tener un objeto que represente a una caja que contenga datos sobre su ancho, largo y alto, o podrías tener un objeto que represente a una persona, y contenga datos sobre su nombre, altura, peso, que idioma habla, cómo saluda en éste, y más.

Intente introducir esta línea en su consola:

let dog = { name : 'Spot', breed : 'Dalmatian' };

Para recuperar la información almacenada en un objeto, puede usar la siguiente sintaxis:

dog.name;

Por el momento no veremos más acerca de los objetos.

Débilmente tipado

JavaScript es un lenguaje "débilmente tipado", lo cual significa que , a diferencia de otros lenguajes, no es necesario especificar el tipo de dato que vamos a almacenar en una variable(Ej. números, strings, arrays, etc).

Por ejemplo, si declara una variable y encierra su valor entre comillas, el navegador tratará esa variable como un string:

let myString = 'Hello';

Mientras el valor de esta variable esté dentro de comillas, seguirá siendo un string, así que ten cuidado:

let myNumber = '500'; // ups, esto sigue siendo un string
typeof(myNumber);
myNumber = 500; // mucho mejor— ahora es un número
typeof(myNumber);

Intentete ingresar en su consola las 4 líneas anteriores, y vea cuáles son los resultados. Notará que usamos una función especial llamada typeof() — esta retorna el tipo de dato de la variable que se le pasa. La primera  retornará un string, ya que en ese momento la variable myNumber contiene un string, '500'. Heche un vistazo al resultado la segunda vez que llama a esa función.

Constantes en JavaScript

Muchos lenguajes de programación poseen el término constante— una variable que cuyo valor una vez declarado nunca se puede cambiar. Hay muchas razones por las que querría utilizar esto, desde razones de seguridad (si se permitiera que un script de terceros cambiara dichos valores, podría generar problemas) hasta la depuración y comprensión del código (es más difícil cambiar por accidente valores que no deberían cambiarse y desordenar las cosas).

En los incios de  JavaScript, no existían las constantes. En versiones modernas, tenemos la palabra reservada const, que nos permite almacenar valores que nunca se pueden cambiar:

const daysInWeek = 7;
const hoursInDay = 24;

const funciona exactamente igual que let, a excepción que a const no le puedes asignar un nuevo valor. En el siguiente ejemplo, la segunda línea debería lanzar un error:

const daysInWeek = 7;
daysInWeek = 8;

Resumen

A estas alturas ya debería tener un conozimiento razonable sobre las variables de Javascript y como crearlas. En el siguiente artículo nos centramos en los números con más detalle, y veremos funcionalidades matemáticas básicas en Javascript.

En este módulo