DEV Community

Cover image for Hoisting: facing Temporal dead zone
Larissa Avila
Larissa Avila

Posted on

Hoisting: facing Temporal dead zone

So, maybe you're thinking about the basic differences between var vs let and const : "const is only for reading, let is mutable and var is both" and that the only difference is that ES6 introduced const and let, and var is an old-school syntax.
Well, not at all.


Analyzing some examples

1.- Here, is evident that we can't call let value before declare it

favCoffee = 'espresso'

function showFavoriteCoffe() {
  console.log(favCoffee)
}

showFavoriteCoffe() // Cannot access 'favCoffee' before initialization

let favCoffee
Enter fullscreen mode Exit fullscreen mode

2.- That could change if we use var instead let:

favCoffee = 'espresso'

function showFavoriteCoffe() {
  console.log(favCoffee)
}
showFavoriteCoffe() //espresso

var favCoffee

Enter fullscreen mode Exit fullscreen mode

Yeah, maybe it looks like an extra power of var using.
This is called Hoisting a process that allows you to use variables before they are declare.

3.- Let's consider this other example:

console.log(favCoffee) // undefined
var favCoffee = 'americano'
Enter fullscreen mode Exit fullscreen mode

Although, in this example var is also hoisting here we face with the TDZ.


Temporal Dead Zone

It is defined as the state where variables are inaccessible, although they are within in the scope, they have not been declared.

{
/* TDZ starts
.
.
. */
var favCoffee = 'expresso' // TDZ ends
console.log(favCoffee) // expresso

}
Enter fullscreen mode Exit fullscreen mode

Thanks ES6*

So in hoisting process due to the TDZ, by default JS returns var value initialized as undefined, but with let or const it returns an error specifying that the variables hasn't been declared. So this is very helpful to catch errors and forces you to avoid using variables before they are declared

//using var
favCoffee = 'expresso'
var favCoffee
console.log(favCoffee) // undefined

Enter fullscreen mode Exit fullscreen mode
//using const
favCoffee = 'expresso'
const favCoffee
console.log(favCoffee) // uncaught ReferenceError: Cannot access 'favCoffee' before initialization

Enter fullscreen mode Exit fullscreen mode

(and this is why is important to consider using reporter ruler like ESLint to avoid some mistakes when you are coding).


Conclusion

Hoisting is always there, so it is important to use let and const as far as you can, this avoid undefined errors and let you catch them faster.


** ES6

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay