Escopo

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar sobre escopo.

Escopo

Quando falamos de escopo, estamos falando da área em que determinado dado está disponível para utilizarmos ele.

Quando uma variável é criada fora de um bloco de código, esta variável possui o escopo global, o que significa dizer, que o seu valor pode ser acessado e reatribuído de qualquer lugar do seu código.

Abaixo irei criar um variável name, e irei acessa-la de dentro de um bloco de código e também de fora de um bloco de código.

let age = 35

if (true) {
  console.log(`Acessando de dentro bloco de código: ${age}`)
}

console.log(`Acessando de fora do bloco de código: ${age}`)

// Output
Acessando de dentro bloco de código: 35
Acessando de fora do bloco de código: 35

Como foi observado no exemplo acima, a variável age, foi acessada tanto dentro de bloco de código, quanto fora, justamente por ela ser uma variável de escopo global.

Agora se criarmos a variável dentro de um determinado bloco de código, seu valor poderá ser acessado ou reatribuído apenas dentro daquele bloco.

if (true) {
  let team = 'Botafogo'
  console.log(`Acessando a variável team de dentro do bloco: ${team}`)
}

console.log(`Acessando a variável team de fora do bloco: ${team}`)

// Output
Acessando a variável team de dentro do bloco: Botafogo
Uncaught ReferenceError: team is not defined

No exemplo acima, fica claro que o console.log dentro do bloco de código teve acesso a variável team, já o console.log que está fora do bloco, não teve acesso a variável.

Variáveis com o mesmo nome em escopos diferentes

Podemos ter variáveis criadas com o mesmo nome, mas estas devem estar em escopos diferentes, confira o exemplo abaixo:

let myFavoriteFilm = 'Os Goonies'

if (true) {
  let myFavoriteFilm = 'Os Batutinhas'

  console.log(`Meu filme favorito é: ${myFavoriteFilm}`)
}

console.log(`Meu filme favorito é: ${myFavoriteFilm}`)

// Output
Meu filme favorito é: Os Batutinhas
Meu filme favorito é: Os Goonies

No exemplo acima, notamos que temos duas variáveis com o mesmo nome myFavoriteFilm, isso só é possível pois as declarações foram feitas em escopo diferentes, a primeira foi feita no escopo global e a segunda foi declarada dentro do bloco de código do if, fazendo com que ela tivesse o escopo de bloco ou escopo local.

Escopo de blocos aninhados

let myPet = 'Dog'

if (true) {
 let myPet = 'Cat'

 if (true) {
  console.log(myPet)
 }
}

// Output
Cat

No código acima, observamos que o segundo bloco de código teve acesso a variável que está dentro do primeiro bloco de código, isso ocorre por esta declaração estar mais próxima do segundo bloco de código.

Confira abaixo, caso não existisse a declaração da variável dentro do primeiro bloco:

let myPet = 'Dog'

if (true) { 
 if (true) {
  console.log(myPet)
 }
}

// Output
Dog

Conforme pode ser visto, o console.log foi atribuído a variável myPet que possui o escopo global.

Espero que tenham entendido um pouco sobre a diferença de escopos, mas segue a documentação da MDN sobre escopo para mais detalhes.

---

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter