Ámbito de las variables en JavaScript

El ámbito de las variables es uno de los conceptos más importantes que comprender cuando escribimos código en JavaScript y en cualquier lenguaje de programación.

El ámbito de una variable significa e lugar del alcance que se tiene a la variable desde donde se declara y se puede accesar a ella en el código en JavaScript.

Como JavaScript se define dentro de una página web, las variables que se declaran estarán accesibles dentro de la página y no podemos acceder a variables que se hayan declarado en otras páginas.

Diferencias entre Variables Globales y Locales

Variables Globales

Las variables globales son las que tienen el ámbito mas amplio posible, que en JavaScript es la página web en donde se declaran.

Estas variables globales son accesibles desde cualquier lugar de la página, es decir, desde los scripts donde se han declarado y los demás scripts de la página, incluidos los manejadores de eventos como onclick del HTML y los scripts enlazados desde archivos .js externos.

Variables Locales

Las variables locales son las que se declaran en lugares más acotados, en concreto, acotados por llaves {} de cualquier estructura, y por ende, solo son accesibles dentro de los límites de estas estructuras acotadas por las llaves.

function miFuncion(){
  var miVariableLocal = 3;
}

En el script anterior se ha declarado una variable dentro de una función. por tanto, es variable solo será accesible dentro de esta función. Ahí se puede apreciar como se utilizan las llaves {} para acotar el bloque de la función, que es el ámbito de la variables declarada ahí.

No hay ningún problema con declarar una variable local con el mismo identificador de una variable global, en este caso, la variable global no será accesible dentro de este ámbito pero seguirá siendo accesible en resto de los scripts de la página.

var numero = 2
function miFuncion (){
  var numero = 19
  document.write(numero) //imprime 19
}
document.write(numero) //imprime 2

Sintaxis para la declaración de Variables

Existen dos sintaxis para declarar variables en JavaScript, una simplificada y otra en la que se antepone el tipo de variable que será:

• Simplificada: omitiendo el Tipo de Variable.
• Con el Tipo de Variable: anteponiendo el Tipo de Variable que es.

Dependiendo de como declaramos la variable; implicara el ámbito y/o restricciones que tendrá la variable en el código JavaScript.

Nota: En este artículo nos concentraremos únicamente en el ámbito de las variables, puesto que las restricciones son temas aparte para cada tipo de variable.

Declaración de variables Simplificada

En una declaración Simplificada estableceremos el identificador seguido del operador de asignación y el valor a almacenar.

x = 4;

Esta declaración implicara que la variable x tiene un ámbito global, es decir, será accesible a desde cualquier parte en el código de JavaScript. Independientemente si esta declarada en raíz o dentro de un bloque.

x = 4; // Aquí x vale 4
{
  x = x + 1; // Ahora x vale 5
}
x = x + 2; // Ahora x vale 7

• En el código se declara la variable x con un valor de 4
• dentro del bloque la variable x le reasignamos su propio valor más 1 y ahora x vale 5.
• saliendo del bloque la variable x conserva el valor porque es global.
• de nuevo la variable x le reasignamos su propio valor más 2 y ahora x vale 7.

Declaración de variables con el Tipo de Variable

La otra forma es de igual manera que la anterior pero anteponiendo el tipo de variable que es. Los tipos de variables son:

• var
• const
• let.

var x = 4;

Esta declaración en primera instancia implicaría que es una variable local, pero al estar declarada fuera de cualquier bloque implica que es global. Esto puede ser confuso para los principiantes en la programación JavaScript pero es importante estar consiente de este comportamiento.

var mivariableGlobal = 2;
{
  var miVariableLocal = 5;

  document.write( miVariableGlobal );
  document.write( miVariableLocal );
}
document.write( miVariableGlobal );
document.write( miVariableLocal ); // Error, esta variable no existe aquí