Différence entre Let et Var en JavaScript

Cet article de didacticiel explique le fonctionnement réel des mots-clés var et let en JavaScript, ainsi que leurs principales différences.

Comme d’autres langages de programmation, JavaScript a des variables pour stocker des valeurs et des données. Et en JavaScript, nous utilisons à la fois les mots-clés let et var pour déclarer les variables.

Certaines personnes pensent que ces deux mots clés peuvent être utilisés de manière interchangeable, mais ce n’est pas vrai. Les principales différences entre les deux peuvent entraîner des erreurs majeures dans notre programmation.

Avant la mise à jour ES6 vers JavaScript, il n’y avait qu’une seule façon de déclarer des variables et des constantes en JavaScript. Mais depuis la mise à jour ES6, nous avons maintenant les mots-clés let et const utilisés pour déclarer des variables et des constantes.

L’une des principales raisons de l’ajout des mots-clés let et const à JavaScript était que la variable déclarée avec le mot-clé var n’était pas le bloc dans lequel elle était déclarée. Au lieu de cela, sa portée était limitée à la fonction, causant quelques problèmes de programmation, dont nous parlerons dans la dernière partie de l’article.

Examinons ce segment de code pour une meilleure compréhension.

function example() {
  for (let i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

Dans ce segment de code, nous avons déclaré la variable i dans la boucle for et utilisé un console.log pour obtenir les valeurs de la variable. Nous n’avons pas utilisé les crochets {} après la boucle for, donc le bloc pour la boucle for n’est que la ligne suivante.

Cependant, nous avons utilisé un console.log supplémentaire pour afficher la valeur de i. Mais le deuxième console.log ne pourra pas récupérer la valeur de la variable i et affichera l’erreur suivante :

ReferenceError: i is not defined

Cette erreur s’est produite car la portée de la variable i n’était que pour le bloc de boucle for et n’était pas accessible en dehors du bloc. Ainsi, de cette manière, nous ne pouvons pas utiliser la variable en dehors du bloc car la variable déclarée à l’aide du mot-clé let a sa portée limitée au bloc uniquement.

Pour voir la différence entre let et var, regardez le segment de code suivant :

function example() {
  for (var i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

Dans le code ci-dessus, nous pouvons observer que nous avons utilisé le mot-clé var à la place du mot-clé let.

Alors qu’il reste les deux mêmes console.log dans l’exemple précédent, dans ce cas, le deuxième console.log aura également une sortie. Alors, regardons la sortie:

0
1
2
3
4
5
6
7
8
9
10

Le premier console.log imprime les valeurs de 0 à 9, ainsi que la condition i<10.

Mais on peut voir 10 comme une sortie qui n’est certainement pas sortie du premier console.log. Par conséquent, ce 10 est la deuxième sortie console.log.

Le problème ici est que la variable i était censée être utilisée dans son bloc, mais comme elle a été accédée par le console.log en dehors du bloc, cela signifie qu’elle a dépassé sa portée.

Cela prouve que les mots clés let et var sont utilisés pour déclarer des variables, mais le mot clé var déclare des variables limitées au bloc en termes de portée. Cependant, le mot-clé var a sa portée limitée à la fonction.

Si nous déclarons une variable en dehors de la fonction, let et var ont une autre différence majeure entre eux. Si nous utilisons le mot-clé let en dehors de la fonction, une variable locale est créée qui n’est pas accessible de l’extérieur.

Mais dans le cas où nous utilisons le mot-clé var, il devient une variable globale. Examinons le segment de code suivant :

var color = 'blue';
let model = '2021';

Ici, deux variables ont été déclarées dans ce segment de code, l’une utilisant le mot clé let et l’autre utilisant le mot clé var. Ainsi, la variable déclarée à l’aide du mot-clé var devient une variable globale et va se rattacher à l’objet window dans le navigateur.

Dans les navigateurs, nous avons un l’objet window qui possède de nombreuses propriétés et méthodes et qui est très complexe. Les développeurs d’applications front-end connaissent largement l’objet window car ils travaillent beaucoup avec.

Chaque fois que nous utilisons le mot clé var en dehors d’une fonction, la variable devient une variable globale et se rattache à l’objet window et est accessible à partir de l’objet window. Dans ce cas, il serait accessible car window.color affichera la valeur à l’intérieur de la variable color, qui est blue.

Nous utilisons des bibliothèques tierces et déclarons des variables en dehors de la fonction à l’aide du mot-clé var. Si la bibliothèque tierce avait une variable portant le même nom que notre variable, cette variable écraserait notre variable.

C’est une autre raison pour nous d’éviter d’ajouter quoi que ce soit à l’objet window; nous entendons éviter d’utiliser le mot-clé var dans de tels cas.