Aplicação do Ambiente Léxico de Funções em JavaScript

Suponha que temos uma função que retorna outra função como resultado:

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

Se a função pai tem alguma variável, essas variáveis estarão contidas no ambiente léxico da função retornada:

javascriptfunction test() {
  let num = 1; // variável da função pai
  
  return function() {
    // ambiente léxico = {num: 1}
  }
}

Vamos escrever em nosso código da função retornada um console.log, que exibe o valor da variável num:

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

Agora vamos chamar a função pai test e registrar o resultado dela na variável func:

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

let func = test();

A função retornada será registrada na variável func. Vamos chamar nossa função - seu resultado será exibir o conteúdo da variável num:

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

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

Se tentarmos simplesmente exibir a variável num fora da função - ela estará inacessível:

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

console.log(num); // variável num aqui está inacessível

Como você pode ver, a variável local num vinculou-se ao ambiente léxico da nossa função e agora, chamando essa função em qualquer lugar do código, poderemos obter o valor da variável num, mesmo que no local da chamada essa variável por si só seja inacessível.

Na verdade, um resultado semelhante pode ser alcançado tornando a variável num global:

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

let num = 1; // variável global
let func = test();
func(); // exibirá 1

No entanto, haverá uma diferença substancial aqui: na nova versão, a variável num pode ser alterada fora das funções (por ser global), enquanto na versão antiga - não.

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());