🧠 Day 4 of 21 days challenge JavaScript Hoisting 🤯 // var → undefined // let/const → error Why different behavior? Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their scope before execution. Only declarations are hoisted, not initializations. For easy understanding :- Hoisting = moving declarations to top var is hoisted with undefined let & const are hoisted but not initialized 👉 That’s why var gives undefined but let/const give error For example :- Normal code : console.log(score); // undefined var score = 90; JS will do this internally: var score; // first reserve console.log(score); // undefined score = 90; // then assign value This changed how I understand variable behavior 🚀 #JavaScript #Hoisting #Frontend

🧠 Day 3 of 21 days challenge JavaScript Event Loop 🤯 Event Loop is a mechanism in JavaScript that handles execution of asynchronous code. It continuously checks the call stack and callback queue. If the stack is empty, it moves tasks from the queue to the stack for execution. For example :- console.log("Start"); console.log("End"); console.log("Timeout"); Wait… why this order? Because JavaScript doesn’t run everything instantly. It uses: • Call Stack • Web APIs • Callback Queue Event Loop decides what runs next. 💤For easy understanding :- Event Loop = decides execution order Sync code runs first Async code waits in queue Then runs after the stack is empty 👉 That’s why “Timeout” runs last This changed how I understand async code 🚀 #JavaScript #EventLoop #Async

🚀 30 Days of JavaScript – Day 10 Today I built a small logical puzzle game called Bulls & Cows. The program generates a secret number and the player must guess it. After each guess, the program gives hints using Bulls (correct digit & position) and Cows (correct digit but wrong position). 🧠 Concepts Used: • loops • string indexing • conditional logic • problem-solving approach 🎥 Demo below 👇 Full source code in the comments. #JavaScript #CodingChallenge #ProblemSolving #WebDevelopment #LearningJavaScript

🚀 30 Days of JavaScript – Day 13 Today I built a Tip Calculator with Bill Split Feature. This tool calculates: • Tip amount • Total bill • Amount each person should pay when splitting the bill. 🧠 Concepts Used: user input handling arithmetic calculations variables and type conversion 🎥 Demo below 👇 Full source code in the First comment. #JavaScript #WebDevelopment #CodingJourney #LearningJavaScript #ProblemSolving

𝗖𝗿𝗮𝗰𝗸 𝘁𝗵𝗲 𝗖𝗼𝗱𝗲: 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱! 🤔 Ever seen code that works even though you call a function before defining it? That's the magic (and potential trap) of Hoisting! 🪄 Here is a simple breakdown of this essential JS concept: What is it? Think of it as the JavaScript engine giving your declarations a "lift." Before running your code, it moves function and variable declarations (not their values!) to the top of their scope. ⬆️ 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝘄𝗶𝘁𝗵 𝘃𝗮𝗿: These are hoisted and initialized to undefined. You can access them, but they won't have their values yet. 🤷♂️ 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝘄𝗶𝘁𝗵 𝗹𝗲𝘁 & 𝗰𝗼𝗻𝘀𝘁: These are hoisted but not initialized. Accessing them before they're defined throws an error—a safe space known as the Temporal Dead Zone (TDZ)! 🛑🚫 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀: Full function declarations are hoisted, allowing you to call them anywhere in their scope. (This is super convenient!) 🤩 Understanding hoisting is crucial for avoiding confusing bugs and writing cleaner, more predictable code. 🧱💻 Check out this diagram for a visual guide! #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #Hoisting #TemporalDeadZone #LearningToCode #WebDev

A brilliant interactive way to understand the JavaScript Event Loop 💡 If you've ever struggled with how the call stack, microtasks, and macrotasks interact, this visualization makes the concept much easier to grasp. It clearly shows how asynchronous JavaScript actually works behind the scenes, something that often feels abstract when you're just reading about it. Definitely worth a look! https://lnkd.in/dfgm_P3M

JavaScript is single-threaded… yet it handles timers, API calls, and user events at the same time. 🤯 How? Meet the Event Loop 🔁 — the system that keeps JavaScript running smoothly. Here’s the simple flow: 🧠 Call Stack – Executes synchronous code first 🌐 Web APIs – Handles async tasks like setTimeout, fetch, DOM events 📥 Queues – Completed tasks wait here to run But there’s a twist 👇 ⚡Microtask Queue (High Priority) Examples: Promise.then(), queueMicrotask() ⏳ Macrotask Queue (Lower Priority) Examples: setTimeout, setInterval, DOM events When the stack is empty, the Event Loop checks: 1️⃣ Microtasks first 2️⃣ Then Macrotasks Example: console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); Output 👇 1 → 4 → 3 → 2 Because Promises run before setTimeout. Understanding this small concept can save you hours of debugging async code.🚀 Yogita Gyanani Piyush Vaswani #JavaScript #WebDevelopment #AsyncProgramming #FrontendDevelopment #EventLoop #CodingConcepts

DAY 6 — Closures Are Silently Biting Your useEffect CLOSURES ARE SILENTLY BITING YOUR USEEFFECT Your useEffect is reading stale data. You didn't write a bug — JavaScript did. When useEffect captures a variable from its outer scope, it creates a closure — a snapshot of that value at the time the effect was created. If the variable changes later, the effect still sees the old value. This is the infamous "stale closure" problem. The fix: include all captured variables in the dependency array, or use useRef to hold a mutable reference that doesn't create a new closure. useEffect closures are snapshots, not live bindings. Your deps array is a contract — honour it. Have you been burned by stale closures before? #useEffect #Closures #ReactBugs #JavaScript

JavaScript Event Loop is simple… until it’s not ⚡ Most developers use setTimeout and Promise daily but don’t fully understand what happens behind the scenes. Let’s break it down 👇 💡 JavaScript is single-threaded 👉 Only one thing runs at a time ⚡ Execution order: Synchronous code (Call Stack) Microtasks (Promises, queueMicrotask) Macrotasks (setTimeout, setInterval, DOM events) 👉 Then the loop repeats 📌 Priority: Synchronous → Microtasks → Macrotasks 🧠 Example: console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); ✅ Output: 1 → 4 → 3 → 2 🔥 Why this matters: • Debug async issues faster • Avoid unexpected bugs • Write better React logic #JavaScript #FrontendDeveloper #ReactJS #CodingTips #WebDevelopment

One of the Best YouTube Videos on JavaScript Event Loop 🧑💻 The JavaScript Event Loop is one of the most important concepts to understand if you want to know how JavaScript handles asynchronous operations. I recently watched this video by Lydia Hallie and honestly, it’s one of the best explanations of the Event Loop on YouTube. She explains concepts like Call Stack, Web APIs, Task Queue and Microtask Queue in a very clear and visual way. If you want to understand how the Event Loop works, just watch this video once. Video: https://lnkd.in/gbg5PXQF #eventloop #javascript #webdevelopment #softwaredevelopment #learninpublic