Variable Hoisting no JavaScript

O que o código abaixo imprime no console?

var x = 2; 
//global  
function funcao() { 
    //local
    console.log(x); 
    var x = 3;  
    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() {
    //variável "levantada" 
    var x;  
    console.log(x); //undefined
    x = 3; 
    console.log(x); //3 
} 
funcao();

JavaScript tem as suas pegadinhas... Para conhecer mais da linguagem, veja os cursos de Javascript da Alura.