Hoisting in Javascript Explained

In this article, we will take a brief look at hoisting in Javascript. Hoisting is a behaviour of Javascript which occurs before the code execution where all the variables and function declaration are moved to the top of their scope.

During the compilation process, before the code is executed, the Javascript engine first scans through the code and "lifts up" all the variable declarations and function declarations to the top of their scope.

For example, if you have a variable declaration like var firstName = "Elon"; inside a function, hoisting will move that variable to the top of the scope. So, even if you wrote the declaration later in your code, you can still use that variable from the beginning of the function.

However, it's important to note that only the declarations are hoisted, not the initial values. So, if you declared a variable as var firstName= “Amadeus” in line 5 and console log it in line 3, which is before the variable declaration, you might think that you will get an error as the variable is defined later in the code so it would be accessible before the definition, but you will see “undefined” as the output. But you set the value to “Amadeus” so why did you got undefined? That is because only the declarations are hoisted and not the actual value. Before the code execution reaches the line where the variable is actually declared it will be undefined and when the code reaches the declared line the variable will be initialized meaning it will now be set to whatever the value you set it to. The variable hoisting behaviour in Javascript is only seen when you use the var keyword to declared the variable and not with the let or const keyword. Also keep in mind that the variable will be hoisted at the top of its scope so if you have a variable defined inside a function the variable will be lifted at the top of the function only and not of the entire code or not outside of the function.

This behaviour is also seen with functions in Javascript. Function defined with the function keyword will be hoisted, meaning that the function can be used even before defining them.

console.log(declaredWithVar) // Output: undefined - because the variable is hoisted
console.log(normalFunction()) // Output: I am a normal function - because the fuction is hoisted


var declaredWithVar = 2; // this will be hoisted or lifted at the top of its scope
let declaredWithLet = 5; // this won't be hoisted
const declaredWithConst = 8; // this won't be hoisted

const arrowFunction = () => {
  return "I am an arrow function"
}

function normalFunction () {
  return "I am a normal function"
}

To interpreter the above code looks like this:

var declaredWithVar; // hoisted

function normalFunction () { //hoisted 
  return "I am a normal function"
}

console.log(declaredWithVar) // Output: undefined - because the variable is hoisted
console.log(normalFunction()) // Output: I am a normal function - because the fuction is hoisted

declaredWithVar = 2; // this will be hoisted or lifted at the top of its scope
let declaredWithLet = 5; // this won't be hoisted
const declaredWithConst = 8; // this won't be hoisted

const arrowFunction = () => {
  return "I am an arrow function"
}

That should give you a good introduction about hoisting in Javascript. However, if you still have confusions and want to dive a bit deeper, here is a good article from DigitalOcean.
https://www.digitalocean.com/community/tutorials/understanding-hoisting-in-javascript

Thank you.