Quelle est la portée et la fermeture en JavaScript?

Lorsque vous commencez pour la première fois JavaScript, vous avez peut-être rencontré la portée et les fermetures. Ce sont des concepts très importants à apprendre pour un débutant. Même dans les interviews, l'intervieweur demande des fermetures.Aujourd'hui, nous allons discuter de la portée et quels sont les concepts de base de la portée en JavaScript. Après avoir discuté de la portée, nous irons à la fermeture et nous en discuterons. À la fin de cet article, vous aurez une connaissance des lunettes et de la fermeture en JavaScript.

Avant de commencer, je vous suggère de ne pas sauter directement à la fermeture sans comprendre la portée. La raison en est que pour le concept de fermeture, la compréhension du concept de portée est très importante.

Portée

Les variables auxquelles vous avez accès est la portée de cette variable et est divisée en deux parties:

Portée mondiale

Si une variable est accessible tout au long du programme, il a une portée mondiale. En d'autres termes, nous pouvons dire que si une variable est en dehors de toutes les fonctions et accolades bouclées, c'est une variable globale et a une portée globale.

Un exemple de portée globale en JavaScript est:

const GlobalName = "John Cena";

Maintenant que nous avons déclaré la variable avec le nom GlobalNname, nous pouvons obtenir sa valeur n'importe où dans le code, y compris les fonctions / méthodes.

Par exemple:

// Variable globale
const GlobalName = "John Cena";
// fonction avec le nom de Greet
fonction salut ()
console.Log ("Hello", GlobalName);

// appelle la fonction salut
saluer();
// accéder à la variable globale à nouveau fonction à l'extérieur
console.Log ("Hello Again", GlobalName);

Dans cet exemple, nous avons d'abord initié une variable avec le nom de nom mondial. Après cela, nous avons construit une fonction où nous avons salué le nom global. Ensuite, nous avons appelé la fonction avec cette déclaration saluer(). Après cela, nous console.enregistrer le nom mondial variable pour voir s'il est accessible en dehors de la fonction ou non. La sortie indiquée dans la console est:

Cependant, il convient de garder à l'esprit que la plupart des programmeurs ne recommandent pas de déclarer une variable à l'échelle mondiale car il existe un risque de noms de variables en double tout en faisant cela. Des noms de variables en double se produisent lorsque deux variables ont le même nom. Dans la plupart des cas, cela entraînera une erreur qui sera difficile à déboguer.

Portée locale

Comme son nom l'indique, une variable locale a une portée locale. Cela signifie qu'il n'est accessible que dans une fonction / méthode ou un bloc de code. En dehors de cette zone, il n'est pas accessible et JavaScript générera une erreur. La portée locale en JavaScript est divisée en deux sortes.

Portée de la fonction

Si une variable est déclarée dans une fonction, elle ne sera accessible que dans cette fonction et ne sera pas accessible en dehors.

Par exemple:

// fonction avec le nom de Greet
fonction salut ()
//variable locale
const localname = "Randy Orton";
console.Log ("Hello", LocalName);

// appelle la fonction salut
saluer();
// accéder à la variable locale à nouveau fonction à l'extérieur
// Cela générera une erreur
console.Log ("Hello Again", LocalName);

Dans cet exemple, nous avons lancé un nom local variable puis une console.Enregistrer. Cela nous montrera la sortie de "Randy Orton" Dans le journal de la console. Cependant, quand nous console.Enregistrer la variable locale dans la dernière ligne, elle générera une erreur.

Sortir:

Portée

Block Scope nous dit que si nous déclarons une variable entre les supports bouclés, ces supports bouclés seront sa portée. Qui s'appelle une portée de bloc. On ne peut pas accéder à la variable de portée du bloc à l'extérieur des accolades bouclées.

Par exemple:

const name = "rey mysterio";
console.log ("bonjour", nom);

Dans cet exemple, nous avons déclaré une variable ayant une portée de bloc comme elle est à l'intérieur de l'attelle bouclée. Nous le enregistrons après la connexion.

La sortie de "Bonjour Rey Mysterio" est vu dans le journal de la console. Cependant, lorsque nous le journalisons à l'extérieur des accolades, une erreur sera générée.

La fonction accède-t-elle à une autre portée de fonction?

Comme nous avons déjà discuté de la portée des fonctions, faisons la lumière sur la question de savoir si deux fonctions partagent ou non une portée. La réponse est non, si nous déclarons une variable dans une fonction et essayons d'y accéder dans une autre fonction, elle ne sera pas accessible.

Par exemple:

fonction FirstMessage ()
const Message = "Je suis la première fonction";
console.log ("Accès à partir de la première fonction:", message);

fonction secondMessage ()
premier message();
console.log ("Accès à partir de la deuxième fonction", message);

SecondMessage ();

Dans cet exemple, nous avons construit une fonction avec le nom de FirstMessage et déclaré une variable, après quoi nous console.Enregistrer. Après cela, nous avons construit une deuxième variable et appelé la fonction FirstMessage (). Il fonctionnera bien et nous pourrons voir le message pour la console de la fonction FirstMessage (). Cependant, lorsque nous essayons d'accéder au message variable à partir de la fonction FirstMessage () dans la fonction SecondMessage (), nous verrons une erreur.

Cette erreur est résolue par les fermetures.

Qu'est-ce que la fermeture en JavaScript?

Si vous avez déjà créé une fonction dans une autre fonction, vous avez essentiellement créé une fermeture. La fonction intérieure est appelée fermeture et une définition plus technique serait qu'une fonction ayant accès à la portée de la fonction parent même lorsque la fonction parent a fermé est appelée fermeture.

Discutons d'un exemple de fermeture:

fonction parentFunc ()
Soit nameParent = "parent";
console.log (nameParent);
fonction childfunc ()
console.log ("enfant et", nameparent);

retour childfunc;

const store = parentFunc ();
console.journal (magasin);
magasin();

Dans cet exemple, nous avons construit un parentfunc et a initié une variable peuparent. Après cela, nous console.Enregistrez leparent et construit une deuxième fonction au sein de la fonction parent i-e childfunc. Dans cette fonction enfant, nous consômons enregistrer une chaîne «enfant et» avec la variable nameparent. Nous pouvons voir que ParentFunc renvoie le Childfunc. Maintenant, lorsque nous appelons le journal de console Parentfunc ne nous montrera que le nom. Le Childfunc n'a pas été appelé et n'est pas entré en action. Cependant, la fonction extérieure et intérieure est stockée à l'intérieur du magasin variable. Lorsque nous enregistrons le magasin, nous verrons les deux fonctions. Quand nous appelons le magasin(), Nous appelons en fait la fonction intérieure ou la fonction anonyme qui est Chidfunc à l'intérieur du parentfunc (). Maintenant, nous verrons la console de fonction intérieure.Journal I-E «Enfant et parent»,

La fermeture que nous avons créée nous permet également d'utiliser la portée du parentfunc.

Conclusion

Dans cet article, nous avons discuté des concepts de portée et de fermeture et de portée, nous avons discuté des deux principaux types de portée qui sont: la portée mondiale et la portée locale. Plus loin dans la portée locale, nous avons discuté de la portée fonctionnelle et des lunettes de blocage ainsi que des exemples. Après cela, nous sommes tombés sur un problème qui a accès à une autre portée de fonction. Nous avons résolu cela en utilisant la fermeture de la fermeture avec des exemples.