How JavaScript var, let, and const behave differently

🚀 Understanding Hoisting in JavaScript Ever wondered how you can use a variable or function before it’s declared? 🤔 That’s because of Hoisting! In JavaScript, hoisting means that variable and function declarations are moved to the top of their scope during the compile phase — before the code actually runs. 🧠 Example: greet(); // ✅ Works! function greet() { console.log("Hello, World!"); } Here, the function greet() is hoisted to the top — that’s why you can call it even before it’s defined. But be careful with variables 👇 console.log(x); // ❌ undefined var x = 10; Variables declared with var are hoisted but not initialized, so they exist but hold undefined. However, variables declared with let and const are also hoisted but stay in the Temporal Dead Zone (TDZ) until they’re actually declared. 📌 In short: Functions → hoisted with their definitions ✅ var → hoisted but undefined ⚠️ let & const → hoisted but inaccessible until declared 🚫 #javascript #frontend #webdevelopment

🚫 The Temporal Dead Zone (TDZ) — the real reason let and const behave differently in JavaScript ⚡ Ever wondered why you get a ReferenceError when accessing a let or const variable before it’s declared — but not with var? It all comes down to something called the Temporal Dead Zone (TDZ) 🧠 Let’s break it down 👇 🧩 1. What’s the TDZ? When a scope (like a block or function) is entered, variables declared with let and const are hoisted — but they’re placed in a “temporal dead zone” from the start of the block until their actual declaration line. Accessing them before they’re initialized throws a ReferenceError. ⚙️ 2. Why var behaves differently var variables are also hoisted — but they’re initialized to undefined immediately, so you can access them before their declaration (even though that’s often a bad idea 😅). 💡 In short: The TDZ helps JavaScript enforce better coding practices by preventing access to variables before they’re safely initialized. ✨ Takeaway: Next time you see a ReferenceError for let or const, remember — it’s not a bug, it’s JavaScript protecting you from unpredictable behavior. 💪 #JavaScript #WebDevelopment #CodingTips #Frontend #ES6 #JSInsights

🤔 What do you guys think — do let and const allow hoisting in JavaScript? Most people would say no, but the real answer is... Yes, they do! 💡 Both let and const are hoisted in JavaScript — but not in the same way as var. Here’s the catch 👇 When the JavaScript engine runs your code, it creates a Execution context — this includes a separate memory space for variables declared with let and const. Unlike var, which gets initialized with undefined in the global memory, let and const are placed in a different memory (block scope) but not initialized immediately. That’s why if you try to access them before their declaration, you’ll get a ReferenceError ⚠ and not undefined. This time between hoisting and initialization is called the 𝐓𝐞𝐦𝐩𝐨𝐫𝐚𝐥 𝐃𝐞𝐚𝐝 𝐙𝐨𝐧𝐞 (𝐓𝐃𝐙) . --- 💡 Example console.log(x); // ReferenceError ❌ let x = 5; Here, x is hoisted but not yet initialized — it’s in the Temporal Dead Zone from the start of the block until its declaration line. --- 🧠 In Simple Terms ✅ var → hoisted & initialized with undefined ⚠ let / const → hoisted but not initialized → Temporal Dead Zone 💬 Accessing them before declaration → ReferenceError --- ✨ Quick Tip To avoid TDZ issues: > Always declare your variables at the top of their scope before using them. --- 💬 JavaScript hoisting can be tricky — it’s not about whether variables are lifted, but when and where they get initialized in memory. #JavaScript #WebDevelopment #Frontend #LearningJourney #TemporalDeadZone #LexicalEnvironment #Hoisting #JSConcepts

Ever get an interview question that seems simple but hides a tricky JavaScript concept? "What's the output of `setTimeout(() => console.log(1), 0); console.log(2);`?" is a classic. The answer isn't "1, then 2." It’s a great test of your understanding of the event loop. 🧠 The `setTimeout` callback, even with a zero-millisecond delay, gets pushed to the Web API and then the callback queue. The JavaScript engine runs all synchronous code on the call stack 𝐟𝐢𝐫𝐬𝐭. So, `console.log(2)` executes immediately. Only after the stack is clear does the event loop pick up the `console.log(1)` from the queue. ⚡ It's a small detail that reveals a huge amount about how asynchronous JS actually works. Have you struggled with this before? #WebDevelopment #DeveloperTips #CodingLife

🚀 JavaScript Hoisting Explained (Simply!) Hoisting means JavaScript moves all variable and function declarations to the top of their scope before code execution. If that definition sounds confusing, see this example 👇 console.log(a); var a = 5; Internally, JavaScript actually does this 👇 var a; // declaration is hoisted (moved up) console.log(a); a = 5; // initialization stays in place ✅ Output: undefined --- 🧠 In Short: > Hoisting = JS reads your code twice: 1️⃣ First, to register variables & functions 2️⃣ Then, to execute the code line by line --- 💡 Tip: var → hoisted & initialized as undefined let / const → hoisted but not initialized (stay in Temporal Dead Zone) --- #JavaScript #Hoisting #WebDevelopment #CodingTips #JSInterview #Frontend #React #100DaysOfCode

JavaScript Closure are very confusing topic. 🙃 as people interpret the subject as being function inside a function. while partially true, it is lacking a bit more substance. so I will try my best to simplify it. 🤔 Closures are simply a scope that remembers its own surroundings or a scope with its own playground. it will have its own functions, variables, and everything this scope needs to function. to call it, you will have to invoke the function inside the function itself to be able to get a callback. Simply put: function outerFunc(outerVar) { return function innerFunc(innerVar) { console.log("This is the outer var: " + outerVar); console.log("This is the inner var: " + innerVar); } } to invoke the inner function, make sure to call it. but also remember, even if the outer function finished execution, everything will still be available in memory for the inner function to run. 😊👍

💛 𝗗𝗮𝘆 𝟮 — 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁: 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀, 𝗦𝗰𝗼𝗽𝗲, 𝗮𝗻𝗱 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴 Today, I revisited one of the most confusing yet powerful concepts in JavaScript — 𝗵𝗼𝗶𝘀𝘁𝗶𝗻𝗴 and 𝘀𝗰𝗼𝗽𝗶𝗻𝗴. 🧠 💡 𝗖𝗼𝗻𝗰𝗲𝗽𝘁: JavaScript moves all declarations to the top of their scope during compilation — this is known as hoisting. However, the behavior differs based on whether you use var, let, const, or functions. 💻 𝗖𝗼𝗱𝗲 𝗦𝗻𝗶𝗽𝗽𝗲𝘁: console.log(a); // undefined (hoisted) var a = 10; console.log(b); // ❌ ReferenceError (in TDZ) let b = 20; sayHello(); // ✅ Works — function declarations are hoisted function sayHello() { console.log("Hello from a hoisted function!"); } // ❌ Error: sayHi is not a function sayHi(); var sayHi = function () { console.log("Hi from function expression!"); }; 🧩 𝗘𝘅𝗽𝗹𝗮𝗻𝗮𝘁𝗶𝗼𝗻: 0. var is hoisted and initialized with undefined. 1. let and const are hoisted but stay uninitialized in the temporal dead zone (TDZ). 2. Function declarations are fully hoisted, so you can call them before defining. 3. Function expressions (especially when assigned to var) behave like variables — hoisted but not initialized. 📈 𝗦𝗰𝗼𝗽𝗲 𝗪𝗶𝘀𝗱𝗼𝗺: var → function scope let & const → block scope Functions → create their own local scope 🔥 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: Understanding how JavaScript creates and executes contexts will help you debug faster and think more like the JS engine itself. #JavaScript #100DaysOfCode #Hoisting #Scope #Functions #FrontendDevelopment #LearningEveryday

🚀 JavaScript Trick of the Day! const a = { valueOf: () => 2 * 1 }; console.log(2 + a); // What’s the output? 💡 Answer: 4 Why? When using +, JavaScript tries to convert objects to a primitive. Since the object has a custom valueOf(), JS uses that → returns 2. So: 2 + 2 = 4. 🧠 A reminder that JavaScript type coercion can be surprising — but powerful when understood! #JavaScript #WebDevelopment #CodingTips #100DaysOfCode #JSInterviewPrep

The JavaScript filter() method is a powerful way to create a new array containing only the elements that meet a certain condition. It goes through each item in the array and returns the ones that pass the test you provide. For example, to get all even numbers from an array: javascript const numbers = [1, 2, 3, 4, 5]; const evens = numbers.filter(num => num % 2 === 0); console.log(evens); // Output: [2, 4] Use filter() whenever you need to sift through data and extract only what’s relevant, making your code more declarative and concise! #JavaScript #WebDevelopment #CodingTips #ArrayMethods