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! 🚀🎉
Top comments (0)