Porque devemos evitar de usar o var no JavaScript

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:

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.

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

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.

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

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.

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

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.

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