Variables

Las variables de JavaScript son contenedores para almacenar valores de datos , las variables constan de un nombre y pertenece a un tipo (númerico, cadena de caracteres, etc.).

Tipos de variable

Una variable puede almacenar:

Valores Enteros (100, 260, etc.)

Valores Reales (1.24, 2.90, 5.00, etc.)

Cadenas de caracteres ("Juan", "Compras", "Listado", etc.)

Valores lógicos (true,false)

Existen otros tipos de variables que veremos más adelante.

Las variables son nombres que ponemos a los lugares donde almacenamos la información. En JavaScript, deben comenzar por una letra o un subrayado (_), pudiendo haber además dígitos entre los demás caracteres. Una variable no puede tener el mismo nombre de una palabra clave del lenguaje.

Una variable se define anteponiéndole la palabra clave var:

var dia

se pueden declarar varias variables en una misma línea:

var dia, mes, anio;

a una variable se la puede definir e inmediatamente inicializarla con un valor:

var edad=20;

o en su defecto en dos pasos:

var edad;

edad=20;

Ejemplo

En este ejemplo, x, y y z son variables, declaradas con la palabra clave var:

var x = 5;
var y = 6;
var z = x + y;

En el ejemplo anterior, puede esperar:

x almacena el valor 5
y almacena el valor 6
z almacena el valor 11

Usando let y const (2015)

Antes de 2015, usar la palabra clave var era la única forma de declarar una variable de JavaScript. La versión 2015 de JavaScript (ES6 - ECMAScript 2015) permite el uso de la palabra clave const para definir una variable que no se puede reasignar, y la palabra clave let para definir una variable con alcance restringido.

Debido a que es un poco complicado describir la diferencia entre estas palabras clave, y debido a que no son compatibles con los navegadores más antiguos, la primera parte de este tutorial usará var.

Al igual que el álgebra

En programación, al igual que en álgebra, usamos variables (como precio1) para mantener valores.

En programación, al igual que en álgebra, usamos variables en expresiones (total = precio1 + precio2).

En este ejemplo, price1, price2, y total, son variables:

var price1 = 5;
var price2 = 6;
var total = price1 + price2;

En el ejemplo anterior, puede calcular el total en 11.

Identificadores de JavaScript

Todas las variables de JavaScript deben identificarse con nombres únicos , estos nombres únicos se denominan identificadores . Los identificadores pueden ser nombres cortos (como xey) o nombres más descriptivos (edad, suma, volumen total).

Las reglas generales para construir nombres para variables (identificadores únicos) son:

Los nombres pueden contener letras, dígitos, guiones bajos y signos de dólar.
Los nombres deben comenzar con una letra
Los nombres también pueden comenzar con $ y _ (pero no los usaremos en este tutorial)
Los nombres distinguen entre mayúsculas y minúsculas (y e Y son variables diferentes)
Las palabras reservadas (como las palabras clave de JavaScript) no se pueden usar como nombres
Los identificadores de JavaScript distinguen entre mayúsculas y minúsculas.

El operador de asignación

En JavaScript, el signo igual ( =) es un operador de "asignación", no un operador "igual a".

Esto es diferente al álgebra. Lo siguiente no tiene sentido en álgebra:

x = x + 5

En JavaScript, sin embargo, tiene mucho sentido: asigna el valor de x + 5 a x. (Calcula el valor de x + 5 y pone el resultado en x. El valor de x se incrementa en 5.)

Tipos de variables de JavaScript

Las variables de JavaScript pueden contener números como 100 y valores de texto como "John Doe". En programación, los valores de texto se denominan cadenas de texto.

JavaScript puede manejar muchos tipos de datos, pero por ahora, solo piense en números y cadenas. Las cadenas se escriben entre comillas simples o dobles. Los números se escriben sin comillas.

Si pone un número entre comillas, se tratará como una cadena de texto.

Aunque todas las variables de JavaScript se crean de la misma forma (mediante la palabra reservada var), la forma en la que se les asigna un valor depende del tipo de valor que se quiere almacenar (números, textos, etc.)

Numéricas

Se utilizan para almacenar valores numéricos enteros (llamados integer en inglés) o decimales (llamados float en inglés). En este caso, el valor se asigna indicando directamente el número entero o decimal. Los números decimales utilizan el carácter . (punto) en vez de , (coma) para separar la parte entera y la parte decimal:

var iva = 16; // variable tipo entero
var total = 234.65; // variable tipo decimal

Cadenas de texto

Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor a la variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su final:

var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';

En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si por ejemplo el propio texto contiene comillas simples o dobles, la estrategia que se sigue es la de encerrar el texto con las comillas (simples o dobles) que no utilice el texto:

/* El contenido de texto1 tiene comillas simples, por lo que se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";

/* El contenido de texto2 tiene comillas dobles, por lo que se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';

No obstante, a veces las cadenas de texto contienen tanto comillas simples como dobles. Además, existen otros caracteres que son difíciles de incluir en una variable de texto (tabulador, ENTER, etc.) Para resolver estos problemas, JavaScript define un mecanismo para incluir de forma sencilla caracteres especiales y problemáticos dentro de una cadena de texto. El mecanismo consiste en sustituir el carácter problemático por una combinación simple de caracteres. A continuación se muestra la tabla de conversión que se debe utilizar:

Si se quiere incluir...	Se debe incluir...
Una nueva línea	\n
Un tabulador	\t
Una comilla simple	\'
Una comilla doble	\"
Una barra inclinada	\\

De esta forma, el ejemplo anterior que contenía comillas simples y dobles dentro del texto se puede rehacer de la siguiente forma:

var texto1 = 'Una frase con \'comillas simples\' dentro';
var texto2 = "Una frase con \"comillas dobles\" dentro";

Este mecanismo de JavaScript se denomina "mecanismo de escape" de los caracteres problemáticos, y es habitual referirse a que los caracteres han sido "escapados".

Arrays

En ocasiones, a los arrays se les llama vectores, matrices e incluso arreglos. No obstante, el término array es el más utilizado y es una palabra comúnmente aceptada en el entorno de la programación.

Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente. Su utilidad se comprende mejor con un ejemplo sencillo: si una aplicación necesita manejar los días de la semana, se podrían crear siete variables de tipo texto:

var dia1 = "Lunes";
var dia2 = "Martes";
...
var dia7 = "Domingo";

Aunque el código anterior no es incorrecto, sí que es poco eficiente y complica en exceso la programación. Si en vez de los días de la semana se tuviera que guardar el nombre de los meses del año, el nombre de todos los países del mundo o las mediciones diarias de temperatura de los últimos 100 años, se tendrían que crear decenas o cientos de variables.
En este tipo de casos, se pueden agrupar todas las variables relacionadas en una colección de variables o array. El ejemplo anterior se puede rehacer de la siguiente forma:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

Ahora, una única variable llamada dias almacena todos los valores relacionados entre sí, en este caso los días de la semana. Para definir un array, se utilizan los caracteres [ y ] para delimitar su comienzo y su final y se utiliza el carácter , (coma) para separar sus elementos:

var nombre_array = [valor1, valor2, ..., valorN];

Una vez definido un array, es muy sencillo acceder a cada uno de sus elementos. Cada elemento se accede indicando su posición dentro del array. La única complicación, que es responsable de muchos errores cuando se empieza a programar, es que las posiciones de los elementos empiezan a contarse en el 0 y no en el 1:

var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes"
var otroDia = dias[5]; // otroDia = "Sábado"

En el ejemplo anterior, la primera instrucción quiere obtener el primer elemento del array. Para ello, se indica el nombre del array y entre corchetes la posición del elemento dentro del array. Como se ha comentado, las posiciones se empiezan a contar en el 0, por lo que el primer elemento ocupa la posición 0 y se accede a el mediante dias[0].

El valor dias[5] hace referencia al elemento que ocupa la sexta posición dentro del array dias. Como las posiciones empiezan a contarse en 0, la posición 5 hace referencia al sexto elemento, en este caso, el valor Sábado.

Booleanos

Las variables de tipo boolean o booleano también se conocen con el nombre de variables de tipo lógico. Aunque para entender realmente su utilidad se debe estudiar la programación avanzada con JavaScript del siguiente capítulo, su funcionamiento básico es muy sencillo.

Una variable de tipo boolean almacena un tipo especial de valor que solamente puede tomar dos valores: true (verdadero) o false (falso). No se puede utilizar para almacenar números y tampoco permite guardar cadenas de texto.

Los únicos valores que pueden almacenar estas variables son true y false, por lo que no pueden utilizarse los valores verdadero y falso. A continuación se muestra un par de variables de tipo booleano:

var clienteRegistrado = false;
var ivaIncluido = true;