Aplicación del entorno léxico de funciones en JavaScript

Supongamos que tenemos una función que devuelve otra función como resultado:

javascriptfunction test() {
  return function() {
    
  }
}

Si la función padre tiene alguna variable, estas variables estarán contenidas en el entorno léxico de la función devuelta:

javascriptfunction test() {
  let num = 1; // variable de la función padre
  
  return function() {
    // entorno léxico = {num: 1}
  }
}

Escribamos en el código de nuestra función devuelta console.log, que muestra el valor de la variable num:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

Ahora llamemos a la función padre test y escribamos el resultado de su ejecución en la variable func:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();

En la variable func se escribirá la función devuelta. Llamemos a nuestra función - como resultado, mostrará el contenido de la variable num:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();
func(); // mostrará 1

Si simplemente intentamos mostrar la variable num fuera de la función - no estará disponible:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

console.log(num); // la variable num no está disponible aquí

Como puede ver, la variable local num se vinculó al entorno léxico de nuestra función y ahora, llamando a esta función en cualquier lugar del código, podemos obtener el valor de la variable num, incluso si en el lugar de la llamada esta variable por sí sola no está disponible.

En realidad, se puede lograr un resultado similar haciendo que la variable num sea global:

javascriptfunction test() {
  return function() {
    console.log(num);
  }
}

let num = 1; // variable global
let func = test();
func(); // mostrará 1

Sin embargo, aquí habrá una diferencia sustancial: en la nueva versión, la variable num se puede cambiar fuera de las funciones (ya que es global), mientras que en la anterior, no.

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

let func = test();
console.log(func());

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

console.log(test()());

javascriptfunction test() {
  let num1 = 1;
  
  return function() {
    return num1 + num2;
  }
}

let num2 = 2;
let func = test();
console.log(func());

javascriptfunction test() {
  let num = 1;
  
  return function() {
    return num;
  }
}

let num = 2;
let func = test();
console.log(func());