Elevação de JavaScript

Índice

Tutorial de JavaScript
Introdução ao JavaScript
JavaScript para onde
Saída JavaScript
Declarações JavaScript
Sintaxe JavaScript
Comentários JavaScript
Variáveis JavaScript
JavaScript Deixe
Const JavaScript
Operadores JavaScript
Aritmética JavaScript
Atribuição JavaScript
Tipos de dados JavaScript
Funções JavaScript
Objetos JavaScript
Eventos JavaScript
Sequências JavaScript
Métodos de string JavaScript
Pesquisa de string JavaScript
Literais de modelo JavaScript
Números JavaScript
JavaScript BigInt
Métodos numéricos JavaScript
Propriedades de número JavaScript
Matrizes JavaScript
Métodos de matriz JavaScript
Classificação de matriz JavaScript
Iteração de array JavaScript
Const JavaScript
Objetos de data JavaScript
Formatos de data JavaScript
Métodos de data JavaScript
Métodos de definição de data JavaScript
Objeto matemático JavaScript
JavaScript aleatório
Booleanos JavaScript
Comparação de JavaScript e operadores lógicos
JavaScript if else if
Declaração de mudança de JavaScript
JavaScript para Loop
JavaScript para entrada
JavaScript para de
JavaScript enquanto Loop
Quebra de JavaScript e continuação
Iteráveis JavaScript
Conjuntos JavaScript
Mapas JavaScript
Tipo JavaScript
Conversões de tipo JavaScript
JavaScript bit a bit
Objeto JavaScript RegExp
Precedência do Operador JavaScript
Erros de JavaScript Tente Catch Throw
Escopo JavaScript
Elevação de JavaScript
JavaScript "usar estrito"
JavaScript isso
Função de seta JavaScript
Aulas JavaScript
Módulos JavaScript
Javascript JSON
Depuração de JavaScript
Guia de estilo JavaScript
Práticas recomendadas de JavaScript
Erros de JavaScript
Desempenho JavaScript
Palavras reservadas em JavaScript
Versões JavaScript
Javascript ES5
Javascript ES6
JavaScript ECMAScript 2016
JavaScript ECMAScript 2017
JavaScript ECMAScript 2018
Javascript ES2019
JavaScript ECMAScript 2020
JavaScript ECMAScript 2021
JavaScript IE e Edge
História do JavaScript
Objetos JavaScript
Propriedades JavaScript
Métodos JavaScript
Objetos de exibição JavaScript
Acessadores JavaScript
Construtores JavaScript
Protótipos JavaScript
Iteráveis JavaScript
Conjuntos JavaScript
Mapas JavaScript
Métodos de objeto JavaScript ES5
Definições de funções JavaScript
Parâmetros de função JavaScript
Invocação de função JavaScript
Método de chamada de função JavaScript()
Função JavaScript aplicar() Método
Função JavaScript método bind()
Fechamentos de funções JavaScript
Aulas JavaScript
Herança de classe JavaScript
Métodos estáticos JavaScript
Retornos de chamada JavaScript
JavaScript assíncrono
Promessas de JavaScript
JavaScript assíncrono
JavaScript HTML DOM
Métodos JavaScript DOM
Documento JavaScript DOM
Elementos DOM JavaScript
JavaScript DOMHTML
Validação de formulário JavaScript
JavaScript DOM CSS
JavaScript DOM animado
Eventos DOM JavaScript
JavaScript DOM EventListener
Navegação JavaScript DOM
Nós DOM JavaScript
Coleções JavaScript DOM
Lista de nós DOM JavaScript
Janela JavaScript
Tela da janela JavaScript
Localização da janela JavaScript
Histórico da janela JavaScript
Navegador de janelas JavaScript
Caixas pop-up JavaScript
Eventos de tempo JavaScript
Cookies JavaScript
APIs da Web
Validação de formulário JavaScript
API de histórico da web
API de armazenamento na Web
API de trabalhadores da Web
API de busca JavaScript
API de geolocalização
Introdução ao AJAX
AJAX O objeto XMLHttpRequest
AJAX XMLHttpRequest
Resposta do servidor AJAX XMLHttpRequest
XMLAJAX
AJAXPHP
AJAXASP
Banco de dados AJAX
Aplicativos XML
Exemplos de AJAX
Introdução JSON
Sintaxe JSON
JSON x XML
Tipos de dados JSON
JSON.parse()
JSON.stringify()
Literais JSON
Matrizes JSON
Servidor JSON
JSON PHP
HTML JSON
JSONP
Seletores jQuery
Elementos HTML jQuery
Estilos CSS jQuery
jQueryDOM
Gráficos HTML
Tela HTML
Plotly.js
Gráfico.js
Gráfico do Google
D3.js
Exemplos de JavaScript
Exemplos de JavaScript HTML DOM
Exemplos de entrada HTML JavaScript
Exemplos de objetos HTML JavaScript
Exemplos de eventos JavaScript
Exemplos de objetos de navegador JavaScript
Mostrar índice

Hoisting é o comportamento padrão do JavaScript de mover declarações para o principal.

Declarações JavaScript são içadas

Em JavaScript, uma variável pode ser declarada após ter sido usada.

Em outras palavras; uma variável pode ser usada antes de ser declarada.

O Exemplo 1 fornece o mesmo resultado que o Exemplo 2:

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element
var x; // Declare x

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element

var x; // Declare x
</script>

</body>
</html> 

var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element
</script>

</body>
</html> 

Para entender isso, é preciso entender o termo “içamento”.

Hoisting é o comportamento padrão do JavaScript de mover todas as declarações para o topo do escopo atual (no topo do script atual ou da função atual).

As palavras-chave let e const

Variáveis definidas com let e const são içadas para o topo do bloco, mas não inicializado.<p>Significado: o bloco de código está ciente do variável, mas não pode ser usada até que seja declarada. <p>Usar uma variável let antes de ser declarada resultará em um ReferenceError.

A variável está em uma "zona morta temporal" desde o início do bloco até que seja declarado:

carName = "Volvo";
let carName;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Usar uma variável const antes de ser declarada é um erro de sintaxe, então o código simplesmente não será executado.

carName = "Volvo";
const carName;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>const</b>, you cannot use a variable before it is declared.</p>
<p>Try to remove the //.</p>

<p id="demo"></p>

<script>
carName = "Volvo";
//const carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Leia mais sobre let e const em JS Let/Const.

As inicializações de JavaScript não são içadas

JavaScript apenas eleva declarações, não inicializações.

O Exemplo 1 não fornece o mesmo resultado que Exemplo 2:

var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y = 7; // Initialize y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

</script>

</body>
</html> 

var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

var y = 7; // Initialize y

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5;  // Initialize x

elem = document.getElementById("demo");      // Find an element 
elem.innerHTML = "x is " + x + " and y is " + y;  // Display x and y

var y = 7;  // Initialize y
</script>

</body>
</html> 

Faz sentido que y seja indefinido no último exemplo?

Isso ocorre porque apenas a declaração (var y), e não a inicialização (=7), é elevada ao topo.

Por causa do içamento, y foi declarado antes de ser usado, mas porque as inicializações não são içadas, o valor de y é indefinido.

O exemplo 2 é o mesmo que escrever:

var x = 5; // Initialize x
var y;     // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

y = 7;    // Assign 7 to y 

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y;   // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

y = 7;   // Assign 7 to y

</script>

</body>
</html> 

Declare suas variáveis no topo!

Içar é (para muitos desenvolvedores) um comportamento desconhecido ou negligenciado de JavaScript.

Se um desenvolvedor não entender o içamento, os programas poderão conter bugs (erros).<p> Para evitar bugs, sempre declare todas as variáveis no início de cada escopo.<p> Como é assim que o JavaScript interpreta o código, é sempre uma boa regra.