Porque devemos evitar de usar o var no JavaScript
Published: 2023-05-17 11:02:57

## **Var**
No JavaScript, let, var e const são palavras-chave usadas para declarar variáveis, mas têm diferenças sutis em seu comportamento.

var: É a forma mais antiga de declarar variáveis no JavaScript. As variáveis declaradas com var têm escopo de função ou escopo global, o que significa que são visíveis dentro da função em que foram declaradas ou em todo o programa, se forem declaradas fora de qualquer função. Além disso, as variáveis declaradas com var são içadas (hoisted), o que significa que podem ser usadas antes de serem declaradas no código, embora seu valor seja undefined até a atribuição ser feita. Uma desvantagem do var é que ele não respeita o escopo de bloco, o que pode levar a comportamentos inesperados em alguns casos.

**Exemplo:**

```
console.log(x); // undefined
var x = 10;
console.log(x); // 10

```

## **LET**

let: Foi introduzido no ECMAScript 2015 (também conhecido como ES6) como uma alternativa ao var. As variáveis declaradas com let têm escopo de bloco, o que significa que são visíveis apenas dentro do bloco em que foram declaradas. O let não é içado, portanto, não pode ser usado antes de ser declarado. Além disso, uma vez que uma variável é declarada com let, não pode ser redeclarada no mesmo escopo.

**Exemplo:**

```
console.log(x); // ReferenceError: x is not defined
let x = 10;
console.log(x); // 10

**Const**

```
const: Também foi introduzido no ECMAScript 2015. O const é usado para declarar constantes, ou seja, variáveis ​​cujo valor não pode ser alterado após a atribuição inicial. Assim como o let, o const tem escopo de bloco e não é içado. As constantes devem ser inicializadas no momento da declaração e não podem ser reatribuídas posteriormente.

**Exemplo:**


```
const pi = 3.14159;
console.log(pi); // 3.14159

pi = 3; // TypeError: Assignment to constant variable.
```

Resumindo , o var tem escopo de função ou global, é içado e pode ser redeclarado; o let tem escopo de bloco, não é içado e não pode ser redeclarado; e o const também tem escopo de bloco, não é içado e não pode ser reatribuído após a inicialização. Recomenda-se o uso de let e const em vez de var na maioria dos casos, pois eles são mais seguros e ajudam a evitar problemas relacionados ao escopo.

Em versões mais recentes do JavaScript (a partir do ECMAScript 6), é recomendado evitar o uso da palavra-chave var para declarar variáveis. Em vez disso, é preferível utilizar let ou const para declarar variáveis.

O uso do `var` no JavaScript pode levar a alguns comportamentos inesperados e erros comuns, principalmente devido às suas características de escopo e hoisting. Aqui estão alguns dos bugs mais comuns relacionados ao uso de `var`:

1. Hoisting: Quando uma variável é declarada com `var`, sua declaração é "elevada" (hoisted) para o topo do escopo atual. Isso significa que você pode referenciar a variável antes mesmo de ela ser declarada explicitamente no código. Isso pode levar a erros sutis e comportamentos inesperados, especialmente em código complexo.

```javascript
console.log(myVar); // undefined
var myVar = 10;
```

2. Escopo de função vs. escopo de bloco: Ao usar `var`, as variáveis têm escopo de função, o que significa que elas são visíveis em todo o escopo da função em que foram declaradas, independentemente de blocos condicionais ou loops. Isso pode levar a bugs quando você espera que uma variável seja local a um bloco específico.

```javascript
function example() {
  if (true) {
    var myVar = 10;
  }
  console.log(myVar); // 10
}
```

3. Reatribuição acidental: Com `var`, é possível reatribuir um valor a uma variável, mesmo dentro do mesmo escopo, sem gerar um erro. Isso pode levar a bugs difíceis de rastrear, especialmente em código grande e complexo.

```javascript
var myVar = 5;
// ...
// Algum código intermediário
// ...
var myVar = 10;
console.log(myVar); // 10
```

4. Sobrescrever variáveis globais acidentalmente: Quando você declara uma variável com `var` sem usar a palavra-chave `var`, ela é atribuída ao escopo global do navegador. Isso pode resultar em bugs ao tentar reutilizar nomes de variáveis em diferentes partes do código.

```javascript
function example() {
  myVar = 10; // Atribuída ao escopo global acidentalmente
  console.log(myVar); // 10
}
example();
console.log(myVar); // 10 (variável global)
```

Esses são apenas alguns exemplos dos bugs mais comuns associados ao uso do `var`. É por esses motivos que as versões mais recentes do JavaScript (ECMAScript 6 e posteriores) introduziram `let` e `const`, que resolvem esses problemas e oferecem um comportamento mais previsível no que diz respeito a escopo e hoisting.

**Fontes :** https://www.alura.com.br/artigos/entenda-diferenca-entre-var-let-e-const-no-javascript

https://cursos.alura.com.br/course/fundamentos-javascript-tipos-variaveis-funcoes