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
How to reverse an array in two lines with recursion
More Relevant Posts
-
🚀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🙌
To view or add a comment, sign in
-
-
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
To view or add a comment, sign in
-
-
🌲 𝐖𝐚𝐥𝐤𝐢𝐧𝐠 𝐓𝐡𝐫𝐨𝐮𝐠𝐡 𝐭𝐡𝐞 𝐅𝐨𝐫𝐞𝐬𝐭 𝐨𝐟 𝐑𝐞𝐜𝐮𝐫𝐬𝐢𝐨𝐧 — 𝐀 𝐕𝐢𝐬𝐮𝐚𝐥 𝐉𝐨𝐮𝐫𝐧𝐞𝐲 I’ve always found recursion fascinating, not just as a concept, but as a mirror of how we think. We go deeper into problems, reach a point of clarity, and then - like a recursive call - return stronger, lighter, and more complete. Today, I decided to visualize that journey. Instead of reading about recursive calls and stack frames, I built a small forest where every click represents a call, every log a thought in the stack, and every deletion… a quiet return to peace 🍃 💻 Built with HTML, CSS, and JavaScript, this demo shows how a 𝐧𝐨𝐝𝐞 𝐢𝐬 𝐝𝐞𝐥𝐞𝐭𝐞𝐝 𝐢𝐧 𝐚 𝐁𝐢𝐧𝐚𝐫𝐲 𝐒𝐞𝐚𝐫𝐜𝐡 𝐓𝐫𝐞𝐞 - specifically when that node has no child nodes beneath it. Next, I’ll connect it to a 𝐆𝐨 𝐛𝐚𝐜𝐤𝐞𝐧𝐝 𝐀𝐏𝐈, letting users 𝐢𝐧𝐬𝐞𝐫𝐭, 𝐬𝐞𝐚𝐫𝐜𝐡, and 𝐝𝐞𝐥𝐞𝐭𝐞 𝐧𝐨𝐝𝐞𝐬 in real time 🌐 Because sometimes, the best way to understand code… is to watch it breathe. Would you try learning recursion this way? 👇 #WebDevelopment #GoLang #Recursion #Visualization #LearningInPublic #SoftwareEngineering #BinaryTree #FrontendDevelopment
To view or add a comment, sign in
-
🚀 Learning Update: Queue in JavaScript Built a Queue from scratch today! 🖥️ Queue follows FIFO (First In, First Out) — like people waiting in line. Snippet: class Queue { constructor() { this.items = []; } enqueue(val) { this.items.push(val); } dequeue() { return this.items.length ? this.items.shift() : undefined; } peek() { return this.items[0]; } print() { console.log("start >", this.items.join(" > "), "> end"); } } const q = new Queue(); q.enqueue(10); q.enqueue(20); q.enqueue(30); q.print(); q.dequeue(); q.print(); console.log("Peek:", q.peek()); 💡 Key Takeaways: enqueue() & dequeue() in action Queue is great for task scheduling, async operations Practiced logic & abstraction Next up: Linked Lists 🔗 Can’t wait! #JavaScript #DataStructures #Queue #CodingJourney #WebDevelopment
To view or add a comment, sign in
-
From JS to WASM — Just One Step? It’s no secret that WebAssembly is much faster than JavaScript. For example, summing 2 billion elements takes 15.5 seconds in JS, but only 1.4 seconds in WASM. Impressive — but that’s synthetic benchmarking. Let’s move closer to real-world product development. Say we need to invert the colors of a 25 MB image. I tried four approaches: 1. JS in the main thread — 32.4 ms 2. JS in a Web Worker — 78.69 ms 3. WASM in the main thread — 282 ms → optimized to 30.9 ms 4. Rust + WASM in the main thread — 47.8 ms After 4 hours of writing what seemed like the simplest possible code for image inversion, the result was… disappointing. The first WASM implementation was 8.7× slower than plain JS. Plus, both WASM and Web Workers add resource overhead — and that’s not even counting manual memory management, which is a total nightmare. After another hour of tinkering, I realized that the functions, conditions, and loops I wrote in WASM for readability were significantly slowing everything down. Also, the more parentheses (hello Lisp!) — the slower the execution. Obvious? Maybe. Painful? Definitely. After flattening the assembly into one giant unreadable block, performance increased 9.12×. I finally beat JS — by 1.5 ms! The V8 engine is so optimized that, in some cases, an interpreted language beats a carefully written binary. Crazy, right? Next, I tried Rust → WASM. I expected the binary to be far superior to my hand-written WASM, but surprisingly (or not), my WASM code was 55% faster. 🫡 Yes, humans can write faster assembly than compilers — but honestly, it's better to let the machine handle that. It will generate optimized binary from your high-level code in seconds, saving you days of work and a few grey hairs 💀 P.S. I’ve never gone this deep before. The process was insanely fun — I highly recommend trying something like this at least once!
To view or add a comment, sign in
-
-
🚀 Deep Clone an Object in JavaScript (without using JSON methods!) Ever tried cloning an object with const clone = JSON.parse(JSON.stringify(obj)); and realized it breaks when you have functions, Dates, Maps, or undefined values? 😬 Let’s learn how to deep clone an object the right way - without relying on JSON methods. What’s the problem with JSON.parse(JSON.stringify())? t’s a quick trick, but it: ❌ Removes functions ❌ Converts Date objects to strings ❌ Skips undefined, Infinity, and NaN ❌ Fails for Map, Set, or circular references So, what’s the alternative? ✅ Option 1: Use structuredClone() (Modern & Fast) Available in most modern browsers and Node.js (v17+). structuredClone() handles Dates, Maps, Sets, and circular references like a champ! structuredClone() can successfully clone objects with circular references (where an object directly or indirectly references itself), preventing the TypeError: Converting circular structure to JSON that occurs with JSON.stringify(). ✅ Option 2: Write your own recursive deep clone For learning purposes or environments without structuredClone(). ⚡ Pro Tip: If you’re working with complex data structures (like nested Maps, Sets, or circular references), use: structuredClone() It’s native, fast, and safe. Final Thoughts Deep cloning is one of those "simple but tricky" JavaScript topics. Knowing when and how to do it properly will save you hours of debugging in real-world projects. 🔥 If you found this helpful, 👉 Follow me for more JavaScript deep dives - made simple for developers. Let’s grow together 🚀 #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #LearnJavaScript #Programming #DeveloperCommunity #AkshayPai #WebDev #ES6 #JSDeveloper #JavaScriptTips #JavaScriptObjects #JavaScriptClone #JavaScriptCloneObject
To view or add a comment, sign in
-
-
📅 Day 51 of #100DaysOfWebDevelopment This is part of the 100 Days of Web Development challenge, guided by mentor Muhammad Raheel at ZACoders. 🎯 Mastering Regular Expressions (Regex) in JavaScript 🧠 Today, I explored one of the most powerful tools in JavaScript — Regular Expressions (Regex). Regex allows us to search, match, and manipulate text patterns efficiently, making it an essential skill for form validation, data filtering, and text processing. ✅ What I Practiced Today: 🔹 Created different input fields to test Regex patterns in real time. 🔹 Used expressions to validate email addresses, numbers, letters, and special characters. 🔹 Practiced using RegExp methods like .test(), .match(), and .replace(). 🔹 Learned how to combine character classes, quantifiers, and anchors to form precise patterns. 🔹 Explored how Regex works with flags like g (global), i (case-insensitive), and m (multiline). ✨ Key Takeaways: 💡 Regex helps identify complex text patterns with minimal code. 💡 Validation becomes easier and more efficient using Regex. 💡 Common use cases include form validation, search filters, and input sanitization. 💡 Mastering Regex enhances both frontend and backend development skills. 📂 Please visit my GitHub to check the practice code I worked on today: 👉 GitHub - https://lnkd.in/eME6fwyV #100DaysOfCode #JavaScript #WebDevelopment #FrontendDevelopment #Regex #RegularExpressions #CodingJourney #ZACoders #Day51 #FormValidation
To view or add a comment, sign in
-
𝟵𝟬% 𝗼𝗳 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗱𝗼𝗻’𝘁 𝗸𝗻𝗼𝘄 𝗵𝗼𝘄 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗿𝘂𝗻𝘀 𝘂𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗵𝗼𝗼𝗱. 𝗬𝗼𝘂𝗿 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 𝗿𝗲𝗮𝗱𝘀, 𝗰𝗼𝗺𝗽𝗶𝗹𝗲𝘀, 𝗮𝗻𝗱 𝗰𝗹𝗲𝗮𝗻𝘀 𝗶𝘁 - 𝗶𝗻 𝗿𝗲𝗮𝗹 𝘁𝗶𝗺𝗲. 👇 🔹 𝗦𝘁𝗲𝗽 𝟭: 𝗣𝗮𝗿𝘀𝗶𝗻𝗴 (𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝘁𝗵𝗲 𝗖𝗼𝗱𝗲) • You write JavaScript code. • Your browser has a JavaScript engine - the program that runs your code. • The Parser reads it and breaks it into tokens (small code pieces). • These tokens form an AST (Abstract Syntax Tree) - a diagram that shows how your code is arranged • If something’s wrong, the parser stops and shows a syntax error. 🔹 𝗦𝘁𝗲𝗽 𝟮: 𝗜𝗻𝘁𝗲𝗿𝗽𝗿𝗲𝘁𝗮𝘁𝗶𝗼𝗻 (𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗕𝗲𝗴𝗶𝗻𝘀) • The Interpreter turns the AST into Bytecode (instructions the engine can run). • The Bytecode runs inside the engine, not directly on the CPU. • The program starts running after this step. • The engine tracks which parts run often and what data types are used. 🔹 𝗦𝘁𝗲𝗽 𝟯: 𝗝𝗜𝗧 𝗖𝗼𝗺𝗽𝗶𝗹𝗮𝘁𝗶𝗼𝗻 (𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻) • The engine finds hot code (functions or loops that run many times). • It sends them to the JIT (Just-In-Time) Compiler, which turns hot code into faster Machine Code during execution. • This Machine Code runs directly on the CPU. • The result - same code, now runs much faster. 🔹 𝗦𝘁𝗲𝗽 𝟰: 𝗔𝗱𝗮𝗽𝘁𝗶𝘃𝗲 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 (𝗦𝘁𝗮𝘆 𝗙𝗹𝗲𝘅𝗶𝗯𝗹𝗲) • The engine constantly checks how code behaves. • If types or logic change, it re-optimizes the code for the new pattern. • This adaptive process keeps JavaScript dynamic and efficient. 🔹 𝗦𝘁𝗲𝗽 𝟱: 𝗚𝗮𝗿𝗯𝗮𝗴𝗲 𝗖𝗼𝗹𝗹𝗲𝗰𝘁𝗶𝗼𝗻 (𝗖𝗹𝗲𝗮𝗻 𝘁𝗵𝗲 𝗠𝗲𝗺𝗼𝗿𝘆) • When code or data is no longer needed, it’s removed automatically. • The Garbage Collector (GC) finds and clears unused memory. • This keeps memory light and your app smooth. 🔄 𝗙𝘂𝗹𝗹 𝗙𝗹𝗼𝘄: Parsing → Interpretation → JIT Compilation → Adaptive Optimization → Garbage Collection Follow Saurav Kumar for more easy-to-understand Frontend insight. ✨ Would love to know your thoughts 👇 #JavaScript #FrontendDevelopment #WebDevelopment #JSEngine #ReactJS #Coding #Programming
To view or add a comment, sign in
-
-
Recently, I developed a dynamic data management interface using pure HTML, CSS, and JavaScript with localStorage for persistence.Here I updated the code with new features. Here’s what I implemented: Add, Update & Delete user entries dynamically Search functionality filtering by Name, Batch, or City Pagination to handle large data sets smoothly Data persistence via browser localStorage — no backend needed! User-friendly UI with clear inputs and responsive buttons This project helped me strengthen my JavaScript DOM manipulation, event handling, and client-side data management skills. Plus, it’s a great example of building fully functional apps without relying on frameworks or databases! Whether I'm learning frontend or building quick prototypes, mastering these core concepts can boost My productivity and understanding. #JavaScript #WebDevelopment #Frontend #LocalStorage #Programming #Coding #Projects #LearnToCode 10000 Coders
To view or add a comment, sign in
-
📒 No more writing custom logic for set math — JS now supports: union() intersection() difference() isSubsetOf() isDisjointFrom() All natively on Set.prototype 💪 🧠 Example: const a = new Set([1, 2, 3]); const b = new Set([3, 4, 5]); a.union(b); // → Set {1, 2, 3, 4, 5} a.intersection(b); // → Set {3} a.difference(b); // → Set {1, 2} a.isSubsetOf(b); // → false a.isDisjointFrom(b); // → false 💡 Why it’s cool: No external libraries. No hacks. Just clean, readable, math-like operations built right into JavaScript. 💬 Which one will you use first — union() or intersection()? #JavaScript #ES2025 #WebDevelopment #CodingTips #Developers
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development