TypeScript vs JavaScript: Why Developers Choose TypeScript

🚀 Day 20 – Promises in JavaScript Today I learned how JavaScript handles asynchronous operations using Promises. 💡 What is a Promise? A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation. It has 3 states: 🔹 Pending 🔹 Fulfilled 🔹 Rejected 🧠 Why Promises Are Important Before Promises, we used nested callbacks (callback hell 😵). Promises make async code: Cleaner More readable Easier to debug Chainable 🔥 Key Things I Learned ✔ .then() handles success ✔ .catch() handles errors ✔ .finally() runs no matter what ✔ Promises execute before setTimeout in the event loop (microtasks vs macrotasks) 🎯 Real-World Usage Promises are used in: API calls (fetch) Database requests Timers Authentication systems React applications Understanding Promises helped me connect everything about: Event Loop + Async behavior + Microtask Queue. 💪 My Takeaway Async JavaScript is not magic — It’s structured and predictable once you understand how it works. One step closer to becoming a strong frontend developer 🚀 #JavaScript #FrontendDeveloper #Promises #WebDevelopment #LearningInPublic #100DaysOfCode

Why I switched from js-joda to date-fns for Date and Time 🤔 📅 On my last project, we were using two different date and time libraries: js-joda and date-fns. This made the code harder to read and support: two different APIs, two ways to work with dates, extra conversions. I decided we should keep only one library and chose date-fns. Here’s why date-fns worked better for us: ▪️Simple, functional API With date-fns you just call functions like addDays(date, 3) or format(date, 'dd.MM.yyyy'). You work with the native Date object, which is familiar to any JavaScript developer. ▪️Easier for new developers New people don’t have to learn js-joda types like LocalDate or ZonedDateTime. It’s much faster to start writing code when you only use Date + small helper functions. ▪️Less boilerplate and conversions Before, we often had to convert between js-joda objects and Date. With date-fns everything stays in one format, so there is less extra code and fewer mistakes. ▪️Good for bundle size date-fns supports tree-shaking 🔥 You import only the functions you actually use, so the bundle stays smaller. ▪️Lots of examples and community It’s easy to find examples, answers, and snippets for date-fns online. That saves time when you need to solve common tasks with dates and time. After we switched fully to date-fns, the codebase became more consistent and easier to maintain. 👍 📝 Sometimes the best choice is not the "most powerful" library, but the one that keeps the project simple and clear for the whole team. #React #JavaScript #TypeScript #Frontend #Date #DateTime

CommonJS vs ES Modules in Node.js — a practical takeaway. While working on a backend project recently, I ran into an error that did not make sense at first. While debugging it, I realized the issue was not with the logic, but with how modules were being handled. That is what led me to look more closely at the difference between CommonJS and ES Modules. Both solve the same problem of sharing code across files, but they do it in very different ways. CommonJS is the original module system used by Node.js. It relies on require and module.exports, loads modules at runtime, and is still widely used in older codebases. ES Modules, on the other hand, are part of the official JavaScript standard. They use import and export, and follow the same syntax used in modern browsers. What stood out to me is that the difference is not just about syntax. ES Modules encourage clearer structure, better tooling support, and stronger alignment with the modern JavaScript ecosystem. Once enabled, Node enforces stricter module boundaries, which helps with maintainability as projects grow. For a new backend project, especially one intended to scale, ES Modules felt like the better choice. It also brings consistency across frontend and backend code. Running into that error turned into a useful learning moment. Understanding this distinction early saved me debugging time and helped me structure the project more cleanly going forward. #NodeJS #JavaScript #BackendDevelopment #LearningByBuilding #SoftwareEngineering

🧠 Call Stack, Queues & Task Types — The Foundation of Async JavaScript To understand async behavior in Node.js, you need to know four core parts: • Call Stack • Callback Queue • Microtask Queue • Macrotask Queue Let’s break them down simply. 📍 Call Stack — Where code executes The Call Stack is where JavaScript runs functions. It follows one rule: 👉 Last In, First Out (LIFO) Example: function one() { two(); } function two() { console.log("Hello"); } one(); Execution: • one() pushed • two() pushed • console.log() runs • two() removed • one() removed If the stack is busy, nothing else can run. ⚡ Microtask Queue (Higher Priority) This queue is more important than the macrotask queue. Examples: • Promise.then() • queueMicrotask() • process.nextTick() (Node-specific) Microtasks run: 👉 Immediately after the stack becomes empty 👉 Before any macrotask runs 📬 Callback Queue (Macrotask Queue) This is where async callbacks wait. Examples: • setTimeout • setInterval • setImmediate These do NOT go to the stack directly. They wait in the Macrotask Queue. 🔄 Execution Order Rule Every cycle: 1️⃣ Run synchronous code (Call Stack) 2️⃣ Empty all microtasks 3️⃣ Run one macrotask 4️⃣ Repeat This priority system is why Promise callbacks run before setTimeout. 🎯 Key Insight JavaScript isn’t “randomly async”. It follows a strict priority system: Call Stack → Microtasks → Macrotasks #Nodejs #Javascript #Backenddevelopment #Webdevelopment #LearningByDoing

Most JavaScript developers use async features every day — setTimeout, fetch, Promises — but the behavior can still feel confusing until the Event Loop becomes clear. JavaScript runs on a single thread using a Call Stack. When asynchronous operations occur, they are handled by the runtime (browser or Node.js), and their callbacks are placed into a queue. The Event Loop continuously checks: 1️⃣ Is the Call Stack empty? 2️⃣ Is there a callback waiting in the queue? If the stack is empty, the next callback moves into the stack and executes. Example: setTimeout(() => console.log("A"), 0); console.log("B"); Output: B A Even with 0ms, the setTimeout callback runs after the current call stack clears. Understanding this small detail explains a lot of “unexpected” async behavior in JavaScript. Curious to hear from other developers here — What concept made the event loop finally “click” for you? #javascript #webdevelopment #nodejs #eventloop #asyncjavascript #reactjs #softwareengineering

🚀 Day 21 of My JavaScript Journey – Async/Await Today I learned how to write asynchronous JavaScript in a cleaner and more readable way using: 👉 Async / Await After understanding Promises, this felt like the missing piece. 💡 What I Understood Async/Await is built on top of Promises, but it makes asynchronous code look like synchronous code — which makes it much easier to read and maintain. 🔹 async makes a function return a Promise 🔹 await pauses execution until the Promise resolves 🔹 try...catch helps handle errors cleanly 🧠 Why This Is Powerful Instead of chaining multiple .then() calls, Async/Await allows writing structured, clean logic — especially when working with APIs. This is extremely useful for: Fetching data from APIs Handling backend responses Working with authentication Real-world React applications 🔥 Biggest Realization Understanding Async/Await made the Event Loop and Promises much clearer. Now I can confidently understand how: Call Stack → Web APIs → Microtasks → Event Loop → Async code execution all connect together. Every day I’m strengthening my JavaScript fundamentals step by step. Consistency and practice over shortcuts 💪 On to Day 22 🚀 #JavaScript #FrontendDeveloper #AsyncAwait #WebDevelopment #LearningInPublic #100DaysOfCode

🔹 JavaScript is single-threaded It can execute one task at a time. But then… how does it handle async operations like setTimeout, fetch, or user clicks? 🔹 Call Stack Every function you execute goes into the Call Stack. If the stack is busy, nothing else runs. Period. 🔹 Web APIs (Browser / Node Runtime) Functions like setTimeout, fetch, and DOM events are not handled by the JS engine itself. They’re delegated to Web APIs (in browsers) or runtime APIs (in environments like Node.js). 🔹 Callback Queue Once async operations complete, their callbacks move into the queue, waiting patiently. 🔹 Event Loop The Event Loop keeps asking one simple question: 👉 “Is the Call Stack empty?” If yes → it pushes the next task from the queue to the stack. That’s how JavaScript achieves asynchronous behavior — even though it’s single-threaded. 💡 When this concept clicks: ✔ Debugging becomes easier ✔ Promises stop feeling magical ✔ async/await finally makes sense ✔ Performance decisions become intentional If you're learning JavaScript — don’t skip this topic. It’s foundational. Question for developers 👇 When did the Event Loop finally “click” for you? #JavaScript #FrontendDevelopment #WebDevelopment #AsyncProgramming #SoftwareEngineering #DeveloperExperience

Functions are first-class citizens in JavaScript. 🚀 ❓ What real-world advantage does this give JS? In JavaScript, functions are treated like regular values. That means you can store them in variables, pass them as arguments, return them from other functions, and even store them in objects or arrays. 🔹 Simple example function greet(name) { return "Hello " + name; } function run(fn) { return fn("Isnaan"); } run(greet); // "Hello Isnaan" Here, the function greet is passed just like a value. This is possible because functions are first-class citizens. ✅ Real-world advantages Callbacks: Used in event handlers, timers, and APIs Reusability: Write generic logic and plug in different behaviors Async programming: Promises, then(), and async/await rely on functions Clean architecture: Helps build modular, maintainable code Frameworks like React, Node.js, and Express are built on this idea. Middleware, hooks, and event listeners all work because functions can be passed around freely. 💡 Takeaway: Because functions are first-class citizens, JavaScript is flexible, expressive, and perfect for building interactive and scalable applications #JavaScriptTips #ModernJavaScript #ES6 #DeveloperTips #CleanCode #JSDevelopers

🚨 If you think you “know JavaScript”… read this. Most developers don’t struggle with JavaScript because it’s hard. They struggle because they only learned the surface. They know: * `let` and `const` * Arrow functions * Async/await * Array methods But they don’t deeply understand: ⚠️ Closures ⚠️ Event loop ⚠️ Execution context ⚠️ Prototypes ⚠️ How memory actually works And that’s where the real power is. 💡 Here’s the truth: Frameworks change. JavaScript fundamentals don’t. React evolves. Next.js evolves. Node evolves. But if you understand: * How scope works * How asynchronous code is handled * How objects inherit * How the browser runtime behaves You can adapt to anything. 🧠 Example: Most developers use `async/await`. But do you truly understand: * What happens in the call stack? * How the microtask queue works? * Why blocking code freezes the UI? Senior developers don’t just write code. They understand *why* it works. 🔥 If you want to level up in JavaScript: 1️⃣ Read the MDN docs — not just tutorials 2️⃣ Build without a framework sometimes 3️⃣ Debug with `console` less, reasoning more 4️⃣ Learn how the browser and Node runtime actually execute your code Depth > Trend chasing. JavaScript isn’t confusing. It’s just misunderstood. If you're a JavaScript developer: 👉 What concept took you the longest to truly understand? Let’s learn from each other in the comments. #JavaScript #WebDevelopment #FrontendDeveloper #BackendDeveloper #FullStackDeveloper #Programming #SoftwareEngineering #NodeJS #ReactJS #DeveloperCommunity #CodingLife #LearnToCode