5

Declarações de variáveis com a palavra-chave var não possui diretamente um escopo local o seu escopo é dentro da função que a contém ou fora disso o escopo é global (var hoisting).

Que nem no exemplo abaixo a variável n1 será elevada para o topo do contexto de execução que é a função test() e nesse caso ela será visível por toda a função test():

function test() {
    if (10 == 10) {
        var n1 = 450;
    }
    
    console.log(n1); // 450
}

test();

Mas e se, por exemplo, em vez de eu utilizar a palavra-chave var, eu utilizar a palavra-chave let ou const nesse caso o escopo não vai mais ser a função test() e sim o comando if e a variável n1 será visível apenas dentro do comando if, caso tente usá-la fora disso é retornado um erro:

function test() {
    if (10 == 10) {
        let n1 = 450;
    }
    
    console.log(n1); // Será retornado erro.
}

test();

No caso do exemplo acima eu posso dizer que ocorreu Hoisting com a variável n1? isso porque ela foi movida para o contexto de execução que contém ela no caso não é mais a função test() e sim o comando if, isso pode ser considerado Hoisting ou não?

14
  • 3
    Discutível se dá pra chamar de hoisting o reconhecimento da variável durante a "temporal dead zone", como dizem, somente pra lançar uma exceção. Na prática não há hoisting, não há como acessar a variável sem inicializar.
    – bfavaretto
    31/03/2020 às 0:49
  • 4
    @ledevwd Esse conteúdo da MDN em pt_BR está errado!
    – bfavaretto
    31/03/2020 às 0:53
  • 2
    Isto responde à sua pergunta? Como funciona o hoisting no ES6? 31/03/2020 às 0:57
  • 2
    @ledevwd "Hoisting" não é um termo tão preciso assim. Não vejo ser usado para descrever o comportamento do let, somente o do var (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 do let, 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
    – bfavaretto
    31/03/2020 às 1:05
  • 3
    @bfavaretto já havia reportado em feedback sobre o link para a Mozilla mas não surtiu efeito até hoje.
    – ElvisP
    31/03/2020 às 1:07

3 Respostas 3

4

No caso do exemplo acima eu posso dizer que ocorreu Hoisting com a variável n1? isso porque ela foi movida para o contexto de execução que contém ela no caso não é mais a função test() e sim o comando if, isso pode ser considerado Hoisting ou não?

Não, a criação da variável não foi movida de lugar no seu exemplo. Ela foi declarada dentro do bloco do if, e é lá que ela existe, e só lá, e só a partir do momento em que estiver declarada. Ou seja, ela não está disponível para uso nem mesmo dentro do mesmo bloco, antes da linha onde é declarada. Por isso eu considero que não há hoisting. Hoisting é a expressão que se usa para descrever o comportamento oposto a esse, ou seja, o comportamento de escopo do var, argumentos de funções e funções nomeadas (mais detalhes nesta minha resposta).

4

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:

1
  • 2
    Ótima resposta!
    – bfavaretto
    31/03/2020 às 2:20
3

Eu diria que ocorreu hoisting no código com var, já que a variável foi "elevada" ao escopo da função.
Quando declaradas com var, as variáveis ou passam a ter escopo global ou o escopo da função que foram declaradas e é neste momento ocorre o hoisting.
já em declarações com const ou let, a variável se torna disponível apenas ao escopo em que ela foi declarada, seja uma função, uma estrutura de controle ou uma estrutura de repetição. É por isso que no código com let ocorre um erro.

Você deve fazer log-in para responder a esta pergunta.