Allysson Santos

Front-end Developer

Javascript Basics 2 - Hoisting.

Introdução:

Entenda como funciona o Hoisting no Javascript o que é, e porque é importante entender.

Javascript Basics 2 - Hoisting.
Nível: iniciante

O que é o hoisting no javascript?

Hoisting é um comportamento da linguagem javascript, um exemplo muito clássico que evidência o que é o hoisting é esse:

1
2
3
4
5
6
var allysson = "allysson";

console.log(teste);
console.log(allysson);

var teste = "testando";

Nesse exemplo, podemos pensar que a linha 3 resultaria um erro, pois ainda não declaramos a variável teste, porém, receberemos como saída no console, o seguinte retorno:

1
2
Undefined
allysson

Porque isso acontece? É aí que iremos entender o que é o hoisting, começando pela sua tradução:

Hoisting: verbo ~ içar, levantar

Quando o javascript parseia nosso código, ele percorre todo o conteúdo do seu arquivo js e quando existem variáveis, no nosso caso, var allysson e var teste, automaticamente ele pega essas variáveis e joga em memória, ou seja, ele já declara essas variáveis para nós, a atribuição de seu valor irá acontecer depois, sendo assim, nosso código anterior será visto pelo interpretador da seguinte forma:

1
2
3
4
5
6
7
var allysson, teste;
allysson = "allysson";

console.log(teste);
console.log(allysson);

teste = "testando";

Por isso recebemos undefined e não um erro. Ele primeiro declara a variável para depois fazer a atribuição de seu valor.

Hoisting em funções

Dado que temos esse código js:

1
2
3
4
5
var allysson = {nome: 'Allysson'};
ola(allysson);
function ola(pessoa) {
  console.log(pessoa.nome);
}

Nesse caso, a chamada da função ola(); na linha 2, não teria problema algum, ela não retornaria undefined como no caso de uma variável, pois uma funcão só cria um novo escopo, elas não possuem valores, apenas criam escopos, o interpretador do javascript quando encontra uma função, também aplica o hoisting, joga a função lá pra cima! portanto, não há efeito colateral nenhum!

Lembre-se: O interpretador do javascript primeiro parseia (lê nosso código para checar a sintaxe) para depois executá-lo, e é no momento do parseamento que ele realiza o comportamento do hoisting.

comments powered by Disqus