Variables y constantes

En javascript es muy sencillo declarar y utilizar variables, pero aunque sea un procedimiento simple, hay que tener una serie de conceptos previos muy claros antes de continuar para evitar futuras confusiones, sobre todo si estamos acostumbrados a otros lenguajes más tradicionales.

Variables

En programación, las variables son espacios donde se puede guardar información y asociarla a un determinado nombre. De esta forma, cada vez que se consulte ese nombre posteriormente, te devolverá la información que contiene. La primera vez que se realiza este paso se suele llamar inicializar una variable.

En Javascript, si una variable no está inicializada, contendrá un valor especial: undefined, que significa que su valor no está definido aún, o lo que es lo mismo, que no contiene información:

var a;              // Declaramos una variable "a", pero no le asociamos ningún contenido.
var b = 0;          // Declaramos una variable de nombre "b", y le asociamos el número 0.

console.log(b);     // Muestra 0 (el valor guardado en la variable "b")
console.log(a);     // Muestra "undefined" (no hay valor guardado en la variable "a")

Como se puede observar, hemos utilizado console.log() para consultar la información que contienen las variables indicadas.

OJO: Las mayúsculas y minúsculas en los nombres de las variables de Javascript importan. No es lo mismo una variable llamada precio que una variable llamada Precio, pueden contener valores diferentes.

Si tenemos que declarar muchas variables consecutivas, una buena práctica suele ser escribir sólo el primer var y separar por comas las diferentes variables con sus respectivos contenidos (método 3). Aunque se podría escribir todo en una misma línea (método 2), con el último método el código es mucho más fácil de leer:

// Método 1: Declaración de variables de forma independiente
var a = 3;
var c = 1;
var d = 2;

// Método 2: Declaración masiva de variables con el mismo var
var a = 3, c = 1, d = 2;

// Método 3: Igual al anterior, pero mejorando la legibilidad del código
var a = 3,
    c = 1,
    d = 2;

Como su propio nombre indica, una variable puede variar su contenido, ya que aunque contenga una cierta información, se puede volver a cambiar. A esta acción ya no se le llama inicializar una variable, sino declarar una variable (o más concretamente, redeclarar). En el código se puede diferenciar porque se omite el var:

var a = 40;   // Inicializamos la variable "a" al valor 40.
a = 50;       // Ahora, hemos declarado que pasa a contener 50 en lugar de 40.

Ámbitos de variables: var

Cuando inicializamos una variable al principio de nuestro programa y le asignamos un valor, ese valor generalmente está disponible a lo largo de todo el programa. Sin embargo, esto puede variar dependiendo de múltiples factores. Se conoce como ámbito de una variable a la zona donde esa variable sigue existiendo.

Por ejemplo, si consultamos el valor de una variable antes de inicializarla, no existe:

console.log(e);     // Muestra "undefined", en este punto la variable "e" no existe
var e = 40;
console.log(e);     // Aquí muestra 40, existe porque ya se ha inicializado anteriormente

En el ejemplo anterior, el ámbito de la variable e comienza a partir de su inicialización y "vive" hasta el final del programa. A esto se le llama ámbito global y es el ejemplo más sencillo. Más adelante veremos que se va complicando y a veces no resulta tan obvio saber en que ámbito se encuentra.

En el enfoque tradicional de Javascript, es decir, cuando se utiliza la palabra clave var para declarar variables, existen dos ámbitos principales: ámbito global y ámbito a nivel de función.

Observemos el siguiente ejemplo:

var a = 1;
console.log(a);             // Aquí accedemos a la "a" global, que vale 1

function x() {
  console.log(a);           // En esta línea el valor de "a" es undefined
  var a = 5;                // Aquí creamos una variable "a" a nivel de función

  console.log(a);           // Aquí el valor de "a" es 5 (a nivel de función)
  console.log(window.a);    // Aquí el valor de "a" es 1 (ámbito global)
}

x();                        // Aquí se ejecuta el código de la función x()
console.log(a);             // En esta línea el valor de "a" es 1

En el ejemplo anterior vemos que el valor de a dentro de una función no es el 1 inicial, sino que estamos en otro ámbito diferente donde la variable a anterior no existe: un ámbito a nivel de función. Mientras estemos dentro de una función, las variables inicializadas en ella estarán en el ámbito de la propia función.

OJO: Podemos utilizar el objeto especial window para acceder directamente al ámbito global independientemente de donde nos encontremos. Esto ocurre así porque las variables globales se almacenan dentro del objeto window (la pestaña actual del navegador web).

var a = 1;
console.log(a); // Aquí accedemos a la "a" global, que vale 1

function x() {
  console.log(a);            // En esta línea el valor de "a" es 1
  a = 5;                     // Aquí creamos una variable "a" en el ámbito anterior

  console.log(a);            // Aquí el valor de "a" es 5 (a nivel de función)
  console.log(window.a);     // Aquí el valor de "a" es 5 (ámbito global)
}

x(); // Aquí se ejecuta el código de la función x()
console.log(a); // En esta línea el valor de "a" es 5

En este ejemplo se omite el var dentro de la función, y vemos que en lugar de crear una variable en el ámbito de la función, se modifica el valor de la variable a a nivel global. Dependiendo de donde y como accedamos a la variable a, obtendremos un valor u otro.

Siempre que sea posible se debería utilizar let y const (ver a continuación), en lugar de var. Declarar variables mediante var se recomienda en fases de aprendizaje o en el caso de que se quiera mantener compatibilidad con navegadores muy antiguos utilizando ECMAScript 5, sin embargo, hay estrategias mejores a seguir que utilizar var en la actualidad.

Ámbitos de variables: let

En las versiones modernas de Javascript (ES6 o ECMAScript 2015) o posteriores, se introduce la palabra clave let en sustitución de var. Con ella, en lugar de utilizar los ámbitos globales y a nivel de función (var), utilizamos los ámbitos clásicos de programación: ámbito global y ámbito local.

La diferencia se puede ver claramente en el uso de un bucle for con var y con let:

// Opción 1: Bucle con let
console.log('Antes: ', p);          // Antes: undefined
for (let p = 0; p < 3; p++)         // - 0
    console.log('- ', p);           // - 1
                                    // - 2
console.log('Después: ', p);        // Después: undefined

// Opción 2: Bucle con var
console.log('Antes: ', p);          // Antes: undefined
for (var p = 0; p < 3; p++)         // - 0
    console.log('- ', p);           // - 1
                                    // - 2
console.log('Después: ', p);        // Después: 3 (WTF!)

Vemos que utilizando let la variable p sólo existe dentro del bucle, ámbito local, mientras que utilizando var la variable p sigue existiendo fuera del bucle, ya que debe tener un ámbito global o a nivel de función.

Constantes

De forma tradicional, Javascript no incorporaba constantes. Sin embargo, en ECMAScript 2015 (ES6) se añade la palabra clave const, que inicializada con un valor concreto, permite crear variables con valores que no pueden ser cambiados.

const NAME = 'Manz';
console.log(NAME);

En el ejemplo anterior vemos un ejemplo de const, que funciona de forma parecida a let. Una buena práctica es escribir el nombre de la constante en mayúsculas, para identificar rápidamente que se trata de una constante y no una variable, cuando leemos código ajeno.

Realmente, las constantes de Javascript son variables inicializadas a un valor específico y que no pueden redeclararse. No confundir con valores inmutables, ya que como veremos posteriormente, los objetos si pueden ser modificados aún siendo constantes.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.