{ . . . }

Las Variables en JavaScript

Sin Comentarios

JavaScript nos permite dar nombres a los valores usando variables, una variable es solo un marcador de posición para un valor y en ella podemos guardar cualquier tipo de dato admitido en JavaScript. Podemos pensar en una variable como una caja en la que podemos almacenar una sola cosa, si ponemos algo más en ella, lo primero desaparecerá para dar paso a este nuevo objeto.
 

Declarar Variables Usando var

Para declarar una variable usamos la palabra clave var seguida del nombre de la variable:

var usuario;
Un nombre de una variable puede ser cualquier identificador válido para JavaScript. En el caso anterior hemos declarado una variable de nombre usuario y hasta el momento tiene un valor no definido (undefined)

Después de declarar una variable le podemos asignar un valor:

usuario = "invitado";

También podemos declarar una variable e inicializarla al mismo tiempo:

// var nombreVariable = valor;
var usuario = "Juan";

Otra cosa que podemos hacer es declarar varias variables usando una misma instrucción, para esto cada declaración de variable deberá de estar separada por una coma(,) y terminar la declaración con punto y coma(;) :

var usuario = "Juan",
    edad = 20;
// Incluso las podemos dejar en una sola línea:
var usuario = "Juan", edad = 20;

Variables Indefinidas / Variables No Declaradas

Es importante distinguir entre las variables indefinidas y las no declaradas. Una variable indefinida es una variable que ha sido declarada, pero no tiene un valor asignado, por tanto esta utiliza como valor inicial undefined. Por el contrario, una variable no declarada es la que no se ha declarado en el alcance accesible. Veamos el siguiente ejemplo:

var usuario;
 
console.log(usuario); // undefined
console.log(nombre); // ReferenceError: bar is not defined
  1. En el primer console.log la variable usuario se declaró pero no se inicializó, por lo tanto su valor no está definido (undefined).
  2. En el segundo console.log se hace una referencia una variable nombre que no ha sido declarada, por lo que acceder a ella provoca un (ReferenceError).

Variables globales / Variables locales

En JavaScript, todas las variables existen dentro de un alcance o ámbito (scope) que determina la duración de estas y también qué parte del código puede acceder a ellas.

JavaScript principalmente maneja ámbitos globales y funcionales ( En ES6 se introdujo un nuevo alcance llamado block scope” o alcance de bloque ).. Si declaramos una variable en una función, JavaScript agrega la variable al alcance de dicha función. En caso de que se declare fuera de una función, esta será agregada al alcance global del script. Veamos un ejemplo:

function saludar() {
  var mensaje = "Hola mundo!";
  console.log(mensaje);
}
saludar();
// "Hola mundo!"

En el ejemplo anterior definimos una función llamada saludar dentro de esta definimos una variable llamada mensaje, esta variable es considerada una variable local, es decir, solo existe dentro de la función saludar. Si intentamos acceder fuera de la función obtendremos un ReferenceError.

function saludar() {
  var mensaje = "Hola mundo!";
}
console.log(mensaje); // ReferenceError: mensaje is not defined

Cosa que no pasaría al ser declaradas fueras de los bloques o funciones. Veamos el siguiente ejemplo:

var mensaje = "Hola mundo Global!";

function saludar() {
  var mensaje = "Hola mundo Local!";
  console.log(mensaje);
}
saludar(); // "Hola mundo Local!"
console.log(mensaje); // "Hola mundo Global!"

En el ejemplo anterior tenemos dos variables que comparten el mismo nombre "mensaje", una global y la otra local. En este ejemplo podemos notar como la variable global no puede ser acceder dentro de la función, porque al llamar la función esta da prioridad a su variable local. Pero al no haber una variable local dentro de la función, la variable global no tendría problemas en acceder a esta.

También podemos acceder a una variable global dentro de una función de la siguiente forma:

var mensaje = "Hola mundo Global!";

function saludar() {
  mensaje = "Hola mundo Local!";
  console.log(mensaje);
}
saludar(); // "Hola mundo Local!"
console.log(mensaje); // "Hola mundo Local!"

En el ejemplo tenemos la variable mensaje en el ámbito global, luego dentro de la función hacemos referencia a esta omitiendo la palabra reservada var y cambiamos su valor. De esta forma hacemos referencia a una variable global dentro de una función, aunque esto no es para nada recomendable, debido a que las variables globales son muy difíciles de mantener y pueden causar muchas confusiones.

Elevación de variables (hoisting)

La elevación (Hoisting) es el mecanismo en el cual el motor interprete de JavaScript mueve todas las declaraciones de variables al principio del ámbito al que esta pertenece, ya sea de una función o de alcance global.

Si declara una variable con la palabra reservada var, la variable se alza al principio de su ámbito, como resultado si se accede a la variable antes de declararla, la variable se evalúa como undefined. Veamos un ejemplo:

console.log(mensaje); // undefined
var mensaje;

Lo que hace el interprete de JavaScript es mover la declaración de la variable a la parte superior, por lo que es equivalente a lo siguiente:

var mensaje;
console.log(mensaje); // undefined

En otro lenguaje de programación esto podría dar un ReferenceError porque técnicamente estamos haciendo referencia a una variable que no estaba definida. Veamos otro ejemplo:

console.log(mensaje);
var mensaje = "Hola mundo Global!";

El interprete mueve solo la declaración de las variables a la cima, sin embargo la asignación inicial de la variable permanecer intacta, el valor será asignado cuando la sentencia de asignación sea alcanzada. Como resultado, el código anterior es equivalente a lo siguiente:

var mensaje;
console.log(mensaje); // undefined
mensaje = "Hola mundo Global!";
Es una buena practica declarar las variables al inicio de su ámbito, definimos estructuralmente el alcance de estas y evitamos los errores al no comprender bien esta particularidad de JavaScript.

Comentar

avatar