Qual é a diferença entre var e let no Javascript?

Em 2015 a linguagem Javascript foi bombardeada de novidades em sua implementação, uma delas foi a implementação da palavra reservada let, que por sua vez tem a mesma finalidade da var, ou seja, armazenar informações. Mas a grande questão que fica para os iniciantes no ES6 é: Qual é a diferença entre var e let no Javascript?

Uma resposta curta e simples para este questionamento é: “O que muda é o escopo”. Quando você declara uma variável com a palavra var, ela pode corresponder ao escopo global e local, já quando você faz isso com a palavra let, ela pode corresponder ao escopo global, local e de bloco. Caso não tenha ficado muito claro, vamos entender isso em detalhes agora.

O que é escopo?

Em poucas palavras, escopo é a propriedade que determina onde uma variável pode ser utilizada dentro de um programa, por exemplo, se você declara uma variável dentro de uma função, só aquela função consegue utilizar a variável, e SE você declara uma variável fora de uma função, ela pode ser acessada de qualquer parte daquele mesmo script, pois ela foi declarada globalmente. No Javascript existem 3 tipos de escopos, o global, local e de bloco (adicionado no ES6). Vamos ver em detalhes como cada um deles funciona para var e let a seguir.

Escopo global

Quando você declara uma variável fora de qualquer função, seja ela var ou let, ela tem o escopo global, pois qualquer função no script consegue utilizar esta variável. Veja abaixo um exemplo de uma variável global declarada com var:

var minhaVariavelGlobal = 10;


function func1(){

  console.log(minhaVariavelGlobal);

}


function func2(){

  console.log(minhaVariavelGlobal);

}


function func3(){

  console.log(minhaVariavelGlobal);

}


console.log(minhaVariavelGlobal);

Neste exemplo, todas as funções consegueM utilizar a variável, pois ela está declarada globalmente. Agora vejamos um exemplo com let:

let minhaVariavelGlobal = 10;


function func1(){

  console.log(minhaVariavelGlobal);

}


function func2(){

  console.log(minhaVariavelGlobal);

}


function func3(){

  console.log(minhaVariavelGlobal);

}


console.log(minhaVariavelGlobal);

O resultado é exatamente o mesmo, então isso significa que o escopo global serve tanto para var, como para let.

Escopo local

Uma variável é local quando ela é declarada dentro de alguma função, pois isso significa que apenas aquela função consegue enxergá-la. As demais funções do script não conseguem utilizá-la, pois a mesma foi declarada dentro de uma função específica. Neste ponto de vista, podemos dizer que o escopo local é completamente diferente do escopo global. Abaixo vamos ver um exemplo de uma variável declarada localmente com var.

// Consegue manipular a variável victor

function func1(){

  var victor = "Lima";

  console.log(victor);

}


// NÃO Consegue manipular a variável victor

function func2(){

  console.log(victor);

}


// NÃO Consegue manipular a variável victor

function func3(){

  console.log(victor);

}

 

Como você pode ver nos exemplo de código acima a func2 e a func3 não conseguem acessar a variável victor, pois ela foi declarada dentro do corpo da func1. O mesmo comportamento se repete para variáveis declaradas com let, até agora, nada de diferente.

Escopo de bloco

E é aqui o grande pulo do gato da diferença entre var e let. O escopo de bloco. Primeiro para entender como esse escopo funciona, precisamos entender o que é um bloco na linguagem Javascript.

Podemos dizer que um bloco é tudo aquilo em um código que está entre chaves ({ }), ou seja, estruturas condicionais, estruturas de repetição, entre outras entidades que trabalham com blocos. Então, em resumo, uma variável com escopo de bloco, é uma variável que foi declarada dentro de um determinado bloco, e apenas pode ser manipulada dentro daquele bloco, e nenhuma outra parte do código pode manipulá-la. Dentre todos os tipos de escopo este é o mais restrito.

Este tipo de escopo só funciona com variáveis declaradas com a palavra chave let e está é a grande diferença entre let e var. O escopo de bloco abaixo é um exemplo de uma variável let declarada dentro de um bloco if.

var condicao = true;



if(condicao){

  let minhaVariavel = 10;

  // É possível manipular a let, pois ela foi declarada

  // neste bloco

  console.log(minhaVariavel);

}


// ERRO, Não é possível acessar a variável, pois ela tem escopo de bloco.

function func1(){

  console.log(minhaVariavel);

}

// ERRO, Não é possível acessar a variável, pois ela tem escopo de bloco.

function func2(){

  console.log(minhaVariavel);

}

// ERRO, Não é possível acessar a variável, pois ela tem escopo de bloco.

function func3(){

  console.log(minhaVariavel);

}

// ERRO, Não é possível acessar a variável, pois ela tem escopo de bloco.

console.log(minhaVariavel);

O Mesmo não se aplica quando você declara uma variável com var, pois o escopo de bloco não existe na palavra reservada var. Abaixo vejamos um exemplo.

var condicao = true;


if(condicao){

  var minhaVariavel = 10;

  console.log(minhaVariavel);

}


// Funciona, pois o escopo de bloco não existe para var

function func1(){

  console.log(minhaVariavel);

}

// Funciona, pois o escopo de bloco não existe para var

function func2(){

  console.log(minhaVariavel);

}

// Funciona, pois o escopo de bloco não existe para var

function func3(){

  console.log(minhaVariavel);

}

// Funciona, pois o escopo de bloco não existe para var

console.log(minhaVariavel);

Conclusão

Em resumo, esta é a grande diferença entre declarar variáveis com var e let; tudo está resumido a escopo. Como já foi comentado no artigo, com a chegada do ES6 em 2015, o escopo de bloco foi implementado. Tirando este detalhe, que é muito expressivo, var e let servem para a mesma finalidade; e cabe a você, programador Javascript, decidir qual irá utilizar.