Hoisting do JavaScript

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

Experimente você mesmo

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

Experimente você mesmo

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

Experimente você mesmo

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 

Experimente você mesmo

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

Experimente você mesmo

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"