Built a Queue in JavaScript: FIFO Data Structure

🚀Today I learned: How JavaScript executes inside the browser! We all write JavaScript every day — but have you ever wondered what actually happens behind the scenes when we run our code? Here’s what I learned👇 🔹Step-by-step explanation: 1️⃣Source Code → We write JavaScript in a .js file — just plain text that browsers can’t execute directly. 2️⃣Parsing → The JavaScript engine reads the code, checks for syntax errors, and prepares it for further processing. 3️⃣AST (Abstract Syntax Tree) → The code is converted into an AST, a structured tree that represents the program logic in a machine-understandable format.🌳 4️⃣Interpreter → The AST is passed to the interpreter, which converts it into bytecode for quick startup and execution. 5️⃣Execution & Profiling → While executing bytecode, the engine tracks which parts of the code run most frequently — known as “hot” code. 6️⃣Optimizing Compiler (JIT) → The JIT (Just-In-Time) compiler takes that hot code and compiles it into machine code, making it much faster.⚡ 7️⃣Machine Code Execution → Finally, this optimized machine code runs directly on the CPU, giving JavaScript near-native speed and efficiency. 🧠In simple words: JavaScript uses both an Interpreter (for quick startup) and a JIT Compiler (for optimized performance). Really fascinating to see how much happens behind the scenes every time we run a simple JS file!✨ #TodayILearned #JavaScript #WebDevelopment #Frontend #Programming #V8Engine #LearningEveryday #10000coders #SudheerVelpula Special thanks to Sudheer Velpula Sir and @10000 Coders for the amazing learning journey and constant guidance🙌

Day 10 of #30DaysOfJavaScript: Boosting Performance with Memoization! ⚡️ Today, I dived into the powerful optimization technique of memoization, where a function remembers previous results to avoid redundant calculations. I built a generic memoize function that works seamlessly with different types of functions like sum, fib, and factorial. This approach not only improves efficiency but also sharpens the way recursive and repetitive logic is handled. Here’s a glimpse of my implementation: javascript function memoize(fn) { const cache = {}; let callCount = 0; function memoized(...args) { const key = JSON.stringify(args); if (!(key in cache)) { cache[key] = fn(...args); callCount++; } return cache[key]; } memoized.getCallCount = () => callCount; return memoized; } Why memoization matters: It drastically reduces the number of expensive function calls, especially in recursion-heavy scenarios. Using JSON.stringify to serialize arguments allows flexibility and accuracy in caching. Tracking cache misses through call counts offers valuable insight into optimization gains. This challenge reinforced the importance of smart caching and effective state management—skills essential for writing high-performance JavaScript in real-world applications. Feeling motivated to transform every challenge into learning milestones! If you’re on a similar learning path, let’s connect and grow together. #JavaScript #Memoization #CodeOptimization #LeetCode #WebDevelopment #Programming #CodingChallenge #ContinuousLearning

Think recursion is scary? Reversing an array takes just two lines-and the logic is cleaner than you expect 🎯 Let me break down how recursion reverses an array step by step - this'll change how you think about problem-solving! 💪 𝐓𝐡𝐞 𝐓𝐰𝐨-𝐋𝐢𝐧𝐞 𝐌𝐚𝐠𝐢𝐜: function reverseArray(arr, start = 0, end = arr.length - 1) { if (start >= end) return arr; [arr[start], arr[end]] = [arr[end], arr[start]]; return reverseArray(arr, start + 1, end - 1); } 𝐇𝐞𝐫𝐞'𝐬 𝐭𝐡𝐞 𝐬𝐭𝐞𝐩-𝐛𝐲-𝐬𝐭𝐞𝐩 𝐛𝐫𝐞𝐚𝐤𝐝𝐨𝐰𝐧 𝐭𝐡𝐚𝐭'𝐥𝐥 𝐦𝐚𝐤𝐞 𝐢𝐭 𝐜𝐥𝐢𝐜𝐤: 🎯 𝐁𝐚𝐬𝐞 𝐂𝐚𝐬𝐞 - When start meets or exceeds end, we're done (no more swapping needed!) 🎯 𝐒𝐰𝐚𝐩 - Exchange elements at start and end positions using destructuring 🎯 𝐑𝐞𝐜𝐮𝐫𝐬𝐢𝐯𝐞 𝐂𝐚𝐥𝐥 - Move inward (start+1, end-1) and let recursion handle the rest 𝐖𝐚𝐭𝐜𝐡 𝐢𝐭 𝐰𝐨𝐫𝐤 𝐰𝐢𝐭𝐡 [1,2,3,4,5]: • Call 1: Swap positions 0,4 → [5,2,3,4,1] • Call 2: Swap positions 1,3 → [5,4,3,2,1] • Call 3: start=2, end=2 (base case reached - we're done!) 𝐖𝐡𝐲 𝐭𝐡𝐢𝐬 𝐚𝐩𝐩𝐫𝐨𝐚𝐜𝐡 𝐢𝐬 𝐩𝐮𝐫𝐞 𝐠𝐞𝐧𝐢𝐮𝐬: Recursion handles the "unwinding" naturally. Each call focuses on one swap, then trusts the next call to handle the rest. No loops, no complex indexing - just clean, mathematical thinking that reads like English! 🚀 As a React developer, this same recursive pattern shows up everywhere - component trees, state management, you name it. Master it here and watch those concepts become second nature. Drop a ❤️ if this made recursion click for you! #WebDevelopment #JavaScript #Recursion

🚀 Learning Update: Stack Implementation in JavaScript Today I practiced building a Stack data structure from scratch using JavaScript! It follows the LIFO (Last In, First Out) principle — just like a stack of books 📚 The last element added is always the first one removed. Here’s a snippet of my implementation 👇 class Stack {  constructor() {   this.items = [];  }  push(value) {   this.items.push(value);  }  pop() {   if (this.items.length === 0) return undefined;   return this.items.pop();  }  peek() {   return this.items[this.items.length - 1];  } } 🧠 What I learned: How push() and pop() work under the hood Why Stack is useful for undo operations, recursion, and function calls Practiced logical thinking and abstraction Next, I’m going to learn Queue — can’t wait to explore FIFO logic! 💻 #JavaScript #DataStructures #Stack #CodingJourney #WebDevelopment

𝐖𝐡𝐞𝐧 𝐈 𝐟𝐢𝐫𝐬𝐭 𝐬𝐭𝐚𝐫𝐭𝐞𝐝 𝐥𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭, 𝐈 𝐭𝐡𝐨𝐮𝐠𝐡𝐭 𝐢𝐭 𝐰𝐚𝐬 𝐣𝐮𝐬𝐭 𝐚𝐛𝐨𝐮𝐭 𝐦𝐚𝐤𝐢𝐧𝐠 𝐛𝐮𝐭𝐭𝐨𝐧𝐬 𝐜𝐥𝐢𝐜𝐤𝐚𝐛𝐥𝐞. But the deeper you go, the more powerful (and honestly fun) it becomes. Here are some key JavaScript concepts every beginner should understand: - Variables (let, const, var) - Data types (Strings, Numbers, Booleans, Objects, Arrays) - Functions (declaration, expression, arrow functions) - DOM Manipulation - Events and Event Listeners - Loops (for, while, forEach) - Conditionals (if, else, switch) - Scope and Closures - Callbacks, Promises, Async/Await - ES6+ Features (destructuring, spread/rest, modules) And the best way to learn these? Build. Here are 7 projects to help you apply core JavaScript concepts: 1. To-Do List App - DOM, events, localStorage 2. Digital Clock - setInterval, Date object 3. Tip Calculator - functions, input handling 4. Quiz App - conditionals, arrays, DOM 5. Weather App - API calls, async/await 6. Image Slider - loops, DOM traversal 7. Notes App - CRUD operations, localStorage Every project teaches something new. And the bonus? You’ll slowly stop Googling “how to use forEach in JavaScript” every time 😅 Keep coding. Keep breaking things. That’s how you learn JavaScript Follow and repost Asif Ali Quraishi ♞ for more such content #js #frontend #closures #javascript

Learning never stops — and today’s focus was on Template Literals in JavaScript ✨ Template literals are an elegant upgrade over traditional string concatenation. They make code cleaner, more readable, and dynamic — especially when dealing with multi-line strings or injecting variables directly inside strings. Example: const name = "Tom"; const course = "MERN Stack"; console.log(`Hello ${name}, welcome to the ${course} learning journey!`); Template literals also make it easy to: 1.Embed expressions directly in your strings (${expression}) 2.Create multi-line strings without messy \n 3.Combine dynamic data effortlessly This small but powerful ES6 feature makes my code not only neater but also more expressive. 🚀 #JavaScript #TemplateLiterals #ES6 #WebDevelopment #CodingJourney #LearnToCode #MERNStack #CodeEveryday #JavaScriptLearning #FrontendDevelopment #DeveloperLife #WomenInTech #100DaysOfCode #TechSkills #CodingCommunity #CleanCode #StringInterpolation #WebDevLearning #TechGrowth

🚀 Learning in Public – Post #6 This week, I explored another fundamental concept in JavaScript — Numbers 🔢 In JavaScript, numbers are simple but incredibly powerful. Unlike some languages that separate integers and floats, JavaScript has only one type of number — it’s always stored as a 64-bit floating-point value (double precision). ⚙️ Key Points About JavaScript Numbers 🔹 Single Number Type All numbers in JavaScript are of type Number, whether they’re: let x = 3.14; // floating-point let y = 3; // integer 🔹 No Integer Data Type JavaScript doesn’t have a separate integer type — everything is treated as a floating-point number internally. 🔹 Precision JavaScript can safely store: Integers up to 15 digits Decimals up to 17 digits of precision But because of floating-point arithmetic: 0.2 + 0.1; // 0.30000000000000004 😅 You can fix this by scaling: let x = (0.2 * 10 + 0.1 * 10) / 10; // 0.3 ✅ 🔹 Large or Small Numbers Numbers that are too large or too small are converted to: Infinity -Infinity Example: let x = 1 / 0; // Infinity let y = -1 / 0; // -Infinity 🔹 NaN (Not a Number) NaN represents an invalid number result. let x = 100 / "Apple"; // NaN You can check it using: isNaN(x); // true 🔹 Numeric Strings If a numeric string is used in an arithmetic operation, JavaScript tries to convert it automatically: "100" / "10"; // 10 ✅ "100" + "10"; // 10010 ❌ (concatenation) ✨ Key takeaway: JavaScript treats all numbers as floating-point values, which keeps things simple — but it also means you should be careful with precision and conversions when working with calculations. That’s all for this week ✅ Stay tuned for Post #7, where I’ll continue my journey into JavaScript fundamentals. #JavaScript #WebDevelopment #LearningInPublic #CodingJourney #DSA

Learning snapshot — core JavaScript runtime concepts: 1. Global Execution Context: created first — establishes the global scope and runtime environment. 2. Memory (creation) phase: engine allocates space for identifiers; functions are fully hoisted, var → undefined, let/const remain uninitialized. 3. Hoisting: declarations are conceptually moved up — explains why functions/vars can be referenced before their source line. 4. Code (execution) phase: engine runs code line-by-line, assigning values and invoking functions. 5. Call stack: LIFO structure tracking active function calls; current frame is always on top. 6. Practical rule: prefer const/let, declare intent early, and avoid relying on hoisting to reduce bugs. 7. Fun bit: an empty .js file is valid JavaScript — the shortest possible program.

JavaScript Learning – Today's Topic : Understanding Closures Have you ever seen a function “remember” variables even after its parent function has finished running? 🤔 That’s not magic — it’s called a Closure ✨ 🔍 What is a Closure? A closure is formed when an inner function “remembers” the variables of its outer function, even after that outer function has completed execution. In short: Functions remember the environment they were created in. Example 1: Simple Closure Javascript function outer() { let name = "Venkatesh"; function inner() { console.log("Hello, " + name); } return inner; } const greet = outer(); greet(); // Output: Hello, Venkatesh Explanation: • The outer() function returns inner(). • Even though outer() is done executing, the inner function still remembers the name — that’s closure! Example 2: Private Variables (Real-life Use) Javascript function counter() { let count = 0; return { increment: function() { count++; console.log(count); }, decrement: function() { count--; console.log(count); } }; } const myCounter = counter(); myCounter.increment(); // 1 myCounter.increment(); // 2 myCounter.decrement(); // 1 ✅ Here, count is private — you can’t access it directly from outside! Closures help in data hiding and encapsulation (like private variables in OOP). 🧠 Why Closures Are Useful ✅ Maintain state between function calls ✅ Implement data privacy ✅ Used in callbacks and event listeners ✅ Help create factory functions and module patterns In Simple Words A closure is like a backpack 🎒 — when a function travels, it carries the variables it needs from its home environment. #JavaScript #Closures #WebDevelopment #Coding #FrontendDevelopment #LearnToCode #JSConcepts #WebDev #Programming #Developer #CodeNewbie #100DaysOfCode #SoftwareEngineering #JavaScriptTips #CodeWithVenkatesh #WebTech #AsyncJS #TechLearning #InterviewPrep

When building a Queue in JavaScript, most of the time we start with an array. It works, but not efficiently. Here’s why using a Linked List can be a smarter choice 💡 1. Efficient Dequeue (O(1)) In an array, removing the first element (shift()) reindexes all remaining items, that’s O(n) time. In a linked list, we can simply move the head pointer, constant time O(1). 2. Dynamic Size Arrays have fixed memory allocation behind the scenes. A linked list grows and shrinks as needed, no need to resize or copy data. 3. Memory-Friendly for Large Data When working with large queues (like task schedulers or message systems), linked lists avoid memory overhead caused by array reallocation. In short: Array-based queues are easy to start with, but linked list-based queues scale better for performance and memory. Bangla Summary: Queue তৈরি করতে Array ব্যবহার করা সহজ, কিন্তু বড় ডেটার ক্ষেত্রে তা সময়সাপেক্ষ। Linked List ব্যবহার করলে dequeue অপারেশন অনেক দ্রুত (O(1)) হয় এবং memory আরও দক্ষভাবে ব্যবহৃত হয়। তাই বড় বা dynamic Queue-এর জন্য Linked List বেশি উপযোগী। Do you prefer using arrays or linked lists for queue implementations and why? #JavaScript #DataStructures #Queue #LinkedList #Algorithms #WebDevelopment #LearnInPublic #Programming