JavaScript Reference Trap: Fixing API Calls with useMemo

🚨 JavaScript Hoisting – Something Most Developers Still Misunderstand Most developers say: 👉 “JavaScript moves variables to the top of the scope.” But that’s not actually what happens. Let’s test this 👇 console.log(a); var a = 10; Output: undefined Now try this: console.log(b); let b = 20; Output: ReferenceError: Cannot access 'b' before initialization 💡 Why the difference? Both var and let are hoisted. But the real difference is initialization timing. ✔ var is hoisted and initialized with undefined during the creation phase. ✔ let and const are hoisted but stay inside the Temporal Dead Zone (TDZ) until the line where they are declared. That’s why accessing them before declaration throws an error. 👉 So technically: JavaScript doesn’t “move variables to the top”. Instead, the JavaScript engine allocates memory for declarations during the creation phase of the execution context. Small detail. But it explains a lot of confusing bugs. 🔥 Understanding this deeply helps when debugging closures, scope issues, and async code. #javascript #frontend #webdevelopment #reactjs #coding #softwareengineering

"JS Fundamentals Series #3: Hoisting & Temporal Dead Zone(TDZ)" Ever wondered why "var" sometimes feels unpredictable, while "let" and "const" throws errors? "Here’s how JavaScript handles Hoisting & TDZ 👇" 👉 Hoisting: Many believe hoisting simply “brings variables and functions to the top of the scope.” But the real magic lies in the Execution Context and how the JS engine allocates memory. For var, memory is assigned during the creation phase with a default value of undefined. 👉 Temporal Dead Zone(TDZ): A special memory space where variables declared with let and const are stored. They exist but cannot be accessed until initialization. 🔹 Explanation var: - During memory creation, variables declared with var are assigned undefined. - They are hoisted and can be accessed even before initialization. let & const: - Stored in the TDZ and cannot be accessed before initialization. - let can be declared without an initial value. - const must be initialized at the time of declaration. 🔹 Example console.log(x); // undefined (hoisted var) var x = 10; console.log(y); // ReferenceError (TDZ) let y = 20; 🔹 Why It Matters - Explains why var is discouraged in modern JS. - Helps avoid subtle bugs when accessing variables too early. - Makes your code cleaner and more predictable. 💡 Takeaway: Understanding hoisting and TDZ ensures you use "let" and "const" correctly and debug with confidence. #JavaScript #WebDevelopment #Frontend #ReactJS #CodingTips #DeveloperCommunity #NamasteJS #LearningJourney #TechExplained #CareerGrowth

🚨 Is .then().catch() dead after try...catch in JavaScript? Short answer: No. Both are alive and useful. The real difference is how you structure asynchronous code. 🔹 1️⃣ Promise style — .then().catch() This was the original way to handle async operations with Promises. Example: fetch("/api/data") .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err)); ✅ Best when: You want simple promise chains Writing functional pipelines Handling single async operations 🔹 2️⃣ Async/Await style — try...catch Modern JavaScript introduced async/await, making async code look like synchronous code. Example: async function getData() { try { const res = await fetch("/api/data"); const data = await res.json(); console.log(data); } catch (err) { console.error(err); } } ✅ Best when: You have multiple sequential async calls You want cleaner, readable code Handling complex error flows 💡 Key Insight async/await is actually built on top of Promises. So .then() and .catch() are still working under the hood. 👉 It's not about which one is better. 👉 It's about which one fits the situation. 📌 Quick Rule Small async chain → .then().catch() Complex async logic → async/await + try...catch JavaScript keeps evolving, but understanding both patterns makes you a stronger developer. #javascript #webdevelopment #frontend #nodejs #asyncawait #promises #coding #softwaredevelopment #100DaysOfCode

🚀 JavaScript finally fixes one of its oldest problems — after ~30 years. If you’ve worked with JavaScript dates, you already know the pain: ❌ Timezone bugs ❌ Inconsistent parsing ❌ Unexpected date shifts ❌ Heavy reliance on external libraries For years, developers had to depend on tools like Moment.js, date-fns, and Luxon just to handle dates correctly. But now, things are changing. ✨ Introducing: Temporal API (built into JavaScript) Temporal is a modern date/time API designed to fix everything that was broken in "Date". 👉 Example: Old way (bug-prone): const booking = new Date("2026-03-10"); console.log(booking.toISOString()); // Output may shift based on timezone ❌ New way (predictable): const booking = Temporal.PlainDate.from("2026-03-10"); console.log(booking.toString()); // Always: 2026-03-10 ✅ 🔥 Why Temporal is a game changer: - No hidden timezone conversions - Immutable and predictable - Better support for real-world use cases (calendars, scheduling, etc.) - Reduces dependency on external libraries 💭 This is one of the biggest improvements in JavaScript’s core in years. If you’re a frontend or backend developer, it’s time to start exploring Temporal — it will soon become the new standard. #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering #TemporalAPI

Whether you are a seasoned dev or just typed your first console.log, JavaScript has a special way of making you question your own reality😋 One minute you are building a sleek UI and the next, you are staring at a screen wondering why [] == ![] evaluates to true🤔 Here are a few of the most "wait, what?" questions that keep engineers up at night :- 1. The Equality Enigma Why does typeof NaN return "number", but NaN === NaN is false ? It is the only value in JavaScript that isn't equal to itself. 2. The Truth About "Nothing" If null is an object (thanks to a legacy bug), and undefined is a type, why does null == undefined return true, but null === undefined return false ? 3. The Scoping Spiral The difference between var, let and const isn't just about reassignment - it is about the Temporal Dead Zone. Do you know why you can access a variable before it is declared with var but get a ReferenceError with let ? 4. The this Keyword The value of this depends entirely on how a function is called, not where it was defined. Unless, of course, you are using an arrow function, then the rules change again. Why does this matter? Understanding these quirks isn't just for winning Code Trivia. It is about: Debugging faster: Knowing how the engine actually thinks🤗 Writing cleaner code: Avoiding the pitfalls of loose equality and global scoping☺️ What is the most confusing JS behavior you have ever encountered? #JavaScript #WebDevelopment #CodingLife #SoftwareEngineering #Frontend

🚀 Understanding the JavaScript Event Loop (Microtasks vs Macrotasks) Consider this code: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); What’s the output? Many expect: Start Timeout Promise End But actual output is: Start End Promise Timeout Why? Because of the Event Loop. JavaScript handles tasks in two major queues: • Microtasks (Promises, queueMicrotask) • Macrotasks (setTimeout, setInterval) Execution order: 1️⃣ Synchronous code runs first 2️⃣ Microtasks run next 3️⃣ Then Macrotasks Even if setTimeout has 0ms delay, it still waits for the macrotask queue. Understanding this explains: • Why some async bugs feel “random” • Why Promises run before setTimeout • Why UI updates sometimes behave unexpectedly JavaScript isn’t single-threaded chaos. It’s single-threaded with a well-defined event model. Understanding the Event Loop changes how you debug async code. What async behavior confused you the most before learning this? #javascript #frontenddeveloper #webdevelopment #eventloop #softwareengineering

𝗦𝘁𝗼𝗽 𝘂𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗗𝗮𝘁𝗲 𝗼𝗯𝗷𝗲𝗰𝘁. 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗷𝘂𝘀𝘁 𝗴𝗿𝗲𝘄 𝘂𝗽. 🚀 If you’re in the web development space for more than a week, you’re probably aware of the pain: 1. Time zones that randomly shift. 2. Mutable dates that change when you least expect it. 3. The "Bundle Bloat" of including heavy libraries just to format a string. We’ve lived with Moment.js, date-fns, or Day.js for the past few years, thinking the "broken" native Date API would never be fixed. Well, that’s not the case anymore! Enter: 𝗧𝗵𝗲 𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗔𝗣𝗜. 🧠 It’s not just an update; it’s an architectural shift in the way JavaScript handles time. Here’s why I think it’s the way to go for my next project: ✅ Immutability by Default: No more bugs because some helper library changed your original date object. ✅ Wall-Clock Time: Better separation of "exact time" (UTC) and "calendar time" (local). ✅ No More Timezone Math: It handles DST transitions and offsets natively. ✅ Cleaner Syntax: const today = Temporal.Now.plainDateISO(); – readable, predictable, and powerful. The Bottom Line for Teams: If you adopt the Temporal API, you get smaller bundle sizes, fewer "timezone bugs," and an easier onboarding experience for new team members. Standardising the hard stuff is how we scale as an industry. Are you still team date-fns, or are you ready to go native with Temporal? 👇 #JavaScript #WebDevelopment #Coding #SoftwareEngineering #TechTrends #Frontend #JavaScript #WebDevelopment #SoftwareEngineering #Frontend #Coding #TechTrends #Programming #TemporalAPI #CleanCode #FullStack #SoftwareArchitecture #Productivity

🧠 Ever wondered how JavaScript keeps track of which function is running? JavaScript uses something called the Call Stack. Think of it like a stack of tasks where functions are added and removed as they execute. 🔹 How the Call Stack Works JavaScript follows a Last In, First Out (LIFO) rule. That means: The last function added to the stack is the first one to finish. Example function first() { second(); } function second() { third(); } function third() { console.log("Hello from third function"); } first(); What happens in the Call Stack 1️⃣ first() is pushed to the stack 2️⃣ second() is called → pushed to the stack 3️⃣ third() is called → pushed to the stack 4️⃣ third() finishes → removed from stack 5️⃣ second() finishes → removed 6️⃣ first() finishes → removed 🔹 Visualising the Stack Call Stack at peak: - third() - second() - first() - Global() Then it unwinds back to the Global Execution Context. 💡 Why This Matters Understanding the call stack helps you understand: - Execution order - Stack overflow errors - Debugging JavaScript - Async behaviour It’s one of the core mechanics of the JavaScript engine. Next post: The Event Loop 🚀 #JavaScript #CallStack #Frontend #WebDevelopment #LearnJS #Programming #LearningInPublic

Life evolves and so do the universe, evolution doesn’t stops in the trajectory of frontend where we as developers generalise new enhancements. A precisely intriguing feature of JavaScript arrived recently Temporal API which is explained below: 🚀 ✨JavaScript’s Temporal API finally deposes the flawed Date object, introducing a robust, immutable engine for time-series data. It eliminates "off-by-one" month errors and complex millisecond math with dedicated types like PlainDate and ZonedDateTime. Developers can now handle Daylight Saving Time transitions and IANA time zones natively without bulky external libraries. Its built-in comparison methods and duration arithmetic bring long-awaited precision to complex scheduling logic. This shift signifies a leap toward human-readable code that respects the nuances of global calendars. Say goodbye to Moment.js—the future of JavaScript time is type-safe, scalable, and standardized. The Magic in Action: The Magic in Action: ✨ // Adding 1 month to Jan 31st no longer "overflows" into March! 🏗️ const jan31 = Temporal.PlainDate.from('2026-01-31'); 🧪 const nextMonth = jan31.add({ months: 1 }); 📟 console.log(nextMonth.toString()); 💡 // Result: "2026-02-28" (Smart & Precise) #JavaScript #WebDev #Coding #TemporalAPI #SoftwareEngineering

⚡ 1-Minute JavaScript Safely access deeply nested object values with a tiny dot-path resolver. const getValue = (obj, path) => path.split(".").reduce((acc, key) => acc?.[key], obj); // Example data const data = { basicPolicyDetails: { policyNumber: "MOT-2026-000123" } }; // Usage getValue(data, "basicPolicyDetails.policyNumber"); 🔍 Why this pattern is useful: 🛡️ Prevents runtime crashes (thanks to optional chaining) 🔑 Works with dynamic keys 🧩 Perfect for config-driven UIs 📦 Lightweight and reusable ⚙️ Clean, functional approach Tiny utility. Massive leverage. #JavaScript #FrontendDevelopment #CleanCode #WebDevelopment #ReactJS