UNDERSTANDING HOISTING IN JAVASCRIPT

It is not common for developers to call a function or console.log something before it is declared, but JavaScript Hoisting gives us the opportunity to do that, in JavaScript you can use or call a function or variable before its declared and that is called HOISTING

Console.log(myName)
var myName = “Joshua”

When you call a function or variable before it is declared, it is called Hoisting. This is a term in JavaScript where the JavaScript interpreter knows that the variable myName exists but does not know its value. So its outputs become undefined, which is it exists but has no value.
In JavaScript, when you declare a variable without initializing them, the variable is set to undefined
e.g

var x
x //undefined

Using this knowledge to analyze the example above, what is going on is that the JavaScript interpreter hoists the variable declaration to the top and assigned the value to its variable name i.e it separates the variable name and its assignment

e.g

Console.log(myName)
var myName = “Joshua”

after the separation, it becomes:

var myName; //undefined

Console.log(myName) //undefined

myName = “Joshua”

console.log(myName) // Joshua.

For a better understanding, let’s look at hoisting into variable and function hoisting

Variable Hoisting

In JavaScript we declare a variable using var, let or const
e.g

var sport = “Football”
let film = “who am I”
const pi = 3.14

Hoisting using var declaration

When the JavaScript interpreter hoists a variable declared with var it initialized the value to undefined, meaning it knows the variable exists but has no value yet, so it set it to undefined
e.g

console.log(sport) //undefined. i.e value not known, but the variable name exists because of var.
var sport = “football” //value assigned

As earlier said the JavaScript interpreter splits the variable declaration and the assignment. Let’s look at what the JavaScript interpreter does behind the scenes.😇

1. It moves the variable declaration to the top.

var sport //undefined

1. Console.log the variable sport i.e

console.log(sport) //undefined

1. Assigned the variable name to the value

sport = “football”

1. Finally, console.log the variable name “sport”

Console.log(sport)

Hoisting using let and const declaration

We’ve seen that variables declared with var are hoisted, what about let and const?

Console.log(sport)
let sport = “football”
 // Uncaught ReferenceError: Cannot access 'sport' before initialization

what about const?

console.log(sport)
const sport = “football”
// Uncaught ReferenceError: Cannot access 'sport' before initialization

This means that in JavaScript, let and const are not hoisted. This is a good thing because it prevents unwanted errors which may arise from hoisting because as a developer working on a project you will want to declare and assign a value before you use it.

Function Hoisting

Function declarations are hoisted in JavaScript, this allows us to call a function before it is defined
Example;

sport();
function sport(){
    console.log(“football”)
}

When it comes to function hoisting, only function declaration is hoisted. Function expression and arrow functions are not hoisted e.g

sport();
let sport = function(){
    console.log(“football”)
}
// Uncaught ReferenceError: Cannot access 'sport' before initialization

The same error also come up when you use const. But what happens when you use var for a function expression?

Sport()
var sport = function(){
    console.log(“football”)
}
// Uncaught TypeError: sport is not a function.

We get a different error.

Remember, let and const are not hoisted so even though we use them in a function expression we still get the Uncaught ReferenceError. But var declaration is hoisted, so if we console.log(sport) it is undefined; which means JavaScript knows the variable exists, but if we console.log(sport()), it shows not a function because the value which is a function expression is not hoisted in JavaScript and it is trying to console.log undefined, which it can’t do. So, the variable is hoisted, but the value is not.

CONCLUSION
Hoisting is something you might not need or you might now want to use because variable hoisting comes with a lot of issues underneath, so it's better to always declare and assigned your value to a variable when using var before you make use of it and declare your function before calling it.

You can connect with me on LinkedIn and Twitter.