Table of content

• What is hoisting?
• Undefined or not-defined?
• Only declarations are hoisted!
• Examples
• Thanks for reading. support!

what is hoisting?

Hoisting in JavaScript is a must known concept for beginners. Well, It is a phenomenon where we can access the functions and variable in JavaScript even-before initialising it.

Sounds Amazing! But it's true we can do this is JavaScript. Unlike other languages like C, C++, python etc. where we need to initialise or define the variable prior to make a call or access it.

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.

This is know as Hoisting. The hoisting is can be little confusing while understanding it in first go. So i would recommend you to understand Behind the scenes working of JavaScript from my previous post. To know about jargon like: GEC(Global Execution Context), LEC(Local Execution Context), Call Stack etc.

Undefined or not-defined?

Just remember, when JavaScript skims the code in first go, all the variables are placed with a Undefined Placeholder.

In other words, when the variable is defined in memory stack initially by JavaScript. The default value is set to be Undefined.

Examples

Code:

getName();
console.log(x);
console.log(getName);
var x = 10;
function getName(){
   console.log("I'mma  Hoisted");
}

Console LOG[]

I'mma Hoisted
undefined
ƒ getName(){
   console.log("I'mma  Hoisted");
}

Exaplanation

• getName(); - The function is called here, and the function outputs the console statement inside it. As functions can be declared and accessed from anywhere.
• Console.log(x); - This is a variable and if a variable is declared prior to initialisation, IT IS HOISTED BY JavaScript.
• console.log(getName); - This is the name of function being logged out. This means the reference to the function is invoked/logged from the memory component of global variable.

Only declarations are Hoisted!

JavaScript only hoists declarations, not initialisation. If a variable is declared and initialised after using it, the value will be undefined. For example:

console.log(num); // Returns undefined, as only declaration was hoisted, no initialisation has happened at this stage
var num; // Declaration
num = 10; // Initialisation

Conclusions:

• Accessing variable prior to initialisation is hoisting.
• Hoisting are done mostly in variables.
• Only declarations are Hoisted.
• Also, if functions are declared with variable that will also be hoisted.

For Example:

Code:

var getName = () => {
   console.log("Not Hoisted");
}

Console

undefined
// because we are using variable names for the function declaration. and we know it will hoisted if tried to access prior to initialisation.

Thanks for reading.
Happy Coding.

Follow me on:

LinkedIn: https://linkedin.com/in/yadavutkarsh
Website: https://utkarshwhocodes.netlify.app
Blogs-Dev: https://dev.to/uyadav207
Blogs-Personal: https://utkarshwhocodesblogs.netlify.app