Yesterday, we looked at how variables declared with
let treat scope a bit differently than variables declared with
var. Today, we’re going to look at how they treat hoisting different.
Traditional hoisting with
When the browser goes to actually execute the file, it already knows what the variable names are, but does not know what their values are.
In the example below,
v was hoisted. Trying to log its value before it’s declared logs
undefined, but doesn’t throw an error. The browser knows it exists, but it gets a temporary value of
undefined until the declaration happens.
// The variable name is hoisted, but the value is undefined until it's declared // logs undefined console.log(v); // The value gets defined var v = 'declare with var'; // logs "declare with var" console.log(v);
Variables declared with
let are still hoisted, but they don’t automatically receive a value of
undefined the way variables declared with
The browser knows they exist, but has no value at all for them. Trying to log a variable declared with
let before it’s actually declared throws an error.
// While the name was hoisted, it has no defined value and throws an error // Uncaught ReferenceError: l is not defined console.log(l); // The value gets defined let l = 'declare with let'; // logs "declare with var" console.log(l);
This gap between when a variable declared with
let is hoisted and when it actually gets declared is known as the temporal dead zone.
Steve Griffith has a great video on this if you want to learn more.
This is actually a good thing
In yesterday’s article, I wrote that I like the more strict behavior that
let introduces, and this is another example.
let operator forces you to declare a variable before trying to use it, and I think that’s a good thing.