Entendiendo el ámbito de las variables en JavaScript

En JavaScript, hay dos tipos de ámbitos que tienen las variables dependiendo donde se declaren como lo explicamos en el artículo anterior.

1. Ámbito global: ámbito general, se tiene acceso a la función en toda la página web.
2. Ámbito local – Se tiene acceso a la variable solo dentro de la función en la cual se declaro.
3. Ámbito de bloque (comenzado desde la ES6)

Ejemplos del ámbito de variables en JavaScript

Veamos el código de abajo. Tenemos una variable global definida en la primera línea esto significa que es de ámbito global. Luego tenemos una variable local definida dentro de la función fun () la cual es de ámbito local.

var variableGlobal ="Esta es una variable GLOBAL";

function fun(){
  var variableLocal="Esta es una variable LOCAL"
  console.log(variableGlobal);
  console.log(variableLocal);
}

fun();

Cuando ejecutamos la función fun(), la salida muestra que tanto las variables globales como las locales son accesibles dentro de la función fun(), ya que somos capaces de consultarlas. Esto muestra que dentro de la función tenemos acceso tanto a las variables globales (declaradas fuera de la función) como a las variables locales (declaradas dentro de la función). Vamos a mover las declaraciones de console.log fuera de la función y colocarlas justo después de llamar a la función.

var variableGlobal ="Esta es una variable GLOBAL";
function fun(){
  var variableLocal="Esta es una variable LOCAL"
}

fun();
  console.log(variableGlobal);
  console.log(variableLocal);

Todavía tenemos acceso al valor de la variable global, pero para la variable local console.log produce un error. Esto se debe a que ahora las sentencias console.log están presentes en el ámbito global, donde tienen acceso a las variables globales pero no pueden acceder a las variables locales.

Variable global JavaScript

Advertencia: siempre que declare variables, use siempre el prefijo var la cual es una palabra reservada de JavaScript. Si no utiliza la palabra clave var, las variables se crean de forma predeterminada en el ámbito global. Por ejemplo, en el ejemplo anterior, simplemente eliminemos la palabra clave var antes de la declaración de variableLocal.

var variableGlobal ="Esta es una variable GLOBAL";

function fun(){
  variableLocal="Esta es una variable LOCAL"
}

fun();

  console.log(variableGlobal);
  console.log(variableLocal);

Ahora también tendremos acceso al valor de variableLocal en consola.log porque variableLocal se creó en el ámbito global ya que le quitamos la palabra clave var mientras la declaramos. Lo que realmente sucedió es que, como no usamos la palabra clave var, JavaScript primero buscó variableLocal en el ámbito local, luego en el ámbito global. Como no existía una variable global con ese nombre, se creó una nueva variable global. Una de las preguntas más frecuentes en las entrevistas de trabajo es el escenario en el que tanto la variable global como la local tienen el mismo nombre. A ver qué pasa entonces.

var variable1 ="Aprendiendo a programar JavaScript 1";
function fun(){
  var variable1="Aprendiendo a programar JavaScript 2"
}

fun();
  console.log(variable1);

En este ejemplo, tenemos la variable "variable1" local y global. Lo que importa aquí es el alcance en el que estamos accediendo. En el ejemplo anterior, estamos accediendo a él en el ámbito global, por lo que generará la variable global ya que la variable local no está presente en su alcance. Movamos la sentencia console.log dentro de la función fun ().

var variable1 ="Aprendiendo a programar JavaScript 1";
function fun(){
  var variable1="Aprendiendo a programar JavaScript 2"
  console.log(variable1);
}

fun();

Dentro de la función fun() de JavaScript, se puede acceder tanto a las variables locales como a las globales. Pero JavaScript en primer lugar siempre intenta encontrar una variable local con el nombre de la variable utilizada. Si encuentra la variable local la imprime. De lo contrario, tendría que buscar la variable "variable1" en el ámbito global

¿Qué pasa si queremos acceder a la variable global en lugar de una local aquí?. Bueno, el objeto de window viene a nuestro rescate. Todas las variables globales se adjuntan al objeto de la window y, por lo tanto, podemos acceder al nombre de la variable global como se muestra en el siguiente ejemplo.

var variable1 ="Aprendiendo a programar JavaScript 1";
function fun(){
  var variable1="Aprendiendo a programar JavaScript 2"
  console.log(window.variable1);
}

fun();

Después de analizar acerca de los ámbitos en JavaScript, adivinar la salida de los siguientes ejemplos de código debería ser una tarea fácil.

function fun(){
  function fun2(){
    var i=100;
  }
  fun2();
  console.log(i);
}

fun();

En el primer ejemplo, como no usamos la palabra clave var, se asumió que la variable "i" estaba declarada en el alcance global y, por lo tanto, el resultado fue 100. En el segundo ejemplo, "i" se convirtió en una variable local y, por lo tanto, no fue Accesible fuera del ámbito de esa función y nos genero un error.

Veamos otro ejemplo.

function fun(){
  if(true){
    var i=100;
  }
  console.log(i);
}

fun();

Bueno, la salida debería haber mandado un error de referencia, ¿verdad? ¡Incorrecto! El bloque if no crea un nuevo ambito en JavaScript. Sólo una nueva función crea un nuevo ámbito. Recuerda siempre, JavaScript tiene un alcance de función y no un ámbito de bloqueo. Así que en el ejemplo anterior, todo el código dentro de la función fun () está en el mismo ámbito y, por lo tanto, la salida es 100.

Después de comprender el concepto de ámbitos en JavaScript, veamos un ejemplo práctico de estos conceptos.

var persona = function(){
  var nombre ="EstradaWebGroup";
  return{
    getNombre:function(){
      return nombre;
    },
    setNombre: function(nuevoNombre){
      nombre=nuevoNombre;
    }
  }
}();

console.log(persona.nombre)
console.log(persona.getNombre())
persona.setNombre("Aprende JavaScript")
console.log(persona.getNombre())

En el código anterior, declare una variable "nombre" que actúa como una variable de ambito local ya que no se puede acceder directamente fuera del alcance de la función persona(). Pero la variable "nombre" es accesible por las funciones dentro del alcance de la función persona(). Esto nos permite crear la función getNombre y setNombre para acceder a las variables, implementando así el concepto de clases de ocultación de datos en Programación Orientada a Objetos.