Discover JSViz: Visualize JavaScript Code Execution

🟦 Day 176 of #200DaysOfCode Today’s focus was on merging objects in JavaScript using Object.assign() — a powerful and clean way to combine data structures efficiently. 🔧 What I built: A function that takes two objects (provided through user input), merges them into a single object, and returns the combined result. 🧠 Key Concepts Practiced • Dynamic object creation • Accepting user input • Merging objects with Object.assign() • Understanding how property overwrite works 🚀 Why merging objects matters? Merging or shallow-copying objects is extremely useful in real-world applications: ✅ Combining configuration settings ✅ Merging user profiles & updates ✅ Working with API responses ✅ State management (React/Redux workflow) 💡 Learning takeaway: Small utilities like Object.assign() simplify development. But more importantly — they deepen our understanding of how JavaScript handles references, immutability, and merging behavior. Master the basics. Build confidently. #JavaScript #176DaysOfCode #WebDevelopment #CodingChallenge #LearnInPublic #ProblemSolving #DeveloperMindset #LogicBuilding #ObjectOrientedProgramming

🚦 Understanding the JavaScript Event Loop: A Story You’ll Remember The first time I saw this little piece of code, I was confused: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); console.log("End"); And the output was: Start End Timeout Wait… why “Timeout” after “End”? Didn’t I set the delay to 0? For me, that was the moment I realized JavaScript has its own rhythm. It doesn’t just run line by line - there’s an invisible system deciding when things happen. That system is called the event loop. Imagine you’re standing at a traffic signal on a narrow one-lane road. Only one car can pass at a time. Each car waits for the one in front to move before it can go. That’s exactly how JavaScript works with its call stack. When you call a function in JavaScript, it’s like a car entering that road. The engine pushes the function onto the call stack. When the function is done, the car exits, making way for the next one. So if I write: function greet() { console.log("Hello"); } greet(); console.log("Done"); It’s just cars moving in ord https://lnkd.in/ggD_YdTq

🚦 Understanding the JavaScript Event Loop: A Story You’ll Remember The first time I saw this little piece of code, I was confused: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); console.log("End"); And the output was: Start End Timeout Wait… why “Timeout” after “End”? Didn’t I set the delay to 0? For me, that was the moment I realized JavaScript has its own rhythm. It doesn’t just run line by line - there’s an invisible system deciding when things happen. That system is called the event loop. Imagine you’re standing at a traffic signal on a narrow one-lane road. Only one car can pass at a time. Each car waits for the one in front to move before it can go. That’s exactly how JavaScript works with its call stack. When you call a function in JavaScript, it’s like a car entering that road. The engine pushes the function onto the call stack. When the function is done, the car exits, making way for the next one. So if I write: function greet() { console.log("Hello"); } greet(); console.log("Done"); It’s just cars moving in ord https://lnkd.in/ggD_YdTq

We’ve all been there debugging a perfectly fine API response... only to realize your data is failing validation because of a few invisible spaces. These trailing spaces can silently break string comparisons, UI bindings, and even backend validations. So, I wrote a simple recursive utility in JavaScript to clean them deeply. 🧹 𝗪𝗼𝗿𝗸𝘀 𝗳𝗼𝗿: Nested objects Arrays Deeply nested strings 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝗲𝗿𝘀 𝗹𝗼𝘃𝗲 𝗮𝘀𝗸𝗶𝗻𝗴 𝗮𝗯𝗼𝘂𝘁: Recursion Object traversal Data normalization or deep cloning This question can easily appear as: “Write a function to remove spaces from all string values in a nested object.” #JavaScript #WebDevelopment #CodingTips #Frontend

🚀 #Day5Challenge – Deep Dive into Closures, Async/Await, Scopes & Lexical Environment. Today was all about connecting the dots between some of JavaScript’s most powerful (and tricky) concepts — Closures, Async/Await, Scopes, and the Lexical Environment. It’s the day where everything started to make sense. 🧠 🔹 Closures I explored how functions remember their outer variables — even after the parent function finishes execution. Closures taught me the real meaning of JavaScript’s memory behavior — how inner functions carry a reference to their outer scope, not just a copy. It’s the reason behind features like private variables, event handlers, and data encapsulation. 🔹 Lexical Environment & Scope I understood how each function forms its own lexical environment — a space where variables live and can be accessed by nested functions. Now I can clearly visualize how the scope chain works — how JS searches variables layer by layer (local → outer → global). No more confusion between block scope and function scope! 🔹 Async / Await Then came the twist — bringing Closures and Async/Await together! I learned how async functions still preserve their lexical scope while waiting for promises to resolve. Even when code execution pauses with await, the closure’s context remains intact — that’s how JavaScript ensures continuity and consistency. Today’s biggest win: “I stopped memorizing JavaScript behavior — and started understanding how it thinks.” #Day5Challenge #JavaScript #Closures #AsyncAwait #LexicalEnvironment #Scopes #FrontendDevelopment #WebDevelopment #CodingChallenge #JavaScriptLearning #AsyncJS #DeveloperJourney #CodeWithLogic

This week, I dove deep into some powerful concepts that shape how JavaScript really works under the hood: �� Functions – The building blocks of logic and reusability 🔹 Callback Functions – Passing logic as arguments for asynchronous magic 🔹 Code Execution & Hoisting – Understanding how JS reads and lifts declarations 🔹 Closures – Capturing scope and creating private variables like a pro 🔹 Higher-Order Functions – Functions that take or return other functions

“A ‘for’ loop that forgot to fill its blanks 🧩” I’ve always been fond of empty statements, but this time, I found something even more curious — An empty expression inside a for loop! 🤯 We’re all familiar with loops like this 👇 for (let i = 0; i < 5; i++) { console.log(i); } But did you know JavaScript allows a loop to run even when one of its expressions is completely missing? 😮 For example 👇 let i = 0; for ( ; ; ) { if(i==5){ break; } console.log(i++); } Here’s why this works so beautifully 🔍👇 👉 1️⃣ Flexible structure: The for loop doesn’t require all three expressions — initialization, condition, and increment are optional. 👉 2️⃣ Power of control: You can move parts like initialization or increment outside or inside the loop body — giving you freedom to control logic more precisely. 🧠 👉 3️⃣ Clarity through simplicity: By skipping the increment part, your focus is solely on the condition. This makes the loop’s intent clearer and the code cleaner — a real example of “Less is more.” 💡 So next time you spot a for loop with an empty expression, don’t rush to call it incomplete — it might just be showing you that silence in code can still speak logic! 😎 #JavaScript #ForLoop #CodingTips #WebDevelopment #CleanCode #ProgrammingHumor #DevelopersCommunity #LearnJavaScript #CodeWisdom

🚀 Day 59 of DSA Journey — Stack & Queue Operations in JavaScript Today I explored how Stacks and Queues actually work under the hood using JavaScript Arrays! Understanding these fundamentals helps in building a strong foundation for solving real-world problems efficiently 💪 🧱 Stack (LIFO – Last In, First Out) The last element added is the first to come out — just like stacking plates 🍽️ Common Operations → Push: Add an element to the top Pop: Remove the top-most element Peek/Top: View the top-most element without removing it let stack = []; stack.push(1); stack.push(2); stack.push(3); console.log(stack); // [1, 2, 3] stack.pop(); // Removes 3 stack.pop(); // Removes 2 console.log(stack); // [1] stack.push(7); // [1, 7] // Top element let top = stack[stack.length - 1]; console.log(top); // 7 ⚠️ Note: Avoid directly accessing elements like stack[3] — always use push, pop, and peek to follow the stack discipline. Queue (FIFO – First In, First Out) The first element added is the first to come out — like standing in a ticket line 🎟️ Common Operations → Enqueue: Add element to the end Dequeue: Remove element from the front Peek/Front: View the front element let q = []; q.push(1); q.push(2); q.push(3); console.log(q); // [1, 2, 3] // Remove from front q.shift(); // Removes 1 // Peek let front = q[0]; console.log(front); // 2 ⚠️ Note: Avoid using q.pop() — it removes from the end and breaks queue logic. 💡 Takeaway Both Stack and Queue can be implemented using arrays in JavaScript — the key lies in using the correct operations to maintain their order behavior 🧩 Feeling more confident building logic with these core structures! #Day59 #DSA #JavaScript #LearningInPublic #Stack #Queue #CodingJourney #100DaysOfCode #ProblemSolving

🚀 Day 26 — JavaScript Foundations: var, let, const & Core Interactions 💻⚡ Today’s session deepened my understanding of JavaScript fundamentals — how data is declared, stored, and interacted with at the most essential level. 💡 Topics Covered: • Difference between var, let, and const — scope, re-declaration, and modern best practices • Hands-on with prompt( ), alert( ), and console.log( ) — understanding how data flows between user and browser • Real-world logic on how browsers interpret and execute scripts • Setting the foundation for DOM interactions and event-driven programming ✨ Each line of code felt like unlocking a new layer of control — from dynamic user input to precise debugging insights. The fundamentals may look simple, but they form the core muscle of every advanced JS concept. This is where true coding confidence begins. 💪 #JavaScript #FrontendDevelopment #FullStackDeveloper #CodingJourney #WebDevelopment #LearnInPublic #BuildInPublic #WebProgramming #SoftwareEngineering #Innovation #TechLearning #JavaScriptFundamentals #ProgrammingBasics #6MonthChallenge