Aula 8: Relembrando Escopo e conhecendo Hoisting em JavaScript

Hello world !

Nesta aula, vamos revisar em detalhes o conceito de escopo e aprender um novo conceito muito importante em JavaScript: o hoisting. Vamos entender como cada um funciona na prática, com explicações passo a passo e exemplos detalhados. Chegamos à parte intermediária das nossas aulas! Agora, vamos começar a ver conceitos mais importantes. Então, bora codar!

Escopo em JavaScript

O escopo define onde uma variável é acessível no código. Quando declaramos uma variável, ela passa a existir dentro de um determinado escopo, o que determina onde e como ela pode ser usada.

Em JavaScript, temos quatro tipos principais de escopo:

1. Escopo Global
2. Escopo de Função
3. Escopo de Bloco
4. Escopo de Bloco Autônomo

Vamos analisar cada um desses tipos de escopo com exemplos detalhados.

1. Escopo Global

O escopo global se aplica a variáveis declaradas fora de qualquer função ou bloco. Essas variáveis podem ser acessadas e modificadas de qualquer lugar do código.

Exemplo:

Neste exemplo, a variável nome é declarada no escopo global e pode ser acessada tanto dentro da função saudacao() quanto fora dela.

2. Escopo de Função

Variáveis declaradas dentro de uma função só podem ser acessadas dentro dela. Esse comportamento garante que variáveis locais não interfiram em outras partes do código.

Exemplo:

Aqui, mensagem é uma variável local à função exemplo() e não pode ser acessada de fora dela.

3. Escopo de Bloco

Criado com { }, como dentro de if, for e while. Somente let e const respeitam o escopo de bloco.

Exemplo:

4. Escopo de Bloco Autônomo

Podemos criar blocos independentes para organizar o código sem precisar de if ou for.

Exemplo:

Esse escopo é útil para evitar que variáveis vazem para outras partes do código.

Hoisting

A palavra “hoisting” significa “elevação”. No JavaScript, significa que algumas declarações são movidas para o topo do escopo antes do código ser executado. Isso ocorre apenas com declarações de variáveis (var, let, const) e funções.

Por que o Hoisting Acontece?

O hoisting ocorre porque o JavaScript tem um processo chamado “fase de criação”, onde ele lê todas as declarações antes de executar o código. Durante essa fase, as declarações de variáveis e funções são registradas na memória antes do código ser realmente executado.

Isso significa que você pode usar uma variável antes de declará-la no código, mas seu comportamento varia dependendo de como foi declarada (var, let, const).

Importância do Hoisting

É essencial entender o hoisting para evitar erros inesperados no código. Muitas vezes, desenvolvedores iniciantes não percebem que suas variáveis podem estar sendo usadas antes de serem declaradas, o que pode gerar bugs difíceis de identificar.

Hoisting com var

Variáveis declaradas com var são elevadas, mas seu valor é undefined até a atribuição.

Exemplo:

O que acontece nos bastidores:

Isso acontece porque apenas a declaração da variável é movida para o topo, mas sua atribuição de valor continua na mesma posição.

Hoisting com let e const

Variáveis declaradas com let e const também são elevadas, mas não podem ser usadas antes da declaração. Elas entram em um estado chamado “Zona Temporal Morta” (TDZ – Temporal Dead Zone), onde não podem ser acessadas até que a execução atinja sua linha de declaração.

Exemplo com let:

Erro: ReferenceError: Cannot access 'idade' before initialization

Exemplo com const:

Erro: ReferenceError: Cannot access 'pais' before initialization

A diferença entre let e const é que const exige que um valor seja atribuído na declaração, enquanto let pode ser declarado sem valor inicial.

Diferenças Entre var, let e const no Hoisting

Cuidados com o Hoisting

1. Evite usar var, pois pode levar a comportamentos inesperados devido ao hoisting e ao escopo de função.
2. Sempre declare variáveis antes de usá-las, especialmente ao trabalhar com let e const.
3. Prefira const para valores que não mudarão e let para valores mutáveis, garantindo um código mais previsível.

Conclusão

• O escopo define onde a variável pode ser usada.
• var tem escopo de função, let e const têm escopo de bloco.
• O hoisting “eleva” declarações, mas o comportamento é diferente entre var, let e const.
• Saber sobre hoisting evita erros e torna seu código mais previsível.

Finalizando

Na próxima aula, daremos um passo adiante e exploraremos funções anônimas e arrow functions, conceitos fundamentais para escrever código mais moderno e conciso.

Continue praticando e testando os exemplos para consolidar o aprendizado, bora codar!

📂 Você pode acessar o código desta aula no GitHub:https: //github.com/guilherme-silvam/js-aulas-guilhermemachadodev/tree/main/aula-8-guilhermemachadodev