JavaScript Call Stack Explained

💡 The Call Stack tracks execution. ❓ What causes a stack overflow error? The call stack is like a to-do list for JavaScript. Every time a function runs, it gets added (pushed) to the stack. When it finishes, it gets removed (popped). 👉 A stack overflow error happens when too many functions are added to the stack and it runs out of space. 🔹 Most Common Cause: Infinite Recursion function loop() { loop(); // calling itself forever } loop(); // ❌ Maximum call stack size exceeded Here, loop() keeps calling itself without stopping. Each call adds a new frame to the stack, and eventually the stack becomes full. 🔹 Proper Recursion (with base case) function countDown(n) { if (n === 0) return; // base case countDown(n - 1); } countDown(5); // ✅ works fine The base case stops the recursion and prevents overflow. ⚠️ Other Causes Deep nested function calls Large recursive algorithms without limits Circular function calls 💡 Takeaway A stack overflow happens when functions keep stacking up without finishing. Always make sure recursive functions have a clear stopping condition. #learnwithisnaan #JavaScriptTips #ModernJavaScript #ES6 #DeveloperTips #CleanCode #JSDevelopers

Day 62 of me reading random and basic but important dev topicsss..... Today I read about the Resource Loading in JavaScript...... In our day-to-day work building interfaces with React or other modern frameworks, it's easy to take module bundlers for granted. But what happens when we need to dynamically inject a third-party script......like an analytics tracker, a payment SDK, or a support widget.....on the fly? Understanding the vanilla DOM events onload and onerror is a must for any robust front-end architecture. 1. The Dynamic Injection Adding a script dynamically is straightforward: let script = document.createElement('script'); script.src = "third-party.js"; document.head.append(script); But we can't just invoke its functions immediately. The browser needs time to fetch and execute it. 2. script.onload (The Success Path) This event triggers after the script has successfully loaded and executed. This is our green light to safely use the newly available variables or functions. 3. script.onerror (The Failure Path) If the script 404s or the server is down, onerror catches it. However, keep in mind: we won't get HTTP status codes (like 404 or 500) here, just a notification that the network request failed. Loading vs. Execution Here is where we get tripped up: onload and onerror only track the network loading phase. If a script downloads successfully but contains a syntax or runtime error during execution, onload will still fire! To catch those internal execution bugs, we need a different tool entirely: the window.onerror global handler. Keep Learning!!!!! #JavaScript #WebDevelopment #FrontendDev #React #SoftwareEngineering

🚀#Day45 #100Daysofcode – Introduction to Templating with EJS Today I started working with EJS (Embedded JavaScript) and understood how templating works in backend development. 🔹learned today: • What templating is and why it’s needed • How to use EJS with Express • Setting up the views directory • Understanding interpolation syntax: <%= %> for output <% %> for logic • Passing dynamic data from backend to EJS templates 💡Key Understanding: Instead of sending only JSON responses, the server can now render dynamic HTML pages using data. This helped me understand how backend and frontend connect in server-side rendering. #Day45complete✅👍🏻 #ExpressJS #NodeJS #BackendDevelopment #MERNStack #100DaysOfCode #WebDevelopment

🧠 99% of JavaScript developers answer this too fast — and get it wrong 👀 (Even with 2–5+ years of experience) ❌ No frameworks ❌ No libraries ❌ No async tricks Just pure JavaScript fundamentals. 🧩 Output-Based Question (Objects & References) const a = { x: 1 }; const b = a; b.x = 2; console.log(a.x); ❓ What will be printed? ❌ Don’t run the code 🧠 Think like the JavaScript engine A. 1 B. 2 C. undefined D. Throws an error 👇 Drop ONE option only (no explanations yet 😄) 🤔 Why this matters Most developers assume: const makes data immutable assigning creates a copy objects behave like primitives All three assumptions are dangerous. This question tests: • reference vs value • memory behavior • how objects are stored • what const actually protects When fundamentals aren’t clear: state mutates unexpectedly React bugs appear out of nowhere data leaks across components debugging becomes guesswork Strong JavaScript developers don’t just write code. They understand what lives in memory. 💡 I’ll pin the explanation after a few answers. #JavaScript #JSFundamentals #WebDevelopment #FrontendDeveloper #FullStackDeveloper #CodingInterview #DevCommunity #ProgrammingTips #LearnJavaScript #SoftwareEngineering

How API Fetch Works in JavaScript Today I explored fetching data from APIs in JavaScript. Here’s the core idea: const response = await fetch('https://lnkd.in/gtuyqVPs'); const data = await response.json(); console.log(data); Key takeaways: fetch() → request data from an API async/await → makes async code readable response.json() → converts data to usable objects Fun tip: I even visualized this in a colorful notebook-style page with doodles, icons, and notes. It really helps to understand the flow of data! #JavaScript #WebDev #API #CodingTips #LearningByDoing #TechNotes

𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗜𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁: 𝗛𝗼𝘄 𝗔𝘀𝘆𝗻𝗰 𝗥𝗲𝗮𝗹𝗹𝘆 𝗪𝗼𝗿𝗸𝘀 You write JavaScript code that runs one thing at a time. But you can make HTTP requests, set timers, and handle user clicks without freezing your code. How does this work? It's because of the Event Loop. The Event Loop is a simple loop that checks: "Is the call stack empty? If yes, is there work in the queues?" It processes all microtasks before moving to the next macrotask. Microtasks include Promise.then and queueMicrotask. Macrotasks include setTimeout, setInterval, and I/O operations. Here's how it works: - Your synchronous code runs first. - Async APIs run outside JavaScript and notify when done. - Callbacks go into queues: microtasks or macrotasks. - The Event Loop processes all microtasks before any macrotask. In Node.js, the Event Loop has specific phases that execute in order. Microtasks run between phases. process.nextTick has the highest priority. To understand the Event Loop, remember: - Sync code runs to completion. - Drain all microtasks. - Take one macrotask. - Drain all microtasks again. - Repeat. Understanding the Event Loop helps you: - Predict execution order. - Avoid blocking the Event Loop. - Debug async race conditions. - Write performant async code. Source: https://lnkd.in/gVGKRV38

📌 Understanding Array.from() in JavaScript When working with array-like or iterable objects in JavaScript, we often need a clean way to convert them into real arrays. That’s where Array.from() becomes incredibly useful. 👉 What is Array.from()? 💠 Array.from() creates a new array from: 🔹 Array-like objects (e.g., NodeList, arguments) 🔹 Iterable objects (e.g., strings, Sets, Maps) 👉 In simple terms: It converts “not exactly arrays” into proper arrays. 👉 Why is it Important? 🔹 Converts DOM collections into arrays 🔹 Helps generate dynamic arrays 🔹 Supports transformation while creation 🔹 Cleaner alternative to loops Array.from() is a powerful utility method that simplifies working with iterable and array-like data structures. Mastering it improves code readability and makes your JavaScript more expressive and efficient. #JavaScript #Frontend #WebDevelopment #CodingTips #LearnToCode

Stop misusing JavaScript array methods. Small choices like this quietly shape code quality. One of the most common clean-code mistakes I see is using `forEach()` when the real intention is transformation. If your goal is to create a new array from existing data, `map()` is the right tool. `map()` returns a new array. It keeps your logic functional and predictable. It communicates intent clearly: “I am transforming data.” That clarity improves readability and long-term maintainability. `forEach()`, on the other hand, is built for side effects—logging, DOM updates, triggering external behavior. It does not return a new array. When you push into another array inside `forEach()`, you’re working against the language instead of with it. A simple rule of thumb: * If you’re creating a new array → use `map()` * If you’re performing side effects → use `forEach()` * If you’re filtering → use `filter()` instead of manual conditions Clean code isn’t about writing more lines. It’s about choosing the right abstraction for the job. Intentional developers let method names express meaning. So be honest—are you team `map()`, or still reaching for `forEach()` when transforming data? #JavaScript #CleanCode #FrontendDevelopment #WebEngineering #SoftwareCraftsmanship #CodeQuality #ReactJS

Built a small project to deeply understand how Local Storage works in JavaScript. Implemented: • Loading stored data on page refresh • Syncing input field with saved values • Updating storage dynamically using the input event • Removing specific keys using removeItem() • Handling null values safely This helped me understand how browser storage persists data and how to properly connect it with the DOM. Strong fundamentals lead to better full-stack development. 💻 #JavaScript #LocalStorage #WebDevelopment #FrontendDevelopment #BrowserStorage #CodingJourney #LearnInPublic #MERNStack #SoftwareEngineering #100DaysOfCode #TechLearning

JavaScript Array Methods — Small functions, powerful impact. 🚀 As developers, mastering the basics makes our code cleaner, smarter, and more efficient. Here’s a quick refresher: 🔹 map() – Transform each element Perfect when you want a new array with modified values. 🔹 forEach() – Execute a function for each element Great for side effects like logging or updating UI. 🔹 filter() – Select specific elements Use it when you need to narrow down data. 🔹 push() / pop() – Add or remove from the end Simple stack behavior. 🔹 shift() / unshift() – Add or remove from the beginning Useful when order matters. 🔹 reduce() – Convert an array into a single value Powerful for totals, counts, aggregations. Clean code isn’t about writing more — It’s about using the right method at the right time. Strong fundamentals → Better architecture → Scalable systems. What’s your most-used array method? 👇 #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #SoftwareEngineering #DeveloperLife