Temporal Dead Zone in JavaScript Explained

🧠 Day 18 of 21days challenge JavaScript WeakMap ⚡ WeakMap is a collection where keys must be objects. It helps in memory management because keys are weakly referenced. For easy understanding :- WeakMap = object keys only Garbage collected if no other references Useful to store private data 👉 That’s how memory leaks can be prevented This changed how I manage objects efficiently 🚀 #JavaScript #WeakMap #InterviewPrep #Frontend

learned optional chaining in react today. making: IPL project 🏏 issue faced: accessing nested objects like "object.object.object" fix/learned: optional chaining ("?.") to avoid crashes & undefined errors small thing, big sanity save. #reactjs #webdev #buildinpublic #javascript

Day 26/128 of my LeetCode journey 🚀 Today’s problem: Longest Substring Without Repeating Characters Solved it using the sliding window technique with a Set in JavaScript. This approach helped me optimize the solution to O(n) time complexity, making it efficient even for larger inputs. 💡 Key takeaway: Understanding how to dynamically adjust the window when duplicates appear is crucial for mastering string problems like this. Consistency is the real game-changer. Showing up every day, one problem at a time 💪 #LeetCode #128DaysOfCode #JavaScript #CodingJourney #DSA #ProblemSolving

🧠 Day 19 of 21days challenge Event Propagation in JavaScript ⚡ Events don’t just happen… they travel. By default, events follow bubbling (child → parent). But we can also use capturing (parent → child). For easy understanding :- Capturing = top to bottom Bubbling = bottom to top Default = bubbling 👉 That’s how DOM events flow This changed how I debug UI events 🚀 #JavaScript #EventPropagation #Frontend #InterviewPrep

💡 What is Ternary Operator in React? The ternary operator is used for conditional rendering in React. 👉 Syntax: condition ? trueValue : falseValue 📌 Example Use Cases: • Show / hide elements • Login / Logout button • Loading states • Toggle UI 📌 Why use it? • Cleaner than if-else • Inline rendering • Easy to read ⚡ Helps you write dynamic UI logic directly in JSX. Master this to build smart React interfaces. Follow TFSC for practical frontend learning. #reactjs #ternaryoperator #frontenddevelopment #javascript #webdevelopment #coding #learnreact #programming #tfsc

⚠️ Common Confusions about Control Flow : Switch case: switch-case executes all cases after a match unless you break. else if : else if chain works top-down — order matters. You can use truthy/falsy values directly in if . 🧠 Mindset Control flow = conditional storytelling. It helps your program make choices and respond differently to different inputs. Write readable branches. Avoid nesting too deep — use early return if needed.  #react #javascript #JS #ABK #code

🚀 Day 14/30 of My JavaScript Challenge Solved LeetCode 2715 - Timeout Cancellation ✅ 💡 What I Learned Today: ⏳ How setTimeout() delays function execution ❌ How clearTimeout() cancels a scheduled task 🔁 Returning functions from functions (Higher-Order Functions) 🧠 Managing async behavior in JavaScript 📌 Approach: Created a cancellable function that schedules execution using setTimeout(). Then returned a cancelFn which uses clearTimeout() to stop execution before the delay ends. ✨ Key Insight: JavaScript timers can be controlled dynamically, which is useful in search debouncing, API calls, and UI interactions. #JavaScript #LeetCode #30DaysChallenge #WebDevelopment #AsyncJavaScript #CodingJourney #ProblemSolving

🚀 Day 15/30 – Event Bubbling in JavaScript When an event occurs on an element, it doesn’t just stop there — it bubbles up through its parent elements all the way to the root. 👉 Simply put: Event starts from the target element → moves up to parent → ancestor → document 💡 Example: Clicking a button inside a div will trigger: Button’s event Then the parent div’s event Learn with JavaScript Mastery #Day14 #FrontendDeveloper #JavaScript #InterviewPreparation #WebDevelopment #30DaysChallenge w3schools.com

Core mental model of useMemo() 💡 ➡️ It takes a pure function as the first argument and a dependency array as the second. ➡️ That function returns a value, and React reuses the previously cached result on later renders if the dependencies have not changed. ➡️ If the returned value is a primitive, React reuses the same value 🧠 This is commonly useful for expensive calculations. ➡️ If the returned value is an object or array, React reuses the same reference 🧠 This is commonly useful for stabilizing props passed to a memoized component created with React.memo() #javascript #typescript #react #useMemo() #memorization

🚀 Day 16: Higher-Order Components (HOC) in React A Higher-Order Component (HOC) is a function that takes a component and returns a new enhanced component. 👉 Think of it as: “A wrapper that adds extra functionality to your component” Learn with JavaScript Mastery #ReactJS #FrontendDevelopment #JavaScript #CodingChallenge #LearnInPublic w3schools.com #InterviewPrep