0

I think I've just started to understand the concept of the temporal dead zone, so I just wanted to confirm if I'm thinking in the right direction and if my understanding of this concept is correct.

So a temporal dead zone is closely related to hoisting in JavaScript. As opposed to common misunderstanding, variable declared with let and const are, in fact, hoisted to the top of their scope just like the var variables, but they're left uninitialized. Hence, the ReferenceError when we try to access them before they're officially declared. This period of time starting from when the let/const variables have been hoisted to the time when they're officially declared is the TDZ, according to my understanding.

Now, I'm confused about if the TDZ ends when we declare the variable, or when we initialize it? It should end when the variable is declared according to me, since it's given a value of undefined and there's no longer any error. Here's the code for a better understanding of what I'm talking about

console.log(someVariable); //ReferenceError

let someVariable;
console.log(someVariable) //undefined

Please correct me if I'm wrong anywhere.

AbrezJ
  • 19
  • 1
  • 6
  • 1
    There are *three* phases to a variable being created and populated. **Declaration:** registers the variable name as available. It's mostly there to prevent name clashes. **Initialisation:** makes the variable *usable*. Now, it will not throw an error when being read or written to. **Assignment:** actually giving the variable a value. For `let` and `const` The *declaration* is hoisted but initialisation is at the point where you have `let foo`. After that line, the TDZ ends. Whether you assign a value or not is irrelevant - `let foo = "bar"` and `let foo;` both end the TDZ. – VLAZ Apr 29 '20 at 11:56
  • Also, for reference: with `var` the declaration+initialisation is hoisted, hence there is no TDZ, they are just available immediately but assignment is delayed: `console.log(foo); var foo = 42;`. For function declarations all three phases are hoisted, hence why you can call a function "before" it's declared: `bar(); function bar() {}` – VLAZ Apr 29 '20 at 11:59
  • I understand, it makes complete sense! So does the meaning of variable declaration, initialization and assignment differ in Javascript than, let's say, C or Java? – AbrezJ Apr 29 '20 at 12:34
  • Yes, it's very different. JS is interpreted language. Execution happens with two passes through the source code - that's actually where "hoisting" comes from. It hasn't been an explicitly named until recently, it's just a description that people have used to explain the behaviour. The first pass through the source code is for sanity, to make sure the code conforms and make preparations. Hence why `var foo = 42` will be "hoisted" - it's registered at that point. The second pass actually executes the code the first pass prepared for, which is when the assignment would be processed. – VLAZ Apr 29 '20 at 12:38
  • In compiled languages, you don't need two passes *at execution time*. The compiler does the "first pass" (or many, in some cases) and sets up everything, makes sure the instructions you've written make sense and then translates those instructions to machine code. At execution, you get the behaviour you described in your source code. In, say, Java `System.out.println(foo); int foo = 42;` is gibberish. The compiler will reject it since it's not a sane instruction - first read this, then create it. – VLAZ Apr 29 '20 at 12:41

0 Answers0