DEV Community

Kushaga Agnihotri
Kushaga Agnihotri

Posted on

1 1 1

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();
Enter fullscreen mode Exit fullscreen mode

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! 🚀🎉

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)