VAR, LET E CONST JAVASCRIPT – QUAL A DIFERENÇA
Tempo de leitura: 6 minutos
Salve caros amigos, hoje vamos falar um pouco sobre programação, em especial sobre a declaração de variáveis e constantes em Javascript. Para quem é leigo, sabia que javascript é uma linguagem de programação client-side, ou seja, que roda no lado do cliente, mais especificamente no navegador web.
O Uso de Javascript é quase inevitável quando se deseja construir websites mais ricos, interativos e modernos. Então se você pretende ser um profissional web, invariavelmente precisará aprender sobre essa linguagem.
Qual a diferença de Var, Let e Const em Javascript
Let e var são usados para declarar variáveis, já o const para declarar constantes. Mas fique tranquilo que veremos mais detalhes dos comportamentos de cada um desses métodos de declaração a seguir.
Diferente do Var, o let quando usado dentro de blocos fica restrito ao respectivo bloco. Isso evita você cometer erros quando você quer usar uma variável apenas para um determinado bloco do seu código. Veja o exemplo abaixo:
if(true){
var teste_var = "teste var";
let teste_let = "teste let";
const TESTE_CONST = "teste const";
}
console.log(teste_var);
Isso vai imprimir “teste var” no console do navegador sem nenhum problema. Agora, se você tentar imprimir teste_let você vai obter o seguinte erro:
Uncaught ReferenceError: Cannot access ‘teste_let’ before initialization
O mesmo erro acontece caso você tente imprimir o TESTE_CONST. Mas por que isso acontece? Então, exatamente porque let e const existem apenas dentro do bloco onde foram declaradas as variáveis e constantes. Nesse exemplo acima usei o bloco IF, mas isso vale para qualquer estrutura de bloco, como o FOR, Switch, While, etc.
Para que serve LET na prática?
Se você ainda não compreendeu a utilidade de let, entenda que ele evita confusões. Por exemplo, se você usar uma variável i em uma estrutura de for, esse i será existirá apenas dentro do bloco da estrutura. Veja:
for(let i=0;i<10;i++){
console.log('i dentro do for= '+i);
}
console.log('i fora do for= '+i);
A saída isso será o seguinte:
"i dentro do for= 0" "i dentro do for= 1" "i dentro do for= 2" "i dentro do for= 3" "i dentro do for= 4" "i dentro do for= 5" "i dentro do for= 6" "i dentro do for= 7" "i dentro do for= 8" "i dentro do for= 9" Uncaught ReferenceError: i is not defined"
Ou seja, enquanto i estava dentro do bloco do for ele estava legível, e no ultimo console.log feito fora do bloco ele já não existia mais. Se você tivesse usado o var i em vez de let i, o i estaria legível fora do bloco e o console.log fora do bloco iria imprimir o valor 10.
Se você ainda não entendeu a utilidade disso e como isso evita confusões, imagine que você está trabalhando com uma variável com o nome i fora do bloco, e em um dado momento você cria um for ou outro bloco e acaba utilizando uma variável com o mesmo nome (sem querer). Nesse exemplo, usando o let você não terá nenhum problema, já usando o var você estaria sobrescrevendo o valor da variável de mesmo nome, o que pode gerar problemas e confusões em seu código.
Veja o código:
var i = "Valor Inicial de i";
for(let i=0;i<10;i++){
console.log('i dentro do for= '+i);
}
console.log('i fora do for= '+i);
O Retorno será o seguinte:
"i dentro do for= 0" "i dentro do for= 1" "i dentro do for= 2" "i dentro do for= 3" "i dentro do for= 4" "i dentro do for= 5" "i dentro do for= 6" "i dentro do for= 7" "i dentro do for= 8" "i dentro do for= 9" "i fora do for= Valor Inicial de i"
Ou seja, a sua variável i definida fora do bloco for não foi afetada. Entendeu agora como o let ajuda muito a evitar confusões.
Outra característica do let é que uma vez declarada uma variável não poderá ser redeclarada novamente. Veja:
var i = 1; console.log(i); var i = 5; console.log(i);
Usando o var isso vai funcionar normalmente, já usando o let:
let i = 1; console.log(i); let i = 5; console.log(i);
Gerará o erro: Uncaught SyntaxError: Identifier ‘i’ has already been declared”
Essa característica também ajuda a evitar equívocos, pois não faz sentido ter de redeclarar uma variável já declarada, e na maioria das vezes que isso acontece é por erro do programador. Então usando o var o programador levaria talvez um bom tempo até descobrir que em algum lugar ele já declarou outra variável com o mesmo nome, e que seu valor estaria sendo alterado devido a redeclaração. Com isso isso fica muito mais nítido, e logo de cara o programador saberia que cometeu um equívoco.
O const tem um comportamento muito parecido com o do let, com a diferença gritante de que uma constante não pode ser redefinida, ou seja, ter seu valor alterado.
Em funções, o comportamento dos três tipos de declarações são similares. O código abaixo vai funcionar normalmente:
var teste_var = "teste var";
let teste_let = "teste let";
const TESTE_CONST = "teste const";
function testar(){
console.log(teste_var);
console.log(teste_let);
console.log(TESTE_CONST);
}
testar();
Diferente do PHP, no Javascript as variáveis declaradas fora de funções e classes estão acessíveis para todas as funções e classes.
E as variáveis e constantes declaradas com let, var e const dentro de funções e classes ficam restritas à respectiva função ou classe. Como no exemplo abaixo, nenhuma variável estará acessível:
function testar(){
var teste_var = "teste var";
let teste_let = "teste let";
const TESTE_CONST = "teste const";
console.log(teste_var); //Erro gerado: teste_var is not defined
}
Para uma variável iniciada dentro de uma função/classe ficar acessível fora dela você pode usar o window, que representa a janela do navegador. Veja o exemplo:
function testar(){
window.var_window = "teste window";
}
testar();
console.log(var_window);
O Código acima vai funcionar perfeitamente. Variáveis atribuídas a window ficam como que variáveis globais, acessíveis de qualquer lugar.
Bom, espero que esse artigo tenha esclarecido suas dúvidas.
Até um próximo post.
Na próxima semana farei mais um review com depoimento e resenha sobre VAR, LET E CONST JAVASCRIPT – QUAL A DIFERENÇA.
Espero ter ajudado a esclarecer o que é, como usar, se funciona e se vale a pena mesmo VAR, LET E CONST JAVASCRIPT – QUAL A DIFERENÇA. Se você tiver alguma dúvida ou quiser adicionar algum comentário deixe abaixo.
Nenhum comentário: