4

Por exemplo, usando var, ao chamar a função abaixo desta forma:

function funcao(){
   console.log(foo);
   var foo = "mensagem";
}

funcao();

Irá retornar undefined por causa do hoisting, que move a variável foo para o topo da função sem valor definido.

E no caso do let, por exemplo:

function funcao(){
   console.log(foo);
   let foo = "mensagem";
}

funcao();

Irá retornar o erro Uncaught ReferenceError: foo is not defined.

Sei que essas novas especificações do ES6 também sofrem hoisting (let, const, class...). Minha dúvida é qual seria a diferença entre uma coisa e outra, que tipo de hoisting (se é que pode-se dizer assim) que o let sofre se retorna erro, quando no caso do var não?

11
  • Possível duplicata de var, const ou let? Qual usar? Commented 27/02/2018 às 13:55
  • @MarceloBatista Qual a relação da pergunta com hoisting para ser duplicata?
    – Sam
    Commented 27/02/2018 às 14:00
  • 1
    Talvez dessa
    – bio
    Commented 27/02/2018 às 14:06
  • Tanto quanto sei não existe hoisting de let e const. Este argumento é indicado na documentação apesar de referir ES5 "... In ECMAScript 2015, let bindings are not subject to Variable Hoisting, which means that let declarations do not move to the top of the current execution contex..."
    – Isac
    Commented 27/02/2018 às 14:07
  • @Isac Pois é... tem lugares e pessoas que diz que sim... minha dúvida era saber a diferença entre hoisting antes do ES6 e após. Mas fecharam a pergunta relacionando a outra que nada tem a ver com a questão.
    – Sam
    Commented 27/02/2018 às 14:11

2 Respostas 2

3

O Hoisting é um comportamento do JavaScript de mover declarações para o topo do escopo, pode ser o escopo global ou de uma função.

No es6 há estas duas palavras chaves let e const. Vamos vê como o hoisting afeta esses dois novos recursos.

Declaração com let

console.log(hoist);

let hoist = "A variável foi levada ao topo";

Saída:

ReferenceError: hoist is not defined

Um erro de referência significa que a variável não foi para a memória do computador e ainda não existe, é diferente do que ocorre com o var que retornaria undefined.

Isso garante que nós sempre temos que declarar nossas variáveis primeiro.

Porém, uma implementação como esta resulta em undefined e temos que ficar mais atento:

let hoist;

console.log(hoist);

hoist = "A variavel foi levada ao topo";

Saída:

undefined

Sendo assim, além de termos que declarar a variável antes de ser usada, nós também temos que inicializa-la.

Declaração com const

console.log(hoist);

const hoist = "A variavel foi levada ao topo";

Saída:

ReferenceError: hoist is not defined

Assim como o let o interpretador diz que a variável não existe lançando um ReferenceError. O mesmo irá ocorrer dentro de uma função.

Também devemos ficar atento numa declaração como esta:

const hoist;

console.log(hoist);

hoist = "A variavel foi levada ao topo";

Saída:

SyntaxError: Missing initializer in const declaration

Isso nos mostra que uma constante deve ser declarada e inicializada antes de usar.

Concluindo

O JavaScript leva ao topo as variáveis declaradas com let e const do es6, e a diferença é como elas são inicializadas.

Variáveis que são declaradas com let ou const não são inicializadas no incio da execução, embora variáveis declaradas com var são inicializadas com o valor undefined.

Fontes:

Hosting
Understanding Hoisting in JavaScript

0
1

Para começar, vale ressaltar alguns conceitos:

A declaração de variáveis do tipo var pode ser um grande problema pelo simples fato dela poder se alterada independente de onde esteja, veja no exemplo, deixei alguns comentários com explicações:

var a = 1; //aqui a variável é declarada e iniciada com o valor 1
console.log(a)

for(a; a<3; a++){ //aqui, é pego a mesma variável, e no loop, é somado o  valor 2, resultando em 3
  console.log(a)
}


function r () { 
  return   a+ 1; //aqui, a mesma variável, agora com o valor 3, irá ser somada com +1, resultando em 4 

}
console.log(r())

Havendo esse problema de declarações, o pessoal viu a necessidade da criação de variáveis que assumissem o seu valor aonde ela estivesse, esse é o caso do let. Com o let, se declararmos ele dentro de uma função, o mesmo estará disponível apenas nela, sem a ocorrência do hosting para fora da mesma, exemplo:

var r = 1;
function result () {
   let r = 1+1;
   return r;
}
console.log(r); //aqui irá exibir 1, pois estamos chamando a variável global

console.log(result()); //aqui é exibido o valor 2, pois foi chamado a função que contém a variável di tipo let

A variável const tem o mesmo comportamento da let, o que muda é que uma vez declarada, o seu valor não pode ser alterado, exemplo:

const a = 1;

 a = a+2;
console.log(a)

Nesse exemplo, na saída será exibido o erro "Assignment to constant variable" que quer dizer que está sendo atribuído um valor à variável do tipo const, o que não é possível.

CONCLUSÃO

Graças ao hoisting, variáveis declaradas com a palavra-chave var podem ser utilizadas mesmo antes de sua declaração.

Por outro lado, as variáveis criadas com let só podem ser utilizadas após sua declaração, pois, apesar de serem elevadas, elas não são inicializadas.

Além das variáveis declaradas com var temos a possibilidade de usar constantes por meio da palavra-chave const ou utilizar variáveis com escopo de bloco através da lett .

Eu pessoalmente recomendo que você use sempre const, pois isso leva a menos erros. Ainda não vejo uma situação em que eu precise usar var.

Como regra geral, use let apenas para contadores de loop ou somente se você realmente precisar de reatribuição. Em qualquer outro lugar, use const.

3
  • Mas o var se declarado dentro de uma função, não será levado para fora também, será levado para o topo da função. No caso do let isso não acontece, mas afirmam que ele tb sofre hoisting. É isso que não entendi direito.
    – Sam
    Commented 27/02/2018 às 13:39
  • @dvd editei a conclusão, dê uma olhada. Commented 27/02/2018 às 13:42
  • @dvd a diferença, é que o let é uma variável com escopo de bloco, ou seja, só pode ser usada dentro do bloco, se você der um return variavelLet dentro da função, ele retorna o valor assim que a função for chamada, mas se você der um console.log(variavelLet), será exibido o erro que a variável não foi definida. Commented 27/02/2018 às 13:46

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .