Var, Let e ​​Const - Qual é a diferença?

Muitos recursos novos e brilhantes foram lançados com o ES2015 (ES6). E agora, desde 2020, presume-se que muitos desenvolvedores de JavaScript se familiarizaram e começaram a usar esses recursos.

Embora essa suposição possa ser parcialmente verdadeira, ainda é possível que alguns desses recursos permaneçam um mistério para alguns desenvolvedores.

Um dos recursos que acompanham o ES6 é a adição de lete const, que pode ser usado para declaração de variável. A questão é: o que os torna diferentes do bom e velho varque temos usado? Se ainda não tiver certeza sobre isso, este artigo é para você.

Neste artigo, vamos discutir var, lete const  no que diz respeito ao seu âmbito, uso e elevação. Ao ler, observe as diferenças entre eles que irei apontar.

Var

Antes do advento do ES6, as vardeclarações prevaleciam. No varentanto, existem problemas associados às variáveis ​​declaradas com . É por isso que foi necessário o surgimento de novas maneiras de declarar variáveis. Primeiro, vamos entender varmelhor antes de discutir essas questões.

Escopo de var

Escopo significa essencialmente onde essas variáveis ​​estão disponíveis para uso. varas declarações têm escopo global ou função / escopo local.

O escopo é global quando uma varvariável é declarada fora de uma função. Isso significa que qualquer variável declarada varfora de um bloco de função está disponível para uso em toda a janela.

vartem escopo de função quando é declarada dentro de uma função. Isso significa que ele está disponível e pode ser acessado apenas nessa função.

Para entender melhor, veja o exemplo abaixo.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

Aqui, o greeterescopo é global porque existe fora de uma função enquanto o helloescopo é da função. Portanto, não podemos acessar a variável hellofora de uma função. Então, se fizermos isso:

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

Obteremos um erro que é o resultado de hellonão estar disponível fora da função.

variáveis ​​var podem ser declaradas novamente e atualizadas

Isso significa que podemos fazer isso dentro do mesmo escopo e não obteremos um erro.

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

e isso também

 var greeter = "hey hi"; greeter = "say Hello instead"; 

Içamento de var

Hoisting é um mecanismo JavaScript onde as variáveis ​​e declarações de função são movidas para o topo de seu escopo antes da execução do código. Isso significa que se fizermos isso:

 console.log (greeter); var greeter = "say hello" 

é interpretado assim:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

Portanto, as varvariáveis ​​são içadas ao topo de seu escopo e inicializadas com um valor de undefined.

Problema com var

Há uma fraqueza que vem com   var. Vou usar o exemplo abaixo para explicar:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

Portanto, uma vez que times > 3retorna verdadeiro, greeteré redefinido como "say Hello instead". Embora isso não seja um problema se você intencionalmente deseja greeterser redefinido, torna-se um problema quando você não percebe que uma variável greeterjá foi definida antes.

Se você tiver usado greeterem outras partes do seu código, poderá se surpreender com a saída que poderá obter. Isso provavelmente causará muitos bugs em seu código. É por isso lete constsão necessários.

Deixei

letagora é preferido para declaração de variável. Não é nenhuma surpresa, pois isso representa uma melhoria nas vardeclarações. Ele também resolve o problema varque acabamos de ver. Vamos considerar por que isso acontece.

vamos bloquear o escopo

Um bloco é um pedaço de código limitado por {}. Um bloco vive entre chaves. Qualquer coisa entre chaves é um bloco.

Portanto, uma variável declarada em um bloco com let  só está disponível para uso dentro desse bloco. Deixe-me explicar isso com um exemplo:

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

Vemos que usar hellofora de seu bloco (as chaves onde foi definido) retorna um erro. Isso ocorre porque as letvariáveis ​​têm escopo de bloco.

let pode ser atualizado, mas não declarado novamente.

Da mesma forma var, uma variável declarada com letpode ser atualizada dentro de seu escopo. Ao contrário var, uma letvariável não pode ser declarada novamente dentro de seu escopo. Então, enquanto isso vai funcionar:

 let greeting = "say Hi"; greeting = "say Hello instead"; 

isso retornará um erro:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

No entanto, se a mesma variável for definida em escopos diferentes, não haverá erro:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

Por que não há erro? Isso ocorre porque as duas instâncias são tratadas como variáveis ​​diferentes, pois têm escopos diferentes.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

Just like  var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

 const greeting = { message: "say Hi", times: 4 } 

while we cannot do this:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

we can do this:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

• var declarations are globally scoped or function scoped while let and const are block scoped.
• var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
• They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
• Enquanto vare letpodem ser declarados sem serem inicializados, constdevem ser inicializados durante a declaração.

Tem alguma pergunta ou acréscimo? Por favor deixe-me saber.

Obrigado por ler :)