No primeiro exemplo, você está usando var
, que é uma forma antiga de se declarar variáveis no JavaScript. Pode-se dizer que há hoisting em var
, já que a declaração será elevada à função mais interna em que foi declarada, e não ao bloco.
Considere o exemplo abaixo:
function outer() {
function inner() {
console.log(myVar); // undefined
if (true) {
var myVar = 500;
}
console.log(myVar); // 500
}
inner();
// console.log(myVar); -> Isso lançaria um erro.
}
outer();
Pode-se dizer, então, que variáveis declaradas com var
possuem a declaração acessível dentro da função mais interna em que foram declaradas. Portanto, variáveis var
possuem escopo de função e não de bloco. Possuem, além disso, o chamado hoisting. Você pode saber mais sobre isso nesta resposta do @bfavaretto.
Vale notar, também, que a declaração foi movida para o começo de inner
, e não para o começo de outer
, já que a variável foi declarada dentro da função inner
, e não outer
. Nesse caso, inner
é a função interna mais próxima.
Por outro lado, variáveis declaradas usando let
ou const
possuem o escopo de bloco. Não sei se posso, contudo, dizer que não possuem hoisting, já que até a especificação ECMAScript é um pouco vaga em relação a isso. Veja:
let
and const
declarations define variables that are scoped to the running execution context's LexicalEnvironment. The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable's LexicalBinding is evaluated. A variable defined by a LexicalBinding with an Initializer is assigned the value of its Initializer's AssignmentExpression when the LexicalBinding is evaluated, not when the variable is created. If a LexicalBinding in a let
declaration does not have an Initializer the variable is assigned the value undefined when the LexicalBinding is evaluated.
Enfatizações próprias. Fonte.
O trecho acima não diz, em nenhum momento, que let
ou const
não possuem hoisting, mas deixa claro que, conforme no trecho negritado, "as variáveis são criadas quando seus ambientes léxico são instanciados, mas não podem ser acessadas de nenhum modo até que o seu LexicalBinding seja avaliado". Isso significa que as variáveis que usaram essa declaração não poderão ser acessadas antes que o seu valor tenha sido avaliado.
Portanto, existe um "temporal dead zone" (veja aqui ou aqui). Ele impede que as variáveis declaradas com let
ou const
possam ser lidas até que o seu valor seja atribuído. Isso acontece porque se você tentar acessar uma variável let
ou const
antes que seu valor seja atribuído, você receberá um ReferenceError
. Veja:
console.log(x); // ReferenceError
let x = 10;
console.log(x);
Para saber mais, leia os links colocados durante esta resposta.
Referência:
let
, somente o dovar
(e parâmetros de funções e nomes de funções, ver detalhes aqui). E o fato é que nesses casos é possível acessar a variável antes do ponto onde ela é declarada. No caso dolet
, claramente o interpretador de JS precisa saber que ela existe para lançar a exceção, mas eu não chamaria de hoisting, porque não é a mesma coisa e pode confundir