Este tópico foi abordado muitas vezes, no entanto, gostaria de falar sobre o que é escopo (usando JavaScript) da perspectiva do problema que pretende resolver.

Que problema o escopo realmente resolve?

À medida que os aplicativos aumentam em tamanho, eles também aumentam em complexidade - o escopo é uma ferramenta para gerenciar essa complexidade.

Acoplamento vs. desacoplamento

Vamos fingir que temos uma variável global radius definida como 7 e uma função createSpecialButton() que retorna um botão “especial”:

let radius = 7;

function createSpecialButton(radius) {
  return Click Me!
}

const button = createSpecialButton(radius);

Esta função retorna um botão com um raio específico, que neste caso está definido como 7. No momento, não há problema com o código, pois sabemos como o raio está definido e, portanto, sabemos qual será o botão resultante. parece. Porém, o que acontece se adicionarmos mais duas funções que dependem da variável raio? Nosso código agora fica assim:

let radius = 7;

function createSpecialButton() {
  return Click Me!
}

function profileButton() {
  radius = 10;
  return Click Me!
}

function registrationButton() {
  radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Depois de fazer essa alteração, qual será o valor do raio ao chamar createSpecialButton()? Se você adivinhou 16, você acertou.

Apenas adicionando duas funções adicionais, aumentamos muito a complexidade do nosso código e agora vivemos em um mundo no qual vários trechos de código não relacionados dependem da mesma dependência. Agora, imagine que este fosse um aplicativo full-stack muito maior - rapidamente se tornaria difícil raciocinar sobre a origem de certas partes do estado e como corrigir bugs quando eles surgissem.

Para corrigir isso, podemos definir variáveis ​​de raio separadas para cada função:

function createSpecialButton() {
  const radius = 7;
  return Click Me!
}

function profileButton() {
  const radius = 10;
  return Click Me!
}

function registrationButton() {
  const radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Você pode olhar para essa mudança e dizer “bem, ok, mas agora há mais código - isso não parece certo”. Isso mesmo, há mais código, porém menos código não é melhor se resultar em código menos sustentável - a mudança que fizemos melhora a capacidade de manutenção do nosso código, e isso é sempre uma coisa boa.

Tipos de escopo em JavaScript

Escopo Global

O escopo global é acessível por tudo em todo o seu aplicativo. Se você estiver escrevendo um aplicativo Node.JS, provavelmente não trabalhará nem encontrará escopo global. No entanto, se você estiver trabalhando em um aplicativo da web, poderá colocar declarações no escopo global usando uma tag de script ou window.SOMETHING.

Por exemplo, usando a tag script, você pode fazer algo assim:

Além disso, o MDN expressa sua definição de “escopo global” como “O escopo padrão para todo o código executado no modo de script”. Eu acho que o exemplo acima é o que eles estão se referindo.

Ao usar o objeto global window, você pode fazer algo assim:

  window.username = "Garrett";

Escopo do Módulo

Se você estiver trabalhando em um projeto Node.JS, o escopo do módulo é o que você trabalhará no mais alto nível. Cada arquivo com extensão .js (ou .ts) é um módulo separado, o que significa que no máximo suas declarações serão acessíveis por tudo em um determinado arquivo, a menos que você as exporte explicitamente.

Por exemplo, em user.ts, ambas as funções podem acessar o nome da variável.

// user.ts

const name = "Garrett";

function greet() {
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

No entanto, nesta versão de user.ts, apenas accessName() pode acessar o nome da variável:

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Observe que em ambos os módulos, nada é exportado. Em outras palavras, o código em outros módulos não tem como saber sobre esse código e, portanto, não pode importá-lo e utilizá-lo. Podemos mudar isso:

// user.ts

export function greet(name: string) {
  console.log("Hello, ", name)
}

Agora, ambas as funções são exportadas, podendo assim ser utilizadas por outros módulos. Isso é tecnicamente diferente do conceito de escopo global de que falamos anteriormente, mas é semelhante porque disponibilizamos o código para todo o aplicativo por meio da importação de um módulo para outro.

Escopo da Função

Na verdade, já vimos o escopo da função. Confira o código abaixo (é o mesmo código de um dos trechos acima):

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Tente executar isto - greetAgain() ocorrerá um erro porque a variável de nome que ele está tentando ler só existe dentro do contexto (ou seja, “escopo”) de greet().

Observação: você pode ver isso sendo chamado de “escopo local”.

Escopo do bloco

O escopo do bloco é interessante porque só funciona com tipos de variáveis ​​mais recentes - especificamente, let e const, não var. Vamos dar uma olhada.

{
  let firstName = "Garrett";
  const lastName = "Love";
  var fullName = "Garrett Love";
  // firstName and lastName CAN be accessed here
  // fullName CAN be accessed here
}

// firstName and lastName CANNOT be accessed here
// fullName CAN STILL be accessed here

No exemplo acima, podemos ver que 1) Colocar o código dentro de um {} cria um bloco de código. 2) As variáveis ​​definidas usando let e const só podem ser acessadas dentro desse bloco de código. 3) A variável criada com var não segue as regras de escopo do bloco, pois ainda pode ser acessada fora do {}.

Nota: JavaScript moderno usa let e const para declarações de variáveis ​​e não de var.

As declarações devem ser feitas dentro do menor escopo necessário

Para encerrar, lembre-se de que o escopo é uma ferramenta para gerenciar a complexidade do nosso código, e quanto mais alto no nível do escopo você colocar as declarações, mais complexidade haverá no seu código, então é melhor buscar declarações para ser colocado no menor escopo necessário.