Quelle est la zone morte temporelle?

J'ai entendu dire que l'accès letet les constvaleurs avant leur initialisation peuvent provoquer une ReferenceErrorcause de quelque chose appelé la zone morte temporelle .

Qu'est-ce que la zone morte temporelle, comment se rapporte-t-elle à la portée et au levage, et dans quelles situations est-elle rencontrée?

letet constont deux grandes différences de var:

1. Ils ont une portée de bloc .
2. L'accès à a varavant qu'il ne soit déclaré a le résultat undefined; accéder à un letou constavant qu'il ne soit déclaré lance ReferenceError:

console.log(aVar); // undefined
console.log(aLet); // causes ReferenceError: aLet is not defined
var aVar = 1;
let aLet = 2;

Il ressort de ces exemples que les letdéclarations (et const, qui fonctionne de la même manière) ne peuvent pas être hissées , car aLetne semble pas exister avant qu'on lui attribue une valeur.

Ce n'est pas le cas, cependant - letet const sont hissés (comme var, classet function), mais il y a une période entre l'entrée dans le champ d'application et la déclaration où ils ne sont pas accessibles. Cette période est la zone morte temporelle (TDZ) .

Le TDZ se termine quand aLetest déclarée , plutôt que attribué :

//console.log(aLet)  // would throw ReferenceError

let aLet;
console.log(aLet); // undefined
aLet = 10;
console.log(aLet); // 10

Cet exemple montre qu'il letest hissé:

let x = 'outer value';
(function() {
  // start TDZ for x
  console.log(x);
  let x = 'inner value'; // declaration ends TDZ for x
}());

Crédit: Temporal Dead Zone (TDZ) démystifié

L'accès xdans la portée interne provoque toujours un ReferenceError. S'il letn'était pas hissé, il se connecterait outer value.

Le TDZ est une bonne chose car il permet de mettre en évidence les bogues - accéder à une valeur avant qu'elle n'ait été déclarée est rarement intentionnel.

Le TDZ s'applique également aux arguments de fonction par défaut. Les arguments sont évalués de gauche à droite, et chaque argument est dans la TDZ jusqu'à ce qu'il soit affecté:

// b is in TDZ until its value is assigned
function testDefaults(a=b, b) { }
testDefaults(undefined, 1); // throws ReferenceError because the evaluation of a reads b before it has been evaluated.

Le TDZ n'est pas activé par défaut dans le transpilateur babel.js . Activez le mode «haute conformité» pour l'utiliser dans le REPL . Fournissez l' es6.spec.blockScopingindicateur pour l'utiliser avec l'interface de ligne de commande ou comme bibliothèque.

Lectures complémentaires recommandées: TDZ démystifié et ES6 Let, Const et la «zone morte temporelle» (TDZ) en profondeur .

Hissage:
let , const, varsont tous Tracez votre processus hissés.
(ce qui veut dire qu'ils vont plus haut et déclarent en haut de la portée.)

Initialisation:

• varpassez également par le processus initial et obtenez la valeur initiale de undefined.
  
• tandis que let, constne sont pas allés lancer le processus initial, de sorte que leurs valeurs sont toujours inaccessibles, bien qu'elles aient déjà été déclarées. dans quoi les mettretemporal dead zone

Donc en bref:

Procédé de levage: var, let, const
Processus d' initialisation: var

En cas de variables let et const, Fondamentalement, la zone morte temporelle est une zone

"avant que votre variable ne soit déclarée",

c'est à dire là où vous ne pouvez pas accéder à la valeur de ces variables, cela lancera une erreur.

ex.

let sum = a + 5;        //---------
//some other code       //         | ------>  this is TDZ for variable a
                        //         |
console.log(sum)        //---------
let a = 5;

le code ci-dessus donne une erreur

le même code ne donnera pas d'erreur lorsque nous utilisons var pour la variable 'a',

ex.

var sum = a;                            
console.log(sum)     //prints undefined
var a = 5;