Entenda escopos no Javascript

É o contexto atual de execução, em que valores e expressões são “visíveis” ou podem ser referenciadas. Se uma variável ou outra expressão não estiver “no escopo atual”, então não está disponível para uso. Os escopos também podem ser em camadas em uma hierarquia, de modo que os escopos filhos tenham acesso aos escopos pais, mas não vice-versa.

Significa como as variáveis podem ser utilizadas quando são criadas e atribuídas ao valor e em que medida são definidas e indefinidas.

Mas vamos entender de forma prática a funcionalidade de um escopo, vem comigo!

Construtor var e let

O var e let são usados para declarar variáveis em javascript e cada um deles tem sua propria limitação de escopo, veja como:

var primeiroNome = "Roberto";

function imprime(){
  var primeiroNome = "Joel";
};

imprime();
console.log(primeiroNome);
// vai retornar Roberto da variavel primeiroNome

Exemplo bastante simples, mas vamos verificar um outro exemplo.

var primeiroNome = "Roberto";

{
  var primeiroNome = "Joel";
};

console.log(primeiroNome);
// vai retornar Joel da variavel primeiroNome

Essa questão se torna um pouco mais complexa, porque retornou ‘Joel’ ao invés de ‘Roberto’? Vamos entender o porque.

Porque?

Vamos entender, quando um construtor de variável var é declarado dentro de um escopo de função (function), ele ficará disponível apenas dentro daquela função.

É por isso que dentro da função imprime o ‘primeiroNome’ esta no escopo local apenas e só pode ser impresso dentro da função isso é chamado de escopo funcional.

Agora vamos entender o escopo com o construtor de variável let.

let primeiroNome = "Roberto";

function imprime(){
  let primeiroNome = "Joel";
}

imprime();
console.log(primeiroNome);

Nesta instrução o console vai mostrar o nome de Roberto, mas antes de deduzir o motivo vou mostrar mais um exemplo com o construtor de variável let.

let primeiroNome = "Roberto";

{
  let primeiroNome = "Joel";
}

console.log(primeiroNome);

Pergunta, quan resultado teremos no console com essa instrução acima?

Resposta: ‘Roberto’.

Agora vamos entender porque o Roberto esta sendo impresso novamente no console ao inves de Joel.

Porque?

É muito simples, qualquer variável declarada usando o construtor let é usada e acessada dentro das chaves ou dentro do objeto em que foi declarada. É por isso que obtemos Roberto impresso no console e com isso essa propriedade é chamada de escopo de bloco.

Conclusão

Com a finalidade em ajudar seu aprendizado, vou deixar aqui uma pergunta no formato de código, leia o código, entenda e coloque a resposta nos comentários.

x = 23
var x;

// qual será o valor de x aqui?

y = 55;
let y;

// qual será o valor de y aqui?

Por tanto pense na resposta e diga sua possível solução. Espero que este artigo te seja muito útil.