Entendendo o Escopo de Variáveis em JavaScript: Global, Local e de Bloco

O escopo de uma variável em JavaScript determina onde essa variável é acessível dentro do código. Compreender o escopo é essencial para escrever um código limpo, seguro e funcional, e para isso vamos explorar os diferentes tipos de escopo de variáveis em JavaScript: escopo global, escopo local e escopo de bloco.

Escopo Global:

As variáveis globais são declaradas fora de qualquer função e estão disponíveis em todo o código, dentro de qualquer função ou bloco. Elas podem ser acessadas e modificadas de qualquer lugar do código. No entanto, o uso excessivo de variáveis globais pode levar a problemas de legibilidade, manutenção e possíveis conflitos de nomes.

var globalVar = "Variável global (var)";
let globalLet = "Variável global (let)"; 
const globalConst = "Variável global (const)"; 

Escopo Local:

As variáveis locais são declaradas dentro de uma função e só são acessíveis dentro dessa função, ou seja, são visíveis apenas dentro do bloco em que foram declaradas. Elas são criadas quando a função é chamada e são destruídas quando a função é concluída. Variáveis locais têm prioridade sobre variáveis globais com o mesmo nome dentro da função onde são declaradas.

//variáveis globais
var globalVar = "Variável global (var)";
let globalLet = "Variável global (let)"; 
const globalConst = "Variável global (const)"; 

//dentro de funções temos variáveis locais
function exemploEscopo() {
var localVar = "Variável local (var)";
let localLet = "Variável local (let)";
}

Escopo de Bloco:

O escopo de bloco foi introduzido com o ES6 (ECMAScript 2015) e está associado às variáveis declaradas com let e const possuindo então escopo restrito ao bloco em que foram declaradas. Um bloco é delimitado por chaves {} e pode ser uma estrutura condicional (if, else, switch), um loop (for, while, do-while) ou até mesmo um bloco independente.

//variáveis globais
var globalVar = "Variável global (var)";
let globalLet = "Variável global (let)"; 
const globalConst = "Variável global (const)"; 

//dentro de funções temos variáveis locais
function exemploEscopo() {
var localVar = "Variável local (var)";
let localLet = "Variável local (let)";

//dentro da função agora temos tambem variáveis de bloco
{
  let varBlock = "Variável de bloco (let)";
  const constBlock = "Variável de bloco (const)";
 }
}

Espero que este conteúdo tenha ajudado em seus estudos!