Variable Hoisting no JavaScript

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.


  • Ailton Moura

    E se passar x como parâmetro da função, ai deve funcionar normalmente.

    • Isso mesmo, Ailton.

      Se a funcao receber um parâmetro x, a variável global é mascarada.

      Teríamos o seguinte código:

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

      O resultado seria:

      9
      3
      

      Primeiro seria impresso o valor do parâmetro e depois o valor da variável local.

Próximo ArtigoSQL pirando ao somar Doubles