Do you really know about Hoisting?

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. All variable and function declarations are hoisted to the top of their scope

function hoist() {
a = 20;
var b = 100;
}

console.log(a); // error a is not defined

hoist();

console.log(a); // 20 a becomes global variable
console.log(b); // error b is not defined (it is defined in hoist method scope not global)

Difference between var, let and const in terms of hoisting

All the types var, let and const get hoisted but there is a difference in the default value with which they get hoisted like in var they get hoisted with undefined value but in case of let and const they don't initialize with any value.

console.log(x); // undefined
var x = 10;
var x;
console.log(x);
x = 10;
function getName() {
console.log(name);
var name = "Max";
}

getName(); // undefined
function getName() {
var name = "Max";
console.log(name);
}

getName(); // Max
console.log(age); // Output: ReferenceError: age is not defined ...
let age = 25;
let age;
console.log(age); // undefined
age = 25;
console.log(age); // Output: ReferenceError: age is not defined ...
const age = 25;
const age;  // Missing initializer in const declaration

Hoisting Functions

A function can declassify into 2 parts in terms of hoisting :

Function declaration

In a function declaration , the function is defined without a new variable like

function print(var name) {
console.log(name);
}
print("Alax");  // Alax

function print(var name) {
console.log(name);
}

Functional expression

In this, a function is assigned to a new variable

let printFn = function(var name) {
console.log(name);
}
printFn();   //Output: "printFn: expression is not a function

let printFn = function(var name) {
console.log(name);
}

Order of precedence

Function declarations take precedence over variable declarations. Variable assignments take precedence over function declarations

var name = "Tom";

function name() {
console.log("Harry");
}

console.log(typeof name); // string (variable assignment take precedence)
// 2nd Examplevar name;

function name() {
console.log("Harry");
}

console.log(typeof name); // function (function declaration take precedence)

Hoisting Classes

Hoisting classes are the same as function hoisting. It also has 2 types

Class declarations

Much like their function counterparts, JavaScript class declarations are hoisted. However, they remain uninitialized until evaluation. This effectively means that you have to declare a class before you can use it.

var name = fullName();
name.firstName = "Sourav";
name.lastName = "Ganguly";
console.log(name); // Reference error!!!

class fullName {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
class fullName {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}

var name = fullName();
name.firstName = "Sourav";
name.lastName = "Ganguly";
console.log(name); // Output {firstName: "Sourav", lastName: "Ganguly"}

ClassExpression

Much like their function counterparts, class expressions are not hoisted.

var name = getFullName();
name.firstName = "Sourav";
name.lastName = "Ganguly";
console.log(name); // TypeError!!! getFullName is not a constructor

var getFullName = class fullName {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
};

Full stack developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store