Zone morte de cadrage, histin et temporelle en javascript / blogs / perficient

Avant de maîtriser JavaScript, il est crucial de comprendre comment il pense dans les coulisses. Des concepts comme la portée, le hissage et la zone morte temporelle peuvent sembler délicats au début, mais ils forment l’épine dorsale de la façon dont votre code se comporte.
Dans ce blog, nous décomposons ces idées clés de la manière la plus simple possible – vous pouvez donc écrire du code plus propre, éviter les bogues inattendus et vraiment comprendre ce qui se passe lorsque votre script s’exécute.

Pensez à la portée comme une limite ou un conteneur qui contrôle où vous pouvez utiliser une variable dans votre code.

Dans JavaScript, une variable n’est disponible que dans la partie du code où elle a été créée. Si vous essayez de l’utiliser en dehors de ce domaine, cela ne fonctionnera pas, c’est à cause de la portée.

Cela aide de deux grandes façons:

• Gardez votre code en sécurité – seules les bonnes parties du code peuvent accéder à la variable.
• Évitez les affrontements de noms – vous pouvez utiliser le même nom de variable à différents endroits sans qu’ils interfèrent les uns avec les autres.

JavaScript utilise principalement deux types de portée:

1. Portée glabale – Disponible partout dans votre code.

2. Portée locale – Disponible uniquement à l’intérieur d’une fonction ou d’un bloc spécifique.

Portée mondiale

Lorsque vous commencez à écrire du code JavaScript, vous êtes déjà dans la portée globale – c’est comme la zone la plus externe de votre code où les variables peuvent vivre.

Si vous créez une variable en dehors de toute fonction ou bloc, elle est considérée comme globale, ce qui signifie qu’il peut être utilisé n’importe où dans votre code.

var a = 5; // Global variable
function add() {
  return a + 10; // Using the global variable inside a function
}
console.log(window.a); // 5

Dans cet exemple, A est déclaré en dehors de toute fonction, il est donc disponible à l’échelle mondiale, même à l’intérieur d’ajout ().

Une note rapide:

• Si vous déclarez une variable avec VAR, il devient une propriété de l’objet Window dans les navigateurs.
• Mais si vous utilisez le LET ou const, la variable est toujours globale, mais pas attachée à la fenêtre.

let name = "xyz";
function changeName() {
  name = "abc";  // Changing the value of the global variable
}
changeName();
console.log(name); // abc

Dans cet exemple, nous n’avons pas créé de nouvelle variable – nous avons juste modifié la valeur de celle existante.

👉 Important:
Si tu relâché Une variable globale à l’intérieur d’une fonction (en utilisant à nouveau let, const ou var à nouveau), JavaScript le traite comme un Nouvelle variable dans une nouvelle portée– pas le même. Nous couvrirons cela plus en détail plus tard.

Portée locale

Dans JavaScript, la portée locale signifie qu’une variable n’est accessible que dans une certaine partie du code, généralement à l’intérieur d’une fonction ou d’un bloc.

Il existe deux types de portée locale:

1. Portée fonctionnelle

Chaque fois que vous créez une fonction, il crée sa propre zone privée pour les variables. Si vous déclarez une variable à l’intérieur d’une fonction, elle existe uniquement à l’intérieur de cette fonction.

let firstName = "Shilpa"; // Global
function changeName() {
  let lastName = "Syal"; // Local to this function
console.log (`${firstName} ${lastName}`);
}
changeName();
console.log (lastName); // ❌ Error! Not available outside the function

Vous pouvez même utiliser le même nom de variable dans différentes fonctions sans aucun problème:

function mathMarks() {
  let marks = 80;
  console.log (marks);
}
function englishMarks() {
  let marks = 85;
  console.log (marks);
}

Ici, les deux variables de marques sont séparées car elles vivent dans différentes lunettes de fonction.

2. Portée d’observation

Grâce à LET et const, vous pouvez désormais créer des variables qui n’existent que dans un bloc (comme un si, pour ou {}).

function getMarks() {
  let marks = 60;
  if (marks > 50) {
    const points = 10;
    console.log (marks + points); // ✅ Works here
  }
  console.log (points); // ❌ Uncaught Reference Error: points is not defined
}

Comme la variable de points est déclarée si le bloc en utilisant le mot clé LET, il ne sera pas uniquement accessible à l’extérieur comme indiqué ci-dessus. Essayez maintenant l’exemple ci-dessus en utilisant VAR MOT-CLÉS IE DÉCLARIER «Points» Variable avec VAR et repérez la différence.

Commoueur lexicale et étendue imbriquée:

Lorsque vous créez une fonction (fonction externe) qui contient une autre fonction (fonction interne), la fonction interne a alors accès aux variables et méthodes de la fonction extérieure. Ceci est connu sous le nom de portée lexicale.

function outerFunction() {
  let outerVar = "I’m outside";
  function innerFunction() {
      console.log (outerVar); // ✅ Can access outerVar
  }
  innerFunction();
}

En d’autres termes, les variables et les méthodes définies dans la fonction parent sont automatiquement disponibles pour ses fonctions enfants. Mais ne fonctionne pas dans l’autre sens—La fonction extérieure Impossible d’accéder les variables de la fonction intérieure.

Portée variable ou ombrage variable:

Vous pouvez déclarer des variables avec le même nom à différentes lunettes. S’il y a une variable dans la portée globale et que vous créez une variable avec le même nom dans une fonction, vous n’obtiendrez aucune erreur. Dans ce cas, les variables locales sont prioritaires sur les variables globales. Ceci est connu sous le nom d’observation variable, sous forme de variables de portée intérieure ombres temporaires la variable de portée extérieure au même nom.

Si la variable locale et la variable globale ont le même nom, la modification de la valeur d’une variable n’affecte pas la valeur d’une autre variable.

let name = "xyz"
function getName() {
  let name = "abc"            // Redeclaring the name variable
      console.log (name)  ;        //abc
}
getName();
console.log (name) ;          //xyz

Pour accéder à une variable, le moteur JS va d’abord regarder dans la portée qui est actuellement en exécution, et s’il n’y trouve pas, il se tournera vers sa portée parentale la plus proche pour voir si une variable existe et ce processus de recherche se poursuivra, jusqu’à ce que le moteur JS atteigne la portée globale. Dans ce cas, si la portée globale n’a pas la variable, elle lancera une erreur de référence, car la variable n’existe nulle part dans la chaîne de portée.

let bonus = 500;
function getSalary() {
 if(true) {
     return 10000 + bonus;  // Looks up and finds bonus in the outer scope
  }
}
   console.log (getSalary()); // 10500

Prise à emporter: la portée rendue simple

Portée mondiale: Les variables déclarées en dehors de toute fonction sont globales et peuvent être utilisées n’importe où dans votre code.

Portée locale: Les variables déclarées à l’intérieur d’une fonction n’existent qu’à l’intérieur de cette fonction et disparaissent une fois la fonction se termine.

Les variables globales durent plus longtemps: Ils restent en vie tant que votre programme est en cours d’exécution.

Les variables locales sont temporaires: Ils sont créés lorsque la fonction s’exécute et supprimée une fois qu’elle se termine.

Portée lexicale: Les fonctions intérieures peuvent accéder aux variables des fonctions extérieures, mais pas l’inverse.

Bloquer la portée avec LET et const: Vous pouvez créer des variables qui n’existent que dans les blocs {} comme si, pour, etc.

Même nom, pas de choc: Les variables avec le même nom dans différentes lunettes ne se affectent pas mutuellement – ils vivent dans des «mondes» distincts.

Pour comprendre le hissage dans JS, il est essentiel de savoir comment fonctionne le contexte de l’exécution. Le contexte d’exécution est un environnement où le code JavaScript est exécuté.

Il a deux phases principales:

1. Phase de création: Pendant cette phase, JS a alloué la mémoire ou les variables, fonctions et objets de la mémoire. Fondamentalement, le histing se produit ici.

2. Phase d’exécution: Pendant cette phase, le code est exécuté ligne par ligne.

-Quand le code JS s’exécute, JavaScript hisse toutes les variables et fonctions, IE attribue un espace mémoire pour ces variables avec une valeur spéciale non définie.

Les principaux points de hissification et Explorons quelques exemples pour illustrer le fonctionnement du levage dans différents scénarios:

1. fonctions– Les fonctions sont entièrement hissées. Ils peuvent invoquer avant leur déclaration de code.

foo (); // Output: "Hello, world!"
 function foo () {
     console.log ("Hello, world!");
 }

2. notre – Les variables déclarées avec VAR sont hissées dans la portée globale mais initialisées avec non définies. Accessible avant la déclaration sans défini.

console.log (x); // Output: undefined
 var x = 5;

Ce code semble simple, mais il est interprété comme:

var x;
console.log (x); // Output: undefined
 x = 5;

3.Les, const – variables déclarées avec let et const sont hissées dans la portée locale ou la portée du script mais restent dans TDZ. Ces variables entrent dans la zone morte temporelle (TDZ) jusqu’à ce que leur déclaration soit rencontrée. Accéder à TDZ, les résultats sont une erreur de référence

console.log (x); // Throws Reference Error: Cannot access 'x' before initialization
 let x = 5;

Qu’est-ce que la zone morte temporelle (TDZ)?

En JavaScript, toutes les déclarations variables – qu’elles soient faites en utilisant var, let ou const – sont hisséce qui signifie que la mémoire pour eux est réservée pendant la phase de compilation, avant que le code ne s’exécute réellement. Cependant, le comportement du levage diffère en fonction de la façon dont la variable est déclarée.

Pour les variables déclarées avec let et const, bien qu’elles soient hissées, elles sont non initialisé immédiatement comme les variables VAR. Au lieu de cela, ils restent dans un état non initialisé et sont placés dans un espace mémoire séparé. Au cours de cette phase, toute tentative d’y accéder entraînera Erreur de référence.

Cette période – du début du bloc jusqu’à ce que la variable soit initialisée – est connue sous le nom de Zone morte temporelle (TDZ). Cela s’appelle une «zone morte» parce que la variable existe en mémoire mais ne peut pas être accessible jusqu’à ce qu’il ait été explicitement déclaré et attribué une valeur dans le code.

console.log (x); //x is not defined -- Reference Error.
let a=10; //b is undefined.
var b= 100; // you cannot access a before initialization Reference Error.

👉 Important: la zone morte temporelle aide à prévenir l’utilisation des variables avant d’être correctement déclarées et initialisées, rendant le code plus prévisible et réduisant les bogues.

🧾 Conclusion

Le histin et la portée JavaScript sont des concepts fondamentaux qui peuvent sembler difficiles au début, mais une fois que vous les comprenez, ils rendent votre code plus structuré et prévisible. L’hissonage aide à expliquer pourquoi certaines variables et fonctions fonctionnent avant même d’être déclarées, tandis que la portée définit où vivent vos variables et à quel point elles sont accessibles. En gardant ces concepts à l’esprit et en pratiquant régulièrement, vous serez en mesure d’écrire JavaScript plus propre et plus fiable. Plus vous expérimentez avec eux, plus vous deviendrez confiant en tant que développeur. Continuez à apprendre, continuez à construire et tout commencera à cliquer. Codage heureux! 🙌