Uncategorized

Diferenças “BEM” básicas entre let e var do JavaScript/ ECMA.

Com certeza o último post do ano. Ele serve até mesmo pra mim. Não somente pra reforçar o conhecimento mas pra poder também me ajudar a “fixar uma didática melhor” pra poder explicar a alguém que me pergunte. Os exemplos que vejo por aí nunca acho realmente simples de entender então aqui neste post vou deixar o mais “tosco” possível e também o mais simples possível, por isso o “BEM” no título.

Uma coisa básica antes de dizer a diferença entre let e var é que qualquer variável declarada sem let, var ou até mesmo const vai ter um escopo global. Isso é, vai valer em todo seu script.

Primeiro o VAR

var possui um escopo global por padrão. Visto em todo o Script ou dentro de um bloco de função (ou escopo de função). Isso é. Você pode declarar lá no início do seu bloco de código da página (ou seu construtor, por exemplo).

Quando eu falo de declarar dentro de um bloco de função estou falando que uma função pode conter várias funções dentro dela (escopos de bloco) e neste caso declarando var dentro desta função, todos os escopos de bloco dentro dela também vão enxergar esta var. Repare o exemplo tosco abaixo:

bloco_de_funcao() {
 var qqCoisa = qqCoisa;

escopo_de_bloco1() {
...
//enxerga a var
}

escopo_de_bloco2() {
...
//enxerga a var
}

escopo_de_bloco3() {
...
//enxerga a var
}
...escopo_de_blocoX...//enxerga a var
}

Dentro do escopo o uso de var é muito comum porque ela já é iniciada dentro dele antes das execuções dos escopos de bloco e desta forma não corre o risco de tomar um undefined na lata, como poderia acontecer com let. Veja:

console.log(souUmaVar);
var souUmaVar = 'qqCoisa'; // vai retornar undefined

console.log(souUmLet);
let souUmLet = 'qqCoisa'; // Uncaught ReferenceError: souUmLet is not defined 

Agora vamos falar de Let, esse é um pouco mais explicadinho…

Declarar uma variável let como um var, isso é, como um intuito de “escopo global” não vai dar liga irmão, não funciona.

var Um = 'souVar';
let Dois = 'souLet';

// local
console.log(Um); // souVar
console.log(Dois); // souLet

// Global - vai dar erro
console.log(window.Um); // souVar
console.log(window.Dois); // undefined  - com let vai dar erro!

Dentro do if seus estados (if, for, while, etc) o let possui diferentes perfis em escopos de blocos.

var souUmVar = 'valorVar';
let souUmLet = 'valorLet';

if(condicao qq) {
 var souUmVar = 'outroValorVar';
 let souUmLet = 'outroValorLet';
console.log(souUmVar, souUmLet); // vai retornar outroValorVar, outroValorLet
}
 console.log(souUmVar, souUmLet); // vai retornar outroValorVar, valorLet
// Fora do escopo da funcao o "let" reassume o valor inicial dele.

Seguindo essa linha de pensamento, se você tentar fazer uma nova declaração de let no mesmo escopo de bloco (ou função) vai dar erro.

var souUmVar = 'valorVar';
let souUmLet = 'valorLet';

var souUmVar = 'outroValorVar';
let souUmLet = 'outroValorLet'; // Uncaught SyntaxError: Identifier 'souUmLet' has already been declared

// Ele acusa erro na tentativa de passar novo valor informando que o let já tinha valor declarado anteriormente.

Quando falamos de declaração. O let é menos dinâmico ou melhor, ele é mais específico, isso é, vc precisa saber o que está fazendo com ele. Com var é de boas, declarou var dentro do escopo, ela é iniciada na hora que a execução entra nele, então, mesmo que o código em questão ainda não tenha lido a linha onde o valor de var foi atribuido, muito provavelmente var será lido. Já o let não, ele vai dar erro de falta de definição neste caso porque ele tem de ser “invocado” somente depois da linha onde foi declarado.

console.log(souUmVar); // no máximo vai rolar um "undefined", como neste caso.
var souUmVar = 'valorVar';

console.log(souUmLet); // vai dar um erro do tipo não definido, "souUmLet not defined"
let souUmLet = 'valorLet';

Resumindo então, porque pra um textinho tosco já tá bem grande, podemos resumir que:

O Modificador let faz com que o escopo da variável declarada se limite ao bloco de código ou expressão onde ela foi declarada apenas.

O Modificador var serve para tornar a variável local, acessível apenas ao seu escopo de função. Ou global se declarar ela lá no início do seu código ou no construtor do componente por exemplo (definição tosca, era isso né).

Se você declarar uma variável “solta”, sem nenhum modificador atribuído ela acaba tendo sua abrangência de escopo como uma variável global.

Achei esse modelinho legal em …https://pt.stackoverflow.com/questions/383284/d%C3%BAvidas-sobre-escopo-de-bloco-no-javascript

Não se esqueçam que o que tô colocando aqui é o básico do básico. Existem muitas interpretações e formas de se implementar fazendo desde obras de arte até cacas enormes com JS, então aconselho ir mais à fundo nisso e ver as pequenas diferenças. Se está querendo sacar legal de JS e se aprofundar aconselho a série do Kyle Simpson chamada “You dont know JS”. E para os chorões de plantão tem de graça e traduzido, legalmente e autorizado pelo Autor numa repo do Cezar Augusto do Github…

https://github.com/cezaraugusto/You-Dont-Know-JS

Então agora é só resta desejar um Feliz Ano Novo pra todo mundo que leu o post até o final!

var let = ” ‘s go!”

🙂

Padrão

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s