Variable Hoisting no JavaScript

(Last Updated On: 12 de Março de 2016)

O que o código abaixo imprime no console?

var x = 2; //global
function funcao() {
    console.log(x);
    var x = 3; //local
    console.log(x);
}
funcao();

A variável x é definida globalmente, fora da função com o valor 2. Depois, é redefinida dentro da função com o valor 3.

A resposta mais lógica é a seguinte: deveria ser impresso 2, o valor da variável global, e depois 3,o valor da variável local, depois da redefinição.

Mas será impresso:

undefined
3

Poxa… Mas por que?

O código JavaScript é executado em duas fases. Primeiro, é feito o parsing, em que são vasculhadas declarações de variáveis, funções e parâmetros. Só depois é feito a execução de fato.

O efeito disso é que é como se as declarações de variáveis fossem levantadas para o topo da função ou arquivo em que estão definidas. O nome chique para esse levantamento é variable hoisting. Coisa parecida é feita com funções…

Traduzindo o código para a maneira que o JavaScript vai executá-lo:

var x = 2; //global
function funcao() {
    var x; //variável "levantada"
    console.log(x); //undefined
    x = 3;
    console.log(x); //3
}
funcao();

JavaScript tem as suas pegadinhas… Para conhecer mais da linguagem, veja o curso de Javascript do Alura.

FIQUE POR DENTRO

Próximo ArtigoComo separar palavras de String em Java