Publicado em por Paulo Künzel

Diferença de var e let

Como você já deve saber, no JavaScript existem formas de declarar variáveis.

  • Let: declara um variável não tipada
  • Const: declara uma constante
  • Var: declara uma variável não tipada

O let e o const se comportam exatamente como esperado deles comparado com a maioria das outras linguagens de programação. O var faz um trabalho similar ao let, no entanto, ele existe a um bom tempo e por isso carrega junto algumas coisas que não acontecem em outras linguagens.

Estaremos vendo a seguir algumas peculiaridades do “var”, pois o seu funcionamento não é algo “bom” ou “ruim”, ele atendeu (e ainda atende) a programação JavaScript.

 

Var não possui escopo de bloco

As variáveis declaradas com var possuem o escopo da função ou escopo global.

Por exemplo:

if (true) {
  // Usando o var para declarar uma variavel test com o valor true
  var test = true;
}

// Exibirá true, mesmo que a variavel tenha sido
// criada dentro do bloco IF
alert(test);

Se você utilizar o let no lugar do var, o mesmo não seria visível para a função alert pois o let possui escopo de bloco.

O mesmo ocorre para variáveis declaradas dentro de um loop

for (var i = 0; i < 10; i++) {
  // Seu código, ou nada mesmo
}

// Exibe 10, pois a variavel "i"
// também continua existindo fora do bloco
alert(i);

Se o Código estiver dentro de uma função, então o var terá o escopo desta função e não será visto de forma global.

function sayHi() {
  if (true) {
    var phrase = "MundoJS";
  }

  //exibe MundoJS
  alert(phrase);
}

sayHi();

// Não reconhece a variavel
alert(phrase);

Como você pode ver, o var ignora completamente o escopo de bloco. Isso ocorre pois antigamente o JavaScript não possui qualquer tipo de ambiente para este tipo de lógica e o var é um sobrevivente daquela época.

 

O var é processado no começo da função

Variaveis declaradas com var são processadas no começo das funções, ou do script no caso de serem variáveis globais. Isso quer dizer que as variáveis serão definidas no começo da função onde estão contidas, independente de onde foram declaradas. Veja o exemplo:

function sayHi() {
  phrase = "MundoJS";

  alert(phrase);

  var phrase;
}

É o mesmo que fazer assim:

function sayHi() {
  phrase = "MundoJS";

  if (false) {
    var phrase;
  }

  alert(phrase);
}

Esse comportamento é conhecido como hoisting de variáveis. Com isso, casos como o acima, onde o IF nunca entrará no bloco de código, mesmo assim termos a declaração da variável pois ela é movida para o topo

Importante: Declarações vão para o começo, atribuições de valores não.

Exemplo:

function sayHi() {
  alert(phrase);

  var phrase = "MundoJS";
}

sayHi();

A linha que declara a variável, também está atribuindo uma string a ela. Quando o JavaScript executa este script, ele estará fazendo o seguinte:

function sayHi() {
  // A declaração ocorre no começo
  var phrase;

  // variavel -> undefined
  alert(phrase);

  // atribuição de valor
  phrase = "MundoJS"; 
}

sayHi();

Pelo fato de as variáveis sempre serem declaradas no começo, nós podemos referencia-las a qualquer momento. No entanto essas variáveis serão do tipo undefined até receberem seus valores.

Deixe um comentário