Variables JavaScript - Quelle est la différence entre var, let et const dans JavaScript?

Variables JavaScript - Quelle est la différence entre var, let et const dans JavaScript?
Dans Ecmascript 2016, JavaScript a introduit deux nouvelles méthodes pour déclarer des variables avec laisser et const mots clés. JavaScript n'avait qu'une seule option pour déclarer des variables avant 2016 I.e. le var mot-clé. Dans cet article, nous apprendrons pourquoi il existe trois façons différentes de déclarer des variables en JavaScript; Nous couvrirons également la différence entre ces trois articles. De plus, cet article vous présentera également des concepts tels que la portée variable et le histin. Commençons donc par comprendre quelle est la portée variable:

Quelle est la portée en javascript

En JavaScript, la portée est définie par des supports bouclés. Il définit un bloc de code qui doit être exécuté ensemble. JavaScript a deux types de lunettes:

  • Saut de fonction
  • Bloc de blocs

Fonction-Scope: Toute variable de JavaScript créée à l'intérieur d'une fonction en utilisant var est encope à la fonction. Sa visibilité est limitée à la définition de la fonction et il ne peut pas être accessible à partir de la fonction:

fonction showMessage ()
var message = 'hi from linuxhint';
console.log ("in:" + message); // 'Salut, Linuxhint!'

voir le message();
console.log ("out:" + message); ReferenceError: le message n'est pas défini

Bloc-Scope: Un bloc de code en javascript est défini par des accolades bouclées. Ce type d'étendue nous aidera à faire de bonne partie entre les trois méthodes de déclaration des variables:

Voici un exemple où nous avons déclaré des variables avec var, let et const dans un bloc IF, puis les avons enregistrés à la console:

si vrai)
var message1 = 'hi from linuxhint';
Laissez Message2 = 'Hello From LinuxHint';
const Message3 = 'Salut à nouveau de LinuxHint';
console.log ("in:" + message1); // 'salut de Linuxhint';
console.log ("in:" + message2); // 'Bonjour de Linuxhint';
console.log ("in:" + message3); // 'Salut à nouveau de Linuxhint';

Toutes les variables ont été enregistrées sur la console sans aucune erreur car elles ont été enregistrées du même bloc.

Cependant, si nous essayons de les enregistrer à partir de l'extérieur du bloc IF, l'erreur mentionnée ci-dessous apparaîtra:

si vrai)
var message1 = 'hi from linuxhint';
Laissez Message2 = 'Hello From LinuxHint';
const Message3 = 'Salut à nouveau de LinuxHint';
console.log ("in:" + message1); // 'salut de Linuxhint';
console.log ("in:" + message2); // 'Bonjour de Linuxhint';
console.log ("in:" + message3); // 'Salut à nouveau de Linuxhint';

console.log ("out:" + message1); // 'salut de Linuxhint';
console.log ("out:" + message2); // ReferenceError: le message2 n'est pas défini
console.log ("out:" + message3); // ReferenceError: le message3 n'est pas défini

Comment utiliser var pour déclarer une variable en javascript

Avant Ecmascript 2016 var était la seule méthode pour déclarer une variable en JavaScript, mais elle avait plusieurs problèmes qui lui sont associés, de sorte que de nouvelles méthodes ont été introduites qui pourraient être utilisées pour déclarer des variables. Nous comprendrons d'abord var Et puis nous parlerons de ces problèmes:

Portée de var: La portée variable signifie essentiellement où la variable sera disponible pour utiliser. Variables qui sont déclarées avec le var Le mot-clé a une portée globale ou locale.

Variables qui sont déclarées en dehors du bloc fonctionnel en utilisant var avoir une portée mondiale. La portée globale signifie qu'une variable est disponible pour utiliser n'importe où dans la fenêtre.

Lorsque la variable est déclarée à l'intérieur d'une fonction, elle est encope, ce qui signifie qu'il ne peut être utilisé que dans la fonction:

Pour mieux comprendre, regardez l'exemple ci-dessous:

fonction showMessage ()
var message = 'hi from linuxhint';

Ici le message La fonction est-elle déterminée afin qu'elle ne soit pas accessible en dehors de la fonction. Donc, si nous faisons ceci:

fonction showMessage ()
var message = 'hi from linuxhint';

console.log ("out:" + message); // ReferenceError: le message n'est pas défini

Cela nous donnera une erreur qui est due au message n'est pas disponible en dehors de la fonction.

var en dehors d'une boucle pour: La variable "je" peut être accessible de l'extérieur de la boucle pour.

pour (var i = 0; i < 5; i++)
console.log ("in:" + i);

console.log ("out:" + i);

Les variables VAR peuvent être redéclarées et mises à jour: Dans les variables javascript déclarées avec var Le mot-clé peut être redéclaré et mis à jour dans la même portée:

fonction showMessage ()
var message = 'hi from linuxhint';
Message = 'Hello From LinuxHint';
var message = 'salut à nouveau de Linuxhint';
console.log (message); // 'Salut à nouveau de Linuxhint';

voir le message()

Comment utiliser SET pour déclarer une variable dans JavaScript: Le laisser Le mot-clé est désormais préféré var pour les déclarations variables; il est livré avec quelques améliorations par rapport var.

LET IS Block Placed: En JavaScript, un bloc de code est la collection de déclarations délimitées par une paire de supports bouclés . Une variable déclarée en utilisant le laisser Le mot-clé n'est disponible que dans ce bloc et n'est pas accessible depuis l'extérieur:

si vrai)
Soit Message = 'Hi de LinuxHint';
console.log ("in:" + message); // "salut de Linuxhint"

console.log ("out:" + message); // référence

Si nous utilisons le message En dehors du bloc où il a été défini, il renverra une erreur. En effet.

Que l'extérieur d'une boucle: L'exemple suivant démontrant le laisser Sortie variable à l'aide de la boucle:

pour (soit i = 0; i < 5; i++)
console.log ("in:" + i);

console.log ("out:" + i);

Soit peut être mis à jour mais pas redéclaré: Une variable déclarée avec laisser peut être mis à jour dans sa portée tout comme var, mais contrairement à var, il ne peut pas être recommencé:

Soit Message = 'Hi de LinuxHint';
Message = 'Hello From LinuxHint';

La console est complètement vide et ne renvoie aucune erreur. Ces instructions renverront une erreur:

Soit Message = 'Hi de LinuxHint';
Laissez Message = 'Hello From LinuxHint'; // Syntaxerror: le «message» de l'identifiant a déjà été déclaré

Cependant, redéfinir la même variable dans une portée différente en utilisant laisser ne renvoie aucune erreur:

Soit Message = 'Hi de LinuxHint';
si vrai)
Laissez Message = 'Hello From LinuxHint';
console.log ("in:" + message); // "Bonjour de Linuxhint"

console.log ("out:" + message); // "salut de Linuxhint"

Le laisser Le mot-clé traite ces deux variables comme différentes si elles sont dans des lunettes différentes afin qu'elle ne renvoie aucune erreur; cette fonctionnalité du laisser Le mot-clé en fait un meilleur choix que var. Lors de l'utilisation laisser, Vous pouvez réutiliser des noms de variables dans différentes lunettes sans vous soucier de savoir si vous avez déjà utilisé ce nom de variable.

Comment utiliser const pour déclarer la variable en javascript

Les variables déclarées en utilisant le const Le mot-clé a des valeurs constantes. Cela signifie que leurs valeurs ne peuvent pas être modifiées / réaffectées. Similaire aux variables déclarées avec le laisser mot-clé, les variables déclarées avec le var Les mots clés sont également s -coped.

const ne peut pas être redéclaré ou réaffecté: Les variables déclarées avec le mot-clé const ne peut pas être réécloyé ou réaffecté dans la même portée. Donc, si nous avons déclaré une variable avec const clé, nous ne pouvons pas le faire:

const message = 'hi from linuxhint';
Message = 'Hello From LinuxHint'; // Erreur-type

Nous ne pourrons pas non plus faire ceci:

const message = 'hi from linuxhint';
const Message = 'Hello from linuxhint'; // Erreur de syntaxe

Chaque variable qui est déclarée en utilisant le const Le mot-clé doit être initialisé au moment de sa déclaration.

Ce comportement du const Le mot-clé change en quelque sorte en ce qui concerne les objets. Bien que l'objet déclaré ne puisse pas être mis à jour, ses propriétés peuvent être modifiées

Donc, si nous déclarons un objet avec const:

const user =
Nom: "Steve",
Âge: 13

Bien que cela ne puisse pas être fait:

user =
Nom d'utilisateur: "Harry",
Grade: "3e"
// TypeError: affectation à une variable constante.

Ceci peut être fait:

utilisateur.name = "Harry";

Cela modifiera la valeur du utilisateur.nom sans renvoyer d'erreurs.

Revue finale

Déclaration variable Saut de fonction Bloc de blocs Redéfinissant
var
laisser
const

Conclusion

C'est généralement une bonne pratique d'éviter d'utiliser var pour déclarer des variables en JavaScript car la portée de la fonction est déroutante et n'est pas aussi évidente que la portée du bloc. Le laisser et const Les mots clés encouragent les développeurs à utiliser de meilleures pratiques de codage. Vous devez généralement utiliser laisser pour les variables que vous devrez réaffecter et utiliser le const mot-clé pour toutes les autres variables. Cet article explique en profondeur les trois types de variables avec des exemples.