What is a Hoisting?

Conceptually, 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.

---

Example

Technical example

One of the advantage of JavaScript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code.

/*
    Even though we call the function in our code first,
    before the funciton is written, the code still works.
    This is because of how context execution works in JavaScript.
*/
 
showName("Kim");
 
function showName(name){
    console.log("My name is " + name);
}

Hoisting works well with other data types and variables. The variables can be initialized and used before they are declared.

Only declarations are hoisted

JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined.

console.log(num) // undefined
 
var num;
num = 6;

The below two examples demonstrate the same behavior.

 
var x = 1;
console.log(x + " " + y); // 1 undefined
var y = 2;
 
/////////////////////////////////
 
// Hoisting only declarations 
var x;
var y;
 
x = 1;
console.log(x + " " + y);
y = 2;
 

References :

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting