Day 5 of my JavaScript journey Today I went behind the scenes of JavaScript to understand how it works, and here is what I found; When you write JavaScript, it feels simple. You declare variables. You call functions. You await promises. The browser responds. Things move on the screen. But under the surface, there’s an entire engine working relentlessly to make that happen. JavaScript is a high-level language. This simply means you don't have to worry about managing your computer's memory or CPU manually. JavaScript quietly handles all of that for you in the background. That's one less thing to stress about as a beginner. It is also multi-paradigm. A paradigm is just a mindset or approach to writing code. And JavaScript doesn't force you into one way of thinking, you can structure your code in multiple ways depending on what the situation calls for. That flexibility is honestly one of the biggest reasons JavaScript is so popular. And then there's the concurrency model, how JavaScript handles multiple tasks at the same time even though it can only do one thing at a time. This is because, the "Event Loop" constantly checks: is the call stack empty? if yes, move the next task from the queue to the stack #JavaScriptJourney #LearningToCode

🧠 Ever wondered how JavaScript actually runs your code? Behind the scenes, JavaScript executes everything inside something called an Execution Context. Think of it as the environment where your code runs. 🔹 Types of Execution Context JavaScript mainly has two types: 1️⃣ Global Execution Context (GEC) Created when the JavaScript program starts. It: - Creates the global object - Sets the value of this - Stores global variables and functions - There is only one Global Execution Context. 2️⃣ Function Execution Context (FEC) Every time a function is called, JavaScript creates a new execution context. It handles: - Function parameters - Local variables - Inner functions Each function call gets its own context. 🔹 Two Phases of Execution Every execution context runs in two phases: 1️⃣ Memory Creation Phase JavaScript allocates memory for: - Variables - Functions (This is where hoisting happens) 2️⃣ Code Execution Phase Now JavaScript runs the code line by line and assigns values. 💡 Why This Matters Understanding execution context helps you understand: - Hoisting - Scope - Closures - Call Stack - Async JavaScript It’s one of the most important concepts in JavaScript. More deep JavaScript concepts coming soon 🚀 #JavaScript #ExecutionContext #Frontend #WebDevelopment #LearnJS #Programming #LearningInPublic

Is the Node.js event loop the key to understanding how JavaScript works? Before you answer, TAKE THIS QUICK TEST: * Do you know what goes into the call stack? * Can you clearly explain the difference between microtasks and macrotasks? * Do you know why Promise.then() runs before setTimeout(fn, 0)? * Can you explain it without drawing the famous diagram? 😄 If any of those made you pause… WELCOME TO THE CLUB. I learned the event loop early in my JavaScript journey. I could repeat the definitions. I used async/await daily. Everything worked. So I assumed I UNDERSTOOD it. Then I revisited “You Don’t Know JS” by Kyle Simpson and realized something humbling: There’s a difference between * USING JavaScript * UNDERSTANDING JavaScript * EXPLAINING JavaScript The event loop isn’t just an interview topic. It explains * Why logs appear in a certain order * Why blocking code freezes everything * Why async behaves the way it does * How JavaScript stays single-threaded but still feels concurrent Here’s the REAL TEST: If you can clearly explain the event loop to a beginner WITHOUT jargon, you probably understand JavaScript at a deeper level. So let’s make this interactive. In one or two sentences, how would you explain the event loop to someone new to JavaScript? Let’s see who REALLY knows it. 😄 #JavaScript #NodeJS #WebDevelopment #SoftwareEngineering #AsyncProgramming #100DaysOfCode

Most developers think closures are some kind of JavaScript “magic”… But the real truth is simpler—and more dangerous. Because if you don’t understand closures: Your counters break Your loops behave strangely Your async code gives weird results And you won’t even know why. Closures are behind: React hooks Event handlers Private variables And many interview questions In Part 7 of the JavaScript Confusion Series, I break closures down into a simple mental model you won’t forget. No jargon. No textbook definitions. Just clear logic and visuals. 👉 Read it here: https://lnkd.in/g4MMy83u 💬 Comment “CLOSURE” and I’ll send you the next part. 🔖 Save this for interviews. 🔁 Share with a developer who still finds closures confusing. #javascript #webdevelopment #frontend #programming #reactjs #learnjavascript #softwareengineering #coding #devcommunity

MAYBE IT’S TIME WE TALK ABOUT ONE OF THE MOST MISUNDERSTOOD KEYWORD IN JAVASCRIPT — this. You think you understand it… until it breaks in production. In OOP-style classes, 'this' is NOT determined by where a function is written. It is determined by HOW it is called. That’s why your class method suddenly becomes UNDEFINED when passed as a callback. Common headaches: - Losing context inside event handlers - setTimeout destroying your method binding - Writing .bind(this) everywhere - The old const self = this workaround Then ARROW FUNCTIONS came in. Arrow functions DO NOT have their own this. They inherit this from the surrounding scope. Result: - No manual binding - Cleaner class code - Less mental overhead - Fewer unexpected bugs But remember: - Arrow functions are not constructors - They don’t replace understanding execution context - They solve binding issues, not bad architecture REAL JAVASCRIPT MASTERY starts when you truly understand THIS — not when you memorize syntax. What was your most confusing THIS bug? #JavaScript #WebDevelopment #NodeJS #Frontend #Programming

🚀 Destructuring in JavaScript (Writing Cleaner Code) Destructuring is one of the simplest ways to make JavaScript code more readable and expressive. Here’s how I use it in practice 👇 🧠 Object Destructuring const person = { name: "Rahul", age: 25 } const { name, age } = person console.log(name, age) // Rahul 25 🧠 Array Destructuring const arr = [10, 20, 30] const [a, b, c] = arr console.log(a, b, c) // 10 20 30 ⚡ Where It’s Used in Real Projects • React props handling • API response parsing • Function parameters • State management 💡 Why It Matters • Cleaner and shorter code • Less repetition • Better readability 🎯 Takeaway: Good code isn’t just about solving problems — it’s about writing solutions that are easy to read and maintain. Focusing on writing more expressive and maintainable JavaScript. 💪 #JavaScript #WebDevelopment #FrontendDeveloper #CleanCode #MERNStack #SoftwareEngineering “Extract Values Easily with JavaScript Destructuring”

Day 2/100 – Understanding Closures in JavaScript Today I explored Closures — one of the most important concepts in JavaScript that directly impacts how modern frameworks like React work internally. ✅ What is a Closure? A closure is created when a function retains access to variables from its lexical scope, even after the outer function has finished execution. In simple terms: A function remembers the environment in which it was created. ✅ Why is it important in real-world applications? Closures are widely used in: • React hooks • Event handlers • Data encapsulation • Memoization • Maintaining private variables • Custom hook patterns A solid understanding of closures makes debugging and optimizing React applications much easier. 💻 Example: function createCounter() { let count = 0; return function () { count++; console.log(count); }; } const counter = createCounter(); counter(); // 1 counter(); // 2 Even after createCounter() has executed, the inner function still has access to “count”. That’s the power of closures. 📌 Key Takeaway: Closures are not just an interview topic — they are fundamental to writing predictable and maintainable JavaScript in production applications. #100DaysOfCode #JavaScript #ReactJS #FrontendDevelopment

Still Confused by 'this' Keyword In JavaScript ? Here's Your Cheat Sheet 🔥 JavaScript's this is a frequent pain point because its value depends entirely on execution context, not where you write it. In the global scope, this refers to the window object (browser). A regular function call sets this to the global object (or undefined in strict mode). When used as an object method, this points to the owning object. Arrow functions are different—they inherit this lexically from their surrounding scope, making them ideal for callbacks. Constructors (called with new) bind this to the new instance. Event listeners set this to the target element. Use .call(), .apply(), or .bind() for explicit control. Remember: "How is the function called?" is the only question that matters. #webdev #javascript #coding #programming #this #js #frontend #developer #tech #webdevelopment #softwareengineering #codenewbie #100DaysOfCode

Many beginners get confused between Synchronous vs Asynchronous JavaScript. #Day35 But the concept is actually very simple. Imagine this 👇 🏦 Synchronous JavaScript Like standing in a bank queue. One person finishes, then the next person starts. 👉 Code runs line by line 👉 Next task waits until the previous one finishes Example: console.log("Start"); console.log("Processing..."); console.log("End"); 🍔 Asynchronous JavaScript Like ordering food online. You place the order and continue doing other work. Food arrives later. 👉 JavaScript doesn't wait 👉 Other code runs while waiting Example: console.log("Start"); setTimeout(() => {  console.log("Hello after 2 seconds"); }, 2000); console.log("End"); Output: Start → End → Hello after 2 seconds 💡 Why Asynchronous is powerful? Because it helps handle: ⚡ API calls ⚡ Timers ⚡ Database requests ⚡ File loading without blocking the application. 🔥 If you are learning JavaScript or React, you MUST understand this concept. Next step after this is: • Callbacks • Promises • Async / Await • Event Loop Follow Arun Dubey for more related content! 💬 Question for developers Before today, did you clearly understand Synchronous vs Asynchronous JavaScript? Comment YES or NO 👇 #javascript #webdevelopment #reactjs #frontenddeveloper #coding