Escopo
Published: 2021-03-23 22:31:26

Chegamos a mais um post da minha [saga de estudos](https://dev.to/inando85/bem-vindo-de-novo-javascript-1b48) 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.

```js
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.

```js
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:

```js
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

```js
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:

```js
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](https://developer.mozilla.org/en-US/docs/Glossary/Scope) 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](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)