{"componentChunkName":"component---src-templates-post-js","path":"/blog/are-let-and-const-hoisted","result":{"data":{"markdownRemark":{"html":"

In this post, I will be talking about hoisting, temporal dead zone, and how hoisting works with let and const.

\n

What is hoisting?

\n

The JavaScript engine before parses the code before executing and during the parsing phase it shifts all the variable declaration to the top of the scope. This behavior of the JS engine is called hoisting.

\n

Variable Hoisting

\n

Consider the following code snippet -

\n
console.log(greeting); // undefined\n\nvar greeting = \"Hello\";
\n

We can see that the greeting variable can be accessed before its declared. This happens because the JS engine modifies our code snippet into something like this -

\n
var greeting;\nconsole.log(greeting); // undefined\n\nvar greeting = \"Hello\";
\n

Function Hoisting

\n

The formal function declarations in JavaScript are also hoisted to the top of the scope. For example:

\n
greeting(); // Hello\n\nfunction greeting() {\n  console.log(\"Hello\");\n}
\n

Note: The important distinction between variable hoisting and function hoisting is that a var variable is hoisted and then auto-initialized to undefined whereas a function declaration is hoisted and initialized to its function value.

\n

Function declaration vs Function expression

\n

Function hoisting only applies to formal function declarations and not to function expression assignments. Consider:

\n
greeting(); // TypeError: greeting is not a function\n\nconsole.log(greeting); // undefined\n\nvar greeting = function greeting() {\n  console.log(\"Hello!\");\n};
\n

Above, we can see that the greeting variable was hoisted but it was not initialized with the function reference. The engine throws us a TypeError: greeting is not a function and not ReferenceError: greeting is not defined. The function expression assignments behave very much like variable hoisting.

\n

What about let and const?

\n

So far, I have only talked about var and formal function declarations. What about the let and const. Let's see the following code snippet -

\n
console.log(greeting); // cannot access 'greeting' before initialization\n\nlet greeting = \"Hello\";
\n

We get a new kind of error, its not a ReferenceError, the engine knows about greeting but doesn't allow us to use it before its initialized. The JS engine doesn't allow us to access the variables declared with let and const before they are declared. This is called Temporal Dead Zone.

\n

Let's consider this snippet -

\n
let greeting;\n\nconsole.log(greeting); // undefined\n\ngreeting = \"Hello\";
\n

Above, we can see that we are able to access the greeting variable as soon as it was declared.

\n

So, let and const are not hoisted?

\n

After seeing the above two code snippets, I was pretty convinced too that let and const are not hoisted. But they actually are. We can prove this with the help of a few more examples -

\n
console.log(typeof iDontExist); // undefined\nconsole.log(typeof greeting); // cannot access 'greeting' before initialization\n\nlet greeting = \"hello\";
\n

If the greeting variable was not hoisted, we would expect typeof greeting to be undefined similar to typeof iDontExist. This proves that the JS engine knows about our greeting variable but still doesn't allow us to access it just yet due to Temporal Dead Zone.

\n

Let's see another example -

\n
let x = 'outer value';\nconsole.log(x); // outer value\n\n {\n  // start TDZ for x\n  console.log(x); // cannot access 'x' before initialization\n  let x = 'inner value'; // declaration ends TDZ for x\n }
\n

Accessing the variable x in the inner scope still causes the TDZ error. If the let x = 'inner value'; was not hoisted then on line 6, it would have logged outer value.

\n

Conclusion

\n","timeToRead":3,"frontmatter":{"title":"Are let and const hoisted?","date":"2020-07-22T00:00:00.000Z","tags":["Javascript"]}}},"pageContext":{"slug":"are-let-and-const-hoisted"}},"staticQueryHashes":["3649515864","63159454"]}