Level up your JavaScript Skills -Hoisting

What is hoisting in JavaScript? Is it just the behavior of moving declarations to the top? Is that all?

If that’s the case help me figure out the output for this code snippet,

Code Snippet 1

Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code. [MDN]

Code execution process

So let’s deep dive into how JavaScript actually runs inside the engine. So JavaScript runs the code in 2 phases (Memory creation & Code Execution) in an execution context. The first phase would be where the memory is allocated for the variables and function declarations. In the case of a variable, an undefined value is stored for all the variables declared. And for a function, the function definition is stored. But this is only for declarations and not for a function expression. In a function expression, JavaScript treats it just like a variable where it assigns memory to it and stores an undefined value in it. In the second phase, it now starts to execute the code line by line.

Walkthrough code snippet

Code Snippet 2

Now that you have got some idea of how JavaScript runs the code let’s walk through the above code snippet. So first the memory creation phase runs and memory is allocated to val1 and getWelcomeMsg. Now val1 stores undefined in it and getWelcomeMsg stores the function definition inside it before the code execution phase. So now when the code execution phase starts line-1 prints ‘undefined’ and line-2 prints ‘Hey Deepak V’ since the function is declared. And now on line-4, the value for val1 is assigned as 10, and nothing is executed after line-4 since it's just a function declaration.

Code Snippet 3

The flow would be the same in the above snippet, and since getWelcomeMsg is an expression now, it gets assigned to undefined in the memory allocation phase. And in the code execution phase, it would throw a TypeError since it is undefined.

So coming to ES-6 features of let and const the memory allocation phase works a little differently. In the memory creation phase for var and regular function declarations, Javascript creates these variables inside the Global Object. But for variables declared with let and const, JavaScript creates it in Temporal Dead Zone. I know it sounds all like a what in the world is this?

The time span between the creation of a variable’s binding and its declaration, is called the Temporal dead zone.

Yes, until the execution reaches the declaration for those variables it will be in a space where the variables can’t be accessed. But why do we have this Temporal dead zone? It is to catch programming errors where you being able to access a variable before its declaration. If you do so, it is normally by accident and you should be warned about it. So this is nothing but using use strict in JavaScript, where you are not allowed to use variables or functions before their declarations. But also since we have started using lint plugins nowadays it shows these warning before itself.

Now that we have understood TDZ, let’s try to get back to our Code Snippet 1 and see its output,

So in the memory creation phase, JavaScript allocates memory for val1, val2, and val3. But val1 is created in the global object with an undefined value and val2 and val3 are created in the Temporal dead zone. Therefore line-1 gives the output undefined. And for line-2 and line-3 it gives ReferenceError since it is accessed before their declaration. After that, the remaining part of the code is executed and once the variables are declared at line-6 and line-7 it is removed from the Temporal dead zone and can be accessed thereafter.

Summary

So Javascript basically runs any given code in 2 phases in an execution context,

1. Memory creation
2. Code execution

Understanding the underhood process of JavaScript answers most of our doubts. And this also answers most of the tricky questions for your Javascript interviews as well :). So that is all about hoisting in JavaScript. I hope you guys enjoyed and learnt something new. Drop down your comments, feedback or if I missed out anything. Also please tell me something that you want to learn about next. See you soon :)