Variable Environment: Hoisting and The TDZ

Joon Sik Yang
Feb 12 · 3 min read
Photo by Daniel Cheung on Unsplash

Execution Context always contains three parts, a variable environment, the scope chain in the current context, and the this keyword. Let’s have a closer look at the variable environment and how variables are actually created in JavaScript.

Hoisting in JavaScript

Before execution, code is scanned for variable declarations, and for each variable, a new property is created in the variable environment object. This happens is the creation phase of the execution context.

Hoisting does not work the same for all variable types. Let’s analyze the way hoisting works with function declarations, var variables, let and const variables, and function expressions and arrows.

Technically, let and const variables are hoisted, but their value is set to an uninitialized, as if hoisting was not happening at all. Instead, we say that these variables are placed in a so-called Temporal Dead Zone or TDZ, which makes it unable to access the variables between the beginning of the scope and the place where the variables are declared.

Temporal Dead Zone, let and const

If we try to access the variable in the TDZ, in this case job, we get a reference error, saying that we cannot access the variable before initialization.

If we try to access the variable that was actually never even created, in this case x, we get the different error message saying that the variable is not defined.

This means that the job is in fact in the TDZ where it is uninitialized, but the engine knows that it will be eventually be initialized, because the engine already read the code before and set the job variable in the variable environment to uninitialized. Then when the execution reaches the line where the variable is declared, it is removed from the TDZ and it’s then safe to use.

Basically each and every let and const variables get their own Temporal Dead Zone, that starts at the beginning of the scope until the line where it is defined. These variables areonly safe to use after the TDZ.

Why TDZ and Hoisting?

Then why is TDZ necessary in JavaScript?

Secondly, TDZ makes const variables actually work the way they are supposed to. We can’t reassign const variables, so it is impossible to set them to undefined first, and then assign their real value later. Const should never be reassigned. It’s only assigned when execution actually reaches the declaration.

Then is hoisting really necessary in JavaScript?

The reason why hoisting works for var declarations is that it was the only way hoisting could be implemented at the time. So the hoisting of var variables is basically just a byproduct of hoisting functions. No one knew that the JavaScript would become the huge programming language that it is today. As we cannot remove this feature from the language now, we’re just using let and const to work around this.

JoonSikYang

Share stories about Life, Programming, and Education.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store