Var, Let et Const dans les erreurs Javascript

[vickyK]

Bonjour, je me plonge actuellement dans le monde de var, let et const en JavaScript, mais j'ai rencontré des scénarios déroutants qui m'ont amené à chercher des conseils. Vous trouverez ci-dessous un extrait de code qui met en évidence mes zones d'incertitude*:

// Code Snippet 6
var x = 10;
if (true) {
  let x = 20;
}
console.log(x);

Voici les problèmes spécifiques pour lesquels j'ai besoin d'aide*:

1. Malgré la déclaration de x comme variable à l'aide de var, j'ai rencontré un comportement inattendu lorsque j'ai tenté d'enregistrer sa valeur en dehors de la portée du bloc. Pouvez-vous expliquer pourquoi la valeur de x reste inchangée à 10, malgré le fait que le bloc interne déclare une variable x distincte avec une valeur de 20*?
2. Je ne suis pas sûr des implications de l'utilisation de var et de l'utilisation de différentes portées dans le même extrait de code, notamment en termes de levage et de portée des variables. Pourriez-vous nous donner un aperçu de la manière dont l'utilisation de var et let affecte les déclarations de variables et l'accès dans les portées imbriquées*?
3. En vérifiant la sortie de la console, j'ai découvert que la valeur de x était enregistrée comme 10, plutôt que la valeur prévue de 20, dans la portée du bloc interne. Quelle est la cause de cette inadéquation et comment puis-je vérifier que x reflète sa nouvelle valeur dans la bonne portée*?
4. Comme indiqué dans cet article, je m'intéresse aux meilleures pratiques en matière de déclaration et de portée des variables en JavaScript, en particulier lorsqu'il s'agit de choisir entre var et let pour des cas distincts. Pourriez-vous s'il vous plaît expliquer quand utiliser le code var plutôt que let in pour garantir la clarté et la maintenabilité*?

Votre expérience et votre aide seraient très appréciées alors que je travaille sur ces complexités et que je comprends mieux var, let et const en JavaScript. Merci pour votre aide.
-----

[pm42]

Ton code fait ce qui est prévu.
Ton let déclare une variable qui est locale au bloc if(true). Elle est différente de la variable x déclarée par var.
En pratique, c'est comme si tu avais écris let y = 20.

C'est tout le principe des "portées" : déclarer des variables qui sont utilisées localement sans se préoccuper du fait qu'elles peuvent avoir le même nom qu'une autre déclarée avant.

Quand tu sors du bloc if(true), ce 'x' là cesse d'exister.
Ton console.log affiche donc la var x qui vaut bien 10.