Hoisting do JavaScript
- Página Anterior Escopo JS
- Próxima Página Modo Estricto JS
O Hoisting é o comportamento padrão do JavaScript de mover declarações para o topo.
As declarações do JavaScript são promovidas
No JavaScript, pode-se declarar uma variável após usá-la.
Em outras palavras, pode-se usá-la antes da declaração da variável.
Exemplo 1 ComExemplo 2 Os resultados são idênticos:
Exemplo 1
x = 5; // Atribui 5 a x elem = document.getElementById("demo"); // Procura o elemento elem.innerHTML = x; // Mostra x no elemento var x; // Declara x
Exemplo 2
var x; // Declara x x = 5; // Atribui 5 a x elem = document.getElementById("demo"); // Procura o elemento elem.innerHTML = x; // Mostra x no elemento
Para entender isso, você deve entender o termo "hoisting".
O Hoisting é o comportamento padrão do JavaScript de promover todas as declarações ao topo do escopo atual (promovidas ao topo do script ou da função atual).
as palavras-chave let e const
usando let
ou const
As variáveis declaradas e os constantes não são promovidos!
Por favor, visite JS Let / Const Leia mais sobre let e const aqui.
A inicialização do JavaScript não é promovida
O JavaScript apenas promove declarações, não inicializações.
Exemplo 1 ComExemplo 2 Os resultados são diferentes:
Exemplo 1
var x = 5; // Inicializa x var y = 7; // Inicialização de y elem = document.getElementById("demo"); // Procura o elemento elem.innerHTML = x + " " + y; // Exibe x e y
Exemplo 2
var x = 5; // Inicializa x elem = document.getElementById("demo"); // Procura o elemento elem.innerHTML = x + " " + y; // Exibe x e y var y = 7; // Inicialização de y
O y no último exemplo ainda é indefinido, é correto?
Porque apenas a declaração (var y) e não a inicialização (=7) são promovidas ao topo.
Devido ao hoisting, y já foi declarada antes de ser usada, mas, devido ao não elevamento da inicialização, o valor de y ainda é undefined.
O exemplo 2 também é assim:
Exemplo
var x = 5; // Inicializa x var y; // Declara y elem = document.getElementById("demo"); // Procura o elemento elem.innerHTML = x + " " + y; // Exibe x e y y = 7; // Atribui 7 ao y
Declare suas variáveis no topo!
Hoisting (para muitos desenvolvedores) é um comportamento desconhecido ou ignorado do JavaScript.
Se o desenvolvedor não entender o hoisting, o programa pode conter bugs (erros).
Para evitar bugs, declare sempre todas as variáveis no início de cada escopo.
Como é a forma como o JavaScript interpreta o código, mantenha esse bom hábito.
O modo estrito do JavaScript não permite o uso de variáveis não declaradas.
Aprenda mais no próximo capítulo,use strict"
- Página Anterior Escopo JS
- Próxima Página Modo Estricto JS