Demystifying Hoisting in JavaScript😵

Introduction:
Ever felt the JavaScript jitters when things don't quite go as expected? Let's dive into the delightful yet tricky world of hoisting! 😅

The Common JavaScript Headache 😩:
Picture this: You're coding away, and suddenly, variables misbehave, functions dance out of order, and chaos reigns supreme. This is the mysterious realm of hoisting, a source of befuddlement for many developers. 😱

Let's Get Down to Code Business:


// Declarations
console.log('Before');

// Variables declared with var have 'undefined' before initialization
console.log('a:>', a); // undefined

// Variables declared with let|const give error if used before initialization
// Uncomment to see behavior with not initialized variables
// console.log('b:>', b); // Not Initialized
// console.log('c:>', c); // Not Initialized

//Will work fine because Functions declared with function keyword get Initialized during memory allocation
console.log('d:>', d); //Function d

// Functions declared with let|const give error if used before initialization
// Uncomment to see behavior with not initialized variables
// console.log('e:>', e); // Not Initialized
// console.log('f:>', f); // Not Initialized

// Variables declared with var have 'undefined' before initialization
console.log('g:>', g); // undefined
console.log('h:>', h); // undefined

// Functions declared with let|const give error if used before initialization
// Uncomment to see behavior with not initialized variables
// console.log('i:>', i); // Not Initialized
// console.log('j:>', j); // Not Initialized


//Will work fine because Functions declared with function keyword get Initialized during memory allocation
d(); 


// Variable Assignments
var a = 'A';
let b = 'B';
const c = 'C';

// Function Declarations
function d() {
  console.log('D');
}

let e = () => console.log('E');
const f = () => console.log('F');
var g = () => console.log('G');
var h = function () {
  console.log('H');
};
let i = function () {
  console.log('I');
};
const j = function () {
  console.log('J');
};


// Execution
console.log('After');
console.log('a:>', a);
console.log('b:>', b);
console.log('c:>', c);
console.log('d:>', d);
console.log('e:>', e);
console.log('f:>', f);
console.log('i:>', i);
console.log('j:>', j);
d();
e();
f();
g();
h();
i();
j();

Breaking Down the Magic:
Memory Allocation and Code Execution 🤖:

Before the code runs, JavaScript allocates memory for variables and functions.
During execution, it hoists declarations to the top but not assignments. 🕵️‍♂️

What is Hoisting? 🚁:
Hoisting is like the backstage crew of a play. It lifts declarations to the top, making variables and functions accessible even before they're formally introduced. 😎

Types of Variables Take the Stage:

var: Strolls in late, introduces itself as 'undefined' before assignment.
let|const: Guarded and don't show up until officially declared.
function: Star of the show! Takes the spotlight right from the start.

Conclusion:
JavaScript, with its quirks and surprises, keeps us on our toes. Understanding hoisting is like having a backstage pass to the language's inner workings. So, embrace the hoist and code on! 🚀🎉

Blog

Demystifying Hoisting in JavaScript😵

Kushaga Agnihotri

Join Our Newsletter. No Spam, Only the good stuff.

Related