Hoisting in simple terms can be defined as the allocation of memory to the variables and functions in the Javascript program even before the first line of code gets executed.

It's an important concept to know if you are a Javascript developer as you'll not scratch your head just by looking at the unexpected output you'll get.

Let's understand with the example:

console.log(hoisting); //undefined
console.log(isHoistingBlog()); //true

var hoisting=true;
function isHoistingBlog(){
   return true;
}

So, you can see the variable is undefined but the function invocation is working just fine. This is because of Hoisting.

Reason behind this - When you execute a Javascript code, an Execution context is created and then memory is being allocated to the variables and functions before it start executing the first line of code.

Memory for variables: The variables are allocated the memory in the memory part of the Execution context. For the variables declared with var, they're default initialized with undefined keyword.

Memory for functions: function defined with the keyword function are allocated memory and the whole function definition is also defined in the memory.

So, that's the reason when the first line is executed , the memory allocation part is already done and when we try to access the hoisted variable it will give undefined and When we're calling that function it's giving true as output.

Hoisting for let/const declarations

let and const keywords are introduced in ES6. These behave little different in terms of hoisting. Yes, dont get confused , let and const variables are also hoisted but
they behave little different unlike var. So, first there are some points towards let and const declarations:

1. Variables declared with let or const are hoisted WITHOUT a default initialization.

2. The variables declared with let and const keywords are allocated seperate memory block. They're not present inside the Global window object.

3. Temporal Dead Zone - Temporal Dead Zone is the period of time between the memory allocation phase and initialization of the variable on the code.

4. You can't access the let and const variable during this temporal dead zone.

Let me show you on the browser console. We have the same modified code.

console.log(hoisting); //Error
console.log(isHoistingBlog()); //true
let hoisting=true;
const moyeMoye="Moye Moye";
console.log(hoisting);
function isHoistingBlog(){
   return true;
}

You can see even before first line is executed the hoisting and moyeMoye variables are declared memory. So, they're hoisted.

They're in the temporal dead zone. If you try to access them, it'll give ReferenceError: Cannot access 'number' before initialization. This means that JavaScript "knows" about the hositing variable. But why does an error occur? Well, this clarifies the difference between the hoisting behavior with var and let/const.

Variables declared with let or const are hoisted WITHOUT a default initialization. So accessing them before the line they were declared throws ReferenceError: Cannot access 'variable' before initialization.

But variables declared with var are hoisted WITH a default initialization of undefined. So accessing them before the line they were declared returns undefined.

You can access them once they're initialized in the program i.e, after line 4,5.

Wrapping Up

If you thought that hoisting only applies with var and not let/const, I hope this article clears up your confusion.

I've explained in this article, let and const variables are hoisted, only they are hoisted without a default initialization. This makes them inaccessible (as such variables are in a temporal dead zone).

Variables declared with var, on the other hand, are hoisted with a default initialization of undefined.

I hope you learned something from this article :)