15. MEDIUM | Hoisting in Javascript

What is Hoisting?

Hoisting refers to the process whereby the interpreter appears to move var variables, function declarations and class declarations to the top of the code before execution.

var variables, function declarations and class declarations can thus be referenced before they are declared in javascript.

console.log(username); // Output: undefined

sayHi(); // Output: Hi, Shubham!

var username = 'shubham';

function sayHi() {
    console.log("Hi, Shubham!")
}

// let and const variables

console.log(username); // throws ReferenceError [Reason:- let in TDZ]
console.log(age); // throws ReferenceError [Reason:- const in TDZ]

let username = 'shubham';
const age = 25;

// function expressions

func1(); // Error [Reason:- undefined()]
func2(); // Error [Reason:- let in TDZ]
func3(); // Error [Reason:- const in TDZ]

var func1 = function() {
    console.log('I am func1.')
};

let func2 = function() {
    console.log('I am func2.')
};

const func3 = function() {
    console.log('I am func3.')
};

Logic behind hoisting behaviors?

Javascript code is executed in 2 phases viz. first, memory creation phase and second, code execution phase.

Happy reading!