Zone morte temporelle des variables

Dans cet article, je discuterai de ce terme sympa (jeu de mots) souvent utilisé dans les potins et les interviews Javascript. Pour comprendre TDZ , il faut avoir une compréhension générale du concept de levage de Javascript. Encore une fois, qu'est-ce que cela signifie même Hoisting ? Laissez-moi vous guider à travers un simple morceau de code,

console.log(a)
showNumber()

function showNumber() {
  console.log(7)
}
var a = 5

Attendez ! D'où vient cet indéfini même?

Chaque fois qu'un morceau de programme javascript est exécuté, la mémoire pour toutes les variables et fonctions est allouée en premier. La mémoire réservée contient la valeur indéfinie pour les variables et le code de la fonction comme c'est le cas pour les fonctions. Les valeurs dans l'espace mémoire pour la variable a et la fonction showNumber dans l'image ci-dessous correspondent à l'heure exacte de la phase où notre code commence à s'exécuter pour de vrai après la fin de la phase d'allocation de mémoire.

Maintenant, nous pouvons dire que Javascript initialise nos variables avec ce mot-clé spécial indéfini avant même que nous l'initialisions dans le code. Ce comportement spécial de Javascript est connu sous le nom de Hoisting, et grâce au Hoisting des variables et des fonctions, nous pouvons les invoquer avant leur initialisation sans aucune erreur.

Levage de Let et Const

Nous venons de voir comment fonctionne le levage avec les variables déclarées avec Var. Mais comme vous le savez déjà, le moyen le plus populaire et le plus efficace de déclarer des variables après ES6 consiste à utiliser les mots-clés let et const . Creusons un peu plus pour comprendre comment le levage fonctionne pour eux, bien sûr avec le simple morceau de code ci-dessous.

console.log(a)
let a = 5

Notre console n'est pas contente cette fois de ce que nous venons de faire. Lorsque le morceau de code ci-dessus est exécuté, il se brise car nous avons violé la règle de javascript en essayant d'accéder à une variable déclarée avec le mot-clé let avant son initialisation complète. Voyons ce que nous avons,

Contrairement à var, les variables déclarées avec let et const ne sont pas initialisées avant leur déclaration lors du levage et ne peuvent donc pas y accéder. Cette zone exacte de code, où nous ne pouvons pas accéder à ces variables, est connue sous le nom de zone morte temporelle.

Changeons un peu les choses,

let a;
console.log(a)
a = 5;

Pas de surprise cette fois, car nous avons déjà déclaré un et maintenant disponible pour nous. La valeur semble toujours être ( indéfinie) ce qu'elle a obtenu lors du levage de la variable a car nous ne l'avons pas encore initialisée (jusqu'à la deuxième ligne) dans notre code. Lorsque le code continue, la valeur de a ie undefined est remplacée par ce avec quoi nous l'initialisons (5 dans le cas ci-dessus). Dans ce cas, la zone morte temporelle de la variable a se termine ( pendant le levage car javascript l'initialise avec undefined ) comme dès qu'il commence car il est disponible en plus de notre code avec la valeur undefined (jusqu'à ce que nous initialisions explicitement) à utiliser.

Le même concept de TDZ et de levage avec let s'applique également aux variables déclarées avec const , à côté de leurs différences.

Conclusion

La zone morte temporelle est simplement la zone de code où la variable déclarée avec let et const est inaccessible. Tout développeur en mauvais termes avec le concept de zone morte temporelle peut casser des choses et avoir du mal à déboguer. Toujours initialiser une valeur avec une déclaration de variable est la meilleure approche que vous pouvez adopter pour éviter la zone morte temporelle et ses conséquences.

Passe une bonne journée !