Qu’est ce que le temporal dead zone TDZ en ES6?

Par /

Cette feature a été introduite depuis ES6 et concerne let et const, deux façons alternatives de déclarer des variables. En bref, si vous vouez accéder à des variables déclarées par let et const avant qu’elle ne soient initialisée va déclencher un ReferenceError là où l’utilisation de var va déclencher un undefined.

#utilisation nominale
var a = "bonjour"
console.log(a)
> "Bonjour"

#utilisation avant initialisation
console.log(b)
var b = "bonsoir" // undefined

#avec const
console.log(c)
const c = "hello" // ReferenceError: can't access lexical declaration `b' before initialization

Le variable hoisting

Pour comprendre le TDZ, il faut d’abord comprendre ce qu’est le hoiosting (hissage en anglais). Dans le langage de programmation JS, les variables sont les premières choses processées lors d’une compilation. déclarer une variable n’importe où équivaut à les déclarer en début de script. (source MDN).

Lorsque vous écrivez var a = « bonjour » en fait il y a deux choses qui se passent (et il faut avoir le réflexe de voir la chose de cette façon)

1/la déclaration de la variable : var a

2/l’initialisation de la variable, on lui donne une valeur : a = "bonjour"

Le hoisting (hissage) ne concerne que la déclaration et pas l’initialisation (important à savoir). 

#donc écrire 
a = "bonjour"
var a
#est équivalent à
var a
a = "bonjour"

Pour cette raison, il est conseillé de déclarer les variable au début de leur scope (global ou dans la fonction). Donc ci-dessous un exemple :

function  dire(){
    console.log(a)
    var a = "bonjour"
}
#équivalent à
function dire(){
    var a
    console.log(a)
    a = "bonjour"
}

#autre exemple avec deux variables
var a = "bonjour"
var b = "bonsoir"

#équivalent à 
var a
var b
a = "bonjour"
b = "bonsoir"


#autre exemple
var x = y, y = 'A';
console.log(x + y); // undefinedA

#équivalent à
var x
var y
x = y // y n'est pas initialisé mais il existe et vaut undefined
y = 'A' // y est initialisé, mais x est toujours undefined
console.log(x + y) // undefinedA

La TDZ Temporal Dead Zone

Le petit exemple ci-dessous illustre les effets du TDZ pour let :

console.log(x) //ReferenceError: can't access lexical declaration `x' before initialization
let x = "bonjour" 

# équivalent
let x
console.log(x)
x = "bonjour"

let fait intervenir le hoisting, mais à la différence de var, si on essai d’y accéder, il renvoie ReferenceError. La TDZ est la propriété qui renvoie une ReferenceError lorsqu’on essai d’accéder à une variable non initialisée. La TDZ est cet espace entre la déclaration et l’initialisation d’une variable.

La TDZ a été créé pour avoir plus de feedback lorsque l’on code en Javascript.

Pour aller plus loin : la TDZ concerne aussi les argument d’une fonction. Je ne traiterais pas de ce sujet pour l’instant.

Pour plus d’information : la source d’inspiration

Retour en haut