Variables JavaScript

Las variables JavaScript son contenedores para almacenar valores de datos.

En el siguiente ejemplo, x, y, y z son variables, declaradas con la palabra reservada var:

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

Con estas declaraciones en JavaScript se espera que:

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

Uso de let y const (2015)

Antes del 2015, usar la palabra reservada var era la unica forma para declarar una variable en JavaScript.

La versión 2015 de JavaScript (ES6 - ECMAScript 2015) permitio el uso de la palabra reservada const para definir una variable que no puede ser reasignada, y también la palabra reservada let para definir una variable con alcance restingido.

Y dado que es complicado describir la diferencia entre estas palabras reservadas y de que no estas no son soportadas por los navegadores web antiguos, en la primera parte de este tutorial se usará solo la palabra reservada var.

Igual que en Álgebra

En el siguiente ejemplo, precio1, precio2 y total son variables:

var precio1 = 5;
var precio2 = 6;
var total = precio1 + precio2;

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

Y también al igual que en álgebra usamos expresiones como: total = precio1 + precio2

Así en el ejemplo anterior, podemos calcular que total contiene el valor 11.

Identificadores JavaScript

Todas las variables JavaScript deben identificarse con un nombre único. Así estos nombres únicos son llamados identificadores.

Los identificadores pueden ser nombres cortos como x o y, o nombres más descriptivos como edad, suma, totalVolumen.

Las reglas generales para declarar nombres de variables, es decir, identificadores únicos son:

  • pueden contener:
    • letras,
    • digitos,
    • guiones bajo
    • y guiones medio.
  • deben iniciar ya sea con:
    • una letra,
    • con el caracter $ (string),
    • o con el caracter _ (guion bajo).
  • son sensibles a máyusculas y minusculas: Así:
    • y es diferente de Y,
    • o suma es diferente a Suma.
  • no se puede utilizar las palabras reservadas de JavaScript.

El Operador de Asignación

En JavaScript, el signo igual "=" es un operador de asignación, y no un operador de comparación "igual que".

Esto es diferente al álgebra. Así, la siguiente declaración no tiene sentido en el álgebra:

x = x + 5

Sin embargo, en JavaScript esto tiene mucho sentido; se realiza el calculo de x + 5 y el resultado es asignado a la variable x, así el valor de x es incrementado por 5.

En JavaScript el operador de condición "igual a" es escrito con doble signo igual, es decir: "==".

Tipos de Datos JavaScript

Las variables JavaScript pueden contener valores numéricos como 100 y valores de texto como "Juan Pérez".

En programación, los valores de texto son llamadas cadenas de texto.

Se pueden contener otros tipos de datos, pero por ahora, solo nos concentraremos en números y cadenas de texto:

  • Las cadenas de texto se escriben dentro de comillas simples o dobles.
  • Los números se escriben sin comillas.
  • Si un número se escribe dentro de comillas, estos serán tratados como cadena de texto.

Ejemplos:

var pi = 3.1416;   // Esto es un número.
var persona = "Juan Pérez";   // Esto es una cadena.
var factura = "00034";   // Esto es una cadena.

Declaración de Variables en JavaScript

La creación de variables en JavaScript es llamada declaración de variable.

En el siguiente ejemplo, se declara una variable Javascript con le palabra reservada var:

var nombreAuto;

Después de esta declaración, la variable no tiene ningún valor; pero tecnicamente tiene el valor de "indefinido".

Para asignarle un valor a la variable se realiza con el operador de asignación "=" (signo igual):

nombreAuto = "Volvo";

También se pudo haber asignado el valor en el mismo momento en que se declaró la variable:

var = nombreAuto = "Volvo";

En el siguiente ejemplo, creamos la variable nombreAuto y le asignamos el valor "Volvo". Después mostramos la valor dentro del párrafo HTML con id="demo":

<p id="demo"></p>

<script>
  var nombreAuto = "Volvo";  
  document.getElementById("demo").innerHTML = nombreAuto;
</script>

Varias Variables en una Declaración

Se pueden declarar varias variables en una sola declaración. La declaración inicia con var y las variables se separan con comas:

var persona = "Juan Pérez", nombreAuto = "Volvo", precio = "300000";

Una declaración puede abarcar múltiples líneas:

var persona = "Juan Pérez",
nombreAuto = "Volvo",
precio = "300000";

Una variable sin valor definido

En programación, las variables son a menudo declaradas sin un valor. El valor puede ser algo que tiene que ser calculado o algo que se proporsionará más adelante como una entrada del usuario. Así, una variable sin un valor declarado tendrá el valor undefined.

En la siguiente declaración la variable nombreAuto tendrá un valor undefined después de la ejecución:

var nombreAuto;

Redeclarar variables

En JavaScript, si se redeclara una variable, esta no pierde su valor.

En el siguiente ejemplo, la variable nombreAuto conservará su valor a pesar de redeclarla sin un nuevo valor:

var nombreAuto = "Volvo";
var nombreAuto;

Aritmética JavaScript

Al igual que en algebra, en JavaScript se puede hacer aritmética con las variables usando operadores como = y +:

var x = 5 + 2 + 3;
// el resultado es 10

También se pueden concatenar cadenas de texto:

var x = "Juan" + " " + "Pérez";
// el resultado es "Juan Pérez"

Si un número es puesto entre comillas, el resto de los números serán tratados como cadenas y entonces se concatenarán:

var x = "5" + 2 + 3;
// el resultado es "523"

Se debe tener cuidado con este comportamiento, dado que el concatenamiento con el operador + solo aplica despues de encontrar una cadena de texto:

var x = 5 + 2 + "3";
// el resultado es "73"

El signo $

Recordemos que los identificadores deben iniciar con:

  • Una letra (A-Z o a-z)
  • Un caracter $ (signo de moneda)
  • Un caracter _ (guión bajo)

Dado que JavaScript trata el signo $ como un caracter, los nombres de identificadores con este caracter son válidos:

Ejemplos:

var $$$ = "Hola mundo";
var $ = 2;
var $moneda = 5

El uso del signo $ no es común en JavaScript, pero programadores profesionales a menudo lo usan como un alias para la función principal en una  libreria JavaScript.

En la libreria de JavaScript JQuery, por ejemplo, la función principal $ es usuada para seleccionar elementos HTML. En JQuery $("p") significa "seleccionar todos los elementos p".

El signo _

Dado que JavaScript trata el signo _ como un caracter, los nobres de identificadores con este caracter son válidos:

var _apellido = "Pérez";
var _x = 2;
var _100 = 5;

El uso del signo _ no es muy común en JavaScript, pero una convención entre programadores profesionales es usarlo como un alias para las variables privadas (ocultas).