Understanding Hoisting in Javascript.

Hosting in Javascript allows you to use variables and functions before even it is declared. Confused? Let's dive deep into this.

console.log(name); // undefined
var name='Younus'

Usually when we use a variable that is not defined it gives a referenced error but in this case, we are not getting that error instead we are getting undefined.

Now How Does Hosting Work?

In hosting, the Javascript interpreter splits the declaration and assignment of function and variables, it “Hoist” put your declaration on top of the file so in this way you are able to refer to that variable.

Now just as a reminder we can declare variables using let, const and var.

let name;
var foo;

name='younus'
foo="bar"

we can also declare and initialize in one line as:

let name="younus";
var foo="bar"

now variable hosting works differently depending on how we declare variables.

If We Declare Variable using Var Keyword?

console.log(name)
var name="younus" //undefined

if we use the var keyword to declare a variable, Javascript will hoist it, and is the same as declaring and initializing a variable separately as below.

var name;

console.log(name)

name="younus"

Here we can access the name variable even before we declare it as shown in the previous example.

If We Declare Variable using let and const Keywords?

Now you will think, most of the time we don't want this behavior to use variables before it is declared and it may lead to bugs and errors in code. Yes, you are right luckily we have now the let and const keywords to declare variables. Now let's see how they are treated.

console.log(name) // Uncaught ReferenceError: Cannot access 'name' before initialization

let name="Younus"

Now in the case of let and const variables are hoisted but it is not initialized means it can be accessed until that part where variables are declared is evaluated. In our previous example where we used var, it was initialized with undefined as the default value which is why we were getting undefined in the console.

Now if we look closely it is saying it cannot access the variable before initializing which means it is declared but inaccessible.

Temporal Dead Zone TDZ?

Now is simple words TDZ is the time during which var and const variables cannot be accessed.

Actually, as we discussed var and let variables are hoisted but we cannot access them because of TDZ, it prevents us from accessing the variables until it is declared as we have seen in one of the above examples.

The temporal Dead Zone starts when the code execution enters the block that contains the let or const declaration and continues until the declaration has been executed. Let us look in the code what this line means.

{
// Start of TDZ for channelName
var name="Younus"
console.log(name)

console.log(channelName) // Reference Error as we are in TDZ
let channelName="Coding Made Simplified" //End Of TDZ
//Now we can access channelName because TDZ ends above.
}

Function hoisting in JavaScript

Now at the end let’s look at how we hoist functions in Javascript.

foo() //hello

function foo(){
  console.log("hello")
}

just remember function declarations are only hoisted like in the above example but function expressions are not hoisted as it makes sense as we learned above. If we call the variable that is assigned the function it either gives TypeError or ReferenceError depending on the variable scope.

function1(); // Uncaught TypeError: function1 is not a function
var function1= function () { }

function2(); // Uncaught ReferenceError: Cannot access 'function2' before initialization
let function2= function () { }

function3(); // Uncaught ReferenceError: Cannot access 'function3' before initialization
const function3= function () { }

In Conclusion

Thank you for taking the time to read this post about hoisting in JavaScript. If you have any questions or would like to connect, feel free to reach out to me on LinkedIn. Do follow my YouTube channel for more content like that.