Portée et hissage des variables en JavaScript | Expliqué avec des exemples

Dans un programme JavaScript, la portée d'une variable définit dans quelle mesure une variable peut être accessible en hissant en JavaScript est un phénomène par lequel vous pouvez accéder aux variables avant même leur initialisation.

Variables Portée en javascript

Avant de plonger dans la portée de la variable, nous devons d'abord comprendre ce qu'est une variable en JavaScript et comment créer une variable.

Une variable agit comme un conteneur qui contient certaines données. Ces variables peuvent être créées en utilisant trois mots clés différents comme «var», «let» et «const».

En JavaScript, une variable a deux types de portée et nous en discuterons chacun avec quelques exemples.

Bloquer la portée en javascript

JavaScript plus tôt ne prend pas en charge la portée du bloc, mais après la sortie d'Es6, il fait. ES6 présente quelques nouveaux mots clés tels que Let et const, ces mots clés offrent une portée de bloc en javascript.

La portée du bloc dans JavaScript est représentée par des accolades bouclées «», qui détermine toute variable déclarée dans la portée du bloc ne peut pas être accessible en dehors de celle-ci. Les variables initialisées dans le bloc sont appelées variables locales.

Nous allons maintenant comprendre le fonctionnement des variables, déclarée à l'intérieur de la portée du bloc.

La variable déclarée avec le mot clé «var» ne prend pas en charge la portée du bloc, cela signifie que nous pouvons également accéder à la variable à l'extérieur du bloc. Considérez l'exemple ci-dessous où la variable est déclarée avec le mot clé «var» et observez comment il fonctionne:

si vrai)

var a = 100;
console.log ("variable à l'intérieur de la portée du bloc:", a);

Nous avons créé une variable à l'intérieur du bloc à l'aide du mot-clé «var» et lui attribuez la valeur «100». Lorsque nous accéderons à cette variable à l'intérieur du bloc, il affichera la sortie suivante:

Améliorez un peu plus l'exemple ci-dessus et accédez à la variable «A» en dehors du bloc:

si vrai)

var a = 100;
console.log ("variable à l'intérieur de la portée du bloc:", a);

console.log ("variable en dehors de la portée du bloc:", a);

Observez maintenant la sortie:

La sortie vérifie que le mot clé «var» ne peut pas avoir de portée de bloc.

Créez maintenant les variables avec le mot-clé «LET» et «const», et essayez d'y accéder à partir de l'extérieur de la portée du bloc:

si vrai)

Soit a = 100;
const b = 150;
console.Log ("Laisse à l'intérieur de la portée du bloc:", a);
console.Log ("const Intor the Block Scope:", b);

console.Log ("Laisser en dehors de la portée du bloc:", a);
console.Log ("const Outside the Block Stend:", b);

Accédez maintenant aux deux variables de l'intérieur ainsi que de l'extérieur du bloc:

La sortie vérifiera que ces variables sont accessibles à l'intérieur de la portée du bloc, mais lorsque nous essayons d'y accéder à partir de l'extérieur de la portée du bloc, une erreur se produit "Nérarration de référence»:

Portée mondiale en JavaScript

Les variables qui peuvent être accessibles de n'importe où depuis l'extérieur ou à l'intérieur de la fonction / bloc sont connues sous le nom de variables de portée globales. Peu importe qu'ils soient créés en dehors de la fonction / bloc ou dans la fonction ou le bloc I.e. La variable créée à l'intérieur du bloc avec le mot clé «var» peut être accessible de n'importe où dans le code javascript.

En JavaScript, si une variable n'est pas déclarée correctement, il sera créé par défaut dans la portée globale.

Considérez l'exemple suivant et observez comment fonctionne une variable globale:

var a = 100;
Soit B = 120;
const c = 250;
si vrai)

console.log ("variable globale:", a);
console.log ("variable globale:", b);
console.log ("variable globale:", c);

Dans cet exemple, nous avons déclaré les variables à l'échelle mondiale et y accéder dans le bloc de l'état IF:

La sortie vérifie que nous pouvons accéder aux variables n'importe où dans le programme défini à l'échelle mondiale:

Histing en javascript:

Le histing fait référence à un phénomène qui déplace les déclarations variables vers le haut.

Ici, nous devons comprendre la différence entre la déclaration variable et l'initialisation variable, par exemple, «var a», est une déclaration variable tandis que «a = 10» est une initialisation variable. Nous allons maintenant prendre un exemple pour comprendre comment nous écrivons le code et comment JavaScript interprète ce code:

var a = 10;
document.écrire un);
var b = 20;

JavaScript le lira comme:

var a;
var b;
a = 10;
document.écrire un);
b = 20;

JavaScript déplace la partie de déclaration en haut tandis que la partie d'initialisation reste à sa position.

Jusqu'à présent, dans tous les exemples, nous avons créé une variable et lui avons attribué une certaine valeur, puis nous accédons à la variable à la fin. Et si nous essayons d'accéder à n'importe quelle variable avant son initialisation / déclaration. Eh bien, dans ce cas, JavaScript montre une valeur non définie comme dans l'exemple suivant:

console.log ("Accès avant la déclaration:", a);
var a = 45;

Dans cet exemple, nous essayons d'imprimer la valeur de la variable «A», avant sa déclaration, puis dans l'instruction suivante, nous avons créé la variable et lui attribuer une valeur. Sur une exécution réussie, nous obtiendrons la sortie suivante:

Cela se produit parce que, même avant l'exécution de ce code, JavaScript a attribué une valeur non définie au «var a"Ensuite, il lit"console.journal (a)" et puis "a = 45», Par conséquent, il montre non défini au lieu de 45.

Bien que le mot-clé «var» signifie que nous ne déclarons pas de variable à la place, nous initialisons simplement une variable. Dans ce cas, si nous essayons d'accéder à une variable avant sa déclaration, nous ferons face à une refferenceerror comme nous l'avons fait dans l'exemple suivant:

console.log ("Accès avant la déclaration:", a);
a = 45;

Nous essayons d'imprimer la valeur de «A» sur la console avant sa déclaration, puis dans l'instruction suivante, nous attribuons une valeur à la variable «A» sans utiliser le mot-clé «var»:

Nous obtenons la sortie suivante:

Conclusion

En JavaScript, la portée de la variable détermine où vous pouvez accéder à une variable dans le code tandis que le hissage des variables se réfère au concept d'invoquer les déclarations de variables en haut du programme. Cet article fournit les exemples de point pour comprendre le concept de portée et le hissage de la variable en JavaScript.