JavaScript Hoisting Challenge: Function Declaration vs Variable Declaration

🧠 Day 2 of 21 days challenge JavaScript Closures 🤯 A function remembering its data even after execution is done. In simple words: Inner function can access outer function variables. Sounds simple… but super powerful 💥 Used in: • Counters • Private variables • React hooks 💤 For easy understanding : outer() returns a function inner() remembers the value of count 👉 this is called a closure This changed how I see JavaScript 🚀 #JavaScript #Closures #Frontend #React.js

✨ Master JavaScript Array Destructuring for Cleaner Code Modern JavaScript lets you extract values in one line—making your code shorter, clearer, and easier to maintain. 🧠 Why it matters: Readable code = fewer bugs + faster development. ⚛️ If you’re using React, you’re already using destructuring (useState, useReducer). #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #CleanCode #ModernJS #SoftwareEngineering

useEffect — The Hook That Confused Me (Until I Got This) useEffect was confusing until I understood one thing: dependencies control everything. The Rule: javascript // Runs ONCE after mount useEffect(() => { fetchData(); }, []); // Runs when userId changes useEffect(() => { fetchUser(userId); }, [userId]); // Runs on EVERY render (avoid!) useEffect(() => { console.log('render'); }); What I Learned the Hard Way: Missing dependencies = stale data Adding everything = infinite loops Cleanup functions matter (especially for subscriptions) My Checklist: What should trigger this effect? Do I need to clean up? Can this cause unnecessary renders? What's your React Hook survival tip? #ReactJS #JavaScript #FrontendDeveloper #WebDev #CodingTi

🚀 💡 JavaScript Tricky Question Explanation const arr = [4, 10, 2, 8]; const result = arr.find(num => num > 5) + arr.findIndex(num => num > 5); console.log(result); 👉 Output: 11 👉 Explanation: * find() returns the first value > 5 → `10` * findIndex() returns its index → `1` * Final result → `10 + 1 = 11` ⚡ Both stop at the **first match** #JavaScript #WebDevelopment #Frontend #CodingInterview #JSConcepts

🧠 Day 10 of 21days challenge JavaScript call, apply, bind 🔥 They allow you to control what “this” refers to in a function. You can borrow functions and use them with different objects. For easy understanding :- call → pass arguments one by one apply → pass arguments as array bind → returns new function 👉 That’s how we control “this” in JavaScript This changed how I understand functions 🚀 #JavaScript #CallApplyBind #Frontend

🤯 Ever wondered why React prints old values? I finally understood stale closures by connecting it with JavaScript closures. Sharing my notes in this carousel 👇 “Slide 8 explains the real problem clearly” #React #JavaScript #FrontendDevelopment

What is a closure in JavaScript? A closure is a function that remembers variables from its outer scope even after that scope has finished executing. Why does this work? - `createCounter` runs once - It creates a variable `count` - The inner function “closes over” that variable - Even after `createCounter` finishes, `count` is still accessible Each time `counter()` runs: → it uses the same preserved state 💡 Closures are everywhere: - React hooks - Event handlers - Memoization - Encapsulation patterns They’re not just a concept — they’re part of how JavaScript manages state. #Frontend #JavaScript #React #WebDevelopment #SoftwareEngineering

🚀 JavaScript Output Challenge #4 (Trap Level) If you think you understand JavaScript deeply… this one will test you 👇 🧠 Question: (Check the code in the images) ⚠️ Rules: Don’t run the code Think step by step Focus on execution order 🤔 Try to answer: What will be the exact output? Why does it happen? What changes if we replace var with let? 💬 Drop your answers in the comments Let’s see how many get this right 👀 🔥 Concepts involved: Event Loop Microtask vs Macrotask Closures Scope (var vs let) 📌 I’ll share the detailed explanation soon #javascript #webdevelopment #frontend #codingchallenge #reactjs #nodejs

you called setState twice. expected +2. got +1. both calls read the same stale count from the current render. they don't compound. they both say "set to 1." welcome to React. why it breaks: state updates don't happen immediately. they're scheduled. so count is still 0 inside your function no matter how many times you call setState. both calls read 0. both set to 1. result: 1. the Fix: use functional updates. each call gets the previous result and builds on it. The code : #reactjs #javascript #webdevelopment #buildinpublic #typescript

🚀 Day 18 – Array Methods You Must Know If you're working with Angular, mastering JavaScript array methods is a game changer. From transforming API data to filtering UI lists, these methods make your code: ✔ Cleaner ✔ More readable ✔ More powerful 💡 My go-to combo? filter() + map() — simple and effective! Which array method do you use the most? 👇 #JavaScript #Angular #WebDevelopment #Frontend #CodingTips #100DaysOfCode