Portée en JavaScript


Le champ d’application en JavaScript définit où une variable ou une fonction déclarée est disponible. Selon le lieu de la déclaration, une variable ou une fonction peut être disponible pour des blocs de code individuels en JavaScript et pas pour d’autres. Nous traitons trois types de champs d’application en JavaScript.

Portée mondiale

Lorsqu’une variable/fonction est déclarée dans une balise de script ou un fichier JS (en dehors de toutes les fonctions)
et

accessible de partout dans ce fichier ou le document HTML, il a été déclaré dans le champ d’application mondial. Il n’est pas à l’intérieur d’une fonction ou d’un module.

Dans le cas d’un navigateur, il existe une variable globale disponible appelée window. Vous verrez les développeurs échanger window.setinterval ou setInterval sans grande conséquence ni effet secondaire. C’est parce que setInterval est de portée mondiale. Il existe de nombreuses autres méthodes que le navigateur fournit sur le site window objet.

Trois opérateurs sont utilisés pour déclarer les variables. const, let et var. Les trois peuvent être utilisées pour déclarer des variables globales, mais seulement var s’attache à la window portée.

Fonction ou portée locale

Lorsqu’une variable est déclarée à l’intérieur d’une fonction, elle n’est disponible qu’à l’intérieur de cette fonction et non à l’extérieur. Cela est dû au fait que la variable est localement rattachée à cette fonction.

const first = "Parwinder"

function sayLastName() {
    const last = "Bhagat";
}

console.log(first); // Parwinder
console.log(last); // Reference Error: last is not defined

Vous pouvez voir que la variable last n’est pas accessible en dehors de la fonction. Je peux y accéder à l’intérieur de la fonction sayLastName sans problème.

const first = "Parwinder"

function sayLastName() {
    const last = "Bhagat";
    console.log(last); // Bhagat
}

sayLastName(); // Remember, I have to call a function to execute the code block in it.

console.log(first); // Parwinder

Nous lisons des articles sur les variables globales et sur la façon dont elles sont disponibles partout. Cela s’applique également à l’extrait ci-dessus.

const first = "Parwinder"

function sayLastName() {
    console.log(first); // Parwinder
    const last = "Bhagat";
    console.log(last); // Bhagat
}

sayLastName();

console.log(first); // Parwinder

Même si je ne pouvais pas accéder à last en dehors de la fonction, je peux toujours accéder au variable globale first à l’intérieur de la fonction. Cela fonctionne en JavaScript car lorsque l’interprète lit une variable, il cherche la déclaration de cette variable dans le scope. Si la variable n’est pas trouvée dans le scope, il remonte d’un scope. Dans cet exemple, lorsque nous enregistrons first à l’intérieur de sayLastNameLe moteur JS le recherchera dans le champ de la fonction, puis dans le champ global. S’il ne le trouve ni dans l’un ni dans l’autre, il ira jusqu’au champ de la fenêtre lorsqu’il exécutera JS dans un navigateur. Si la variable n’est pas trouvée dans une fenêtre qui monte, une erreur de référence est générée.

Champ d’application du bloc

Un bloc pourrait être défini comme un morceau de code encapsulé entre deux accolades. Selon cette définition, une fonction est un bloc. Il peut cependant y avoir des blocs plus petits dans une fonction. A for loop ou un if à l’intérieur d’une fonction aura sa portée de bloc. Le bloc scope nous aide à former le petit segment scope dans le code.

La façon de créer un champ d’application en bloc est d’utiliser le const ou let mot-clé pour déclarer les variables.

function amICool(name) {
    let attribute;
    if (name === "Parwinder") {
        attribute = "cool"
    }
    return attribute;
}

console.log(amICool("Parwinder")); // cool
console.log(amICool("Bhagat")); // undefined because the name was not "Parwinder"

L’exemple ci-dessus a rendu la variable attribute l’étendue de la fonction (ou le bloc de la fonction). Nous pouvons réduire davantage ce champ d’application.

function amICool(name) {
    if (name === "Parwinder") {
       let attribute = "cool"
    }
    return attribute; // Reference error: attribute is not defined
}

console.log(amICool("Parwinder")); // Reference error: attribute is not defined
console.log(amICool("Bhagat")); // This will not run as we ran into an error with the first execution of the function

Que s’est-il passé ici ? let a fait le attribute variable, et cette fois, le bloc a été limité à la if déclaration. Lorsque nous essayons de renvoyer la variable en dehors de la if il est impossible de le trouver ou d’y accéder.

En règle générale, utilisez const pour tout. Si la valeur de la variable change par la suite, il suffit de la passer à let. Utilisez var en dernier recours.

Champ d’application lexical

Attendez ; quoi ? Je croyais qu’il n’y avait que trois types de scopes. Le scoping lexical est le modèle de scope utilisé par JavaScript. Il fonctionne en définissant le scope où une variable ou une fonction est déclarée et non d’où elle est appelée.

const myName = "Parwinder";

function sayMyName() {
    console.log(myName);
}

function sayMyNameAgain() {
    const myName = "Bhagat";
    sayMyName();
}

sayMyNameAgain();

Le résultat sera Parwinder. Pourquoi ?

  1. sayMyNameAgain est appelé qui, à son tour, appelle sayMyName.
  2. Bien que sayMyNameAgain a une variable de fonction appelée myName avec la valeur de BhagatIl n’est jamais enregistré.
  3. sayMyName enregistre la variable globale myName avec la valeur de Parwinder.

Parce que sayMyName s’exécute dans le cadre du lieu où il a été déclaré.

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*