JavaScript Hoisting and Temporal Dead Zone Explained

Day 5 — Find Largest Number in an Array (JavaScript) Problem Write a function to find the largest number in an array. Example Input: [3, 7, 2, 9, 5] Output: 9 Approach Loop through the array and keep track of the maximum value. Code function findLargest(arr){ let max = arr[0] for(let i = 1; i < arr.length; i++){ if(arr[i] > max){ max = arr[i] } } return max } console.log(findLargest([3,7,2,9,5])) Alternative Approach function findLargest(arr){ return Math.max(...arr) } What I Learned How to track maximum value while iterating through an array. #javascript #frontenddeveloper #codingpractice #webdevelopment

🧠 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

🧠 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩 – 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐅𝐚𝐯𝐨𝐫𝐢𝐭𝐞 🚀 console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); ✅ Output: 𝐒𝐭𝐚𝐫𝐭 𝐄𝐧𝐝 𝐏𝐫𝐨𝐦𝐢𝐬𝐞 𝐓𝐢𝐦𝐞𝐨𝐮𝐭 💡 Why? 𝐒𝐲𝐧𝐜𝐡𝐫𝐨𝐧𝐨𝐮𝐬 𝐜𝐨𝐝𝐞 𝐫𝐮𝐧𝐬 𝐟𝐢𝐫𝐬𝐭 → 𝐒𝐭𝐚𝐫𝐭, 𝐄𝐧𝐝 𝐌𝐢𝐜𝐫𝐨𝐭𝐚𝐬𝐤𝐬 (𝐏𝐫𝐨𝐦𝐢𝐬𝐞𝐬) 𝐫𝐮𝐧 𝐧𝐞𝐱𝐭 𝐌𝐚𝐜𝐫𝐨𝐭𝐚𝐬𝐤𝐬 (𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭) 𝐫𝐮𝐧 𝐥𝐚𝐬𝐭 👉 Even with 0ms, setTimeout waits for the event loop! 🔥 Master Event Loop = Crack JS interviews #JavaScript #FrontendDeveloper #EventLoop #CodingInterview #ReactJS #TechTips

🚨 𝗠𝗼𝘀𝘁 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗴𝗲𝘁 𝘁𝗵𝗶𝘀 𝘄𝗿𝗼𝗻𝗴 👇 JavaScript variables look simple… Until they silently break your logic 😵 🧠 𝗧𝗿𝘆 𝘁𝗵𝗶𝘀: 𝑐𝑜𝑛𝑠𝑜𝑙𝑒.𝑙𝑜𝑔(𝑎); 𝑣𝑎𝑟 𝑎 = 10; 𝑐𝑜𝑛𝑠𝑜𝑙𝑒.𝑙𝑜𝑔(𝑏); 𝑙𝑒𝑡 𝑏 = 20; 𝗪𝗵𝗮𝘁 𝘄𝗶𝗹𝗹 𝗯𝗲 𝘁𝗵𝗲 𝗼𝘂𝘁𝗽𝘂𝘁? Take a guess before scrolling… 👇 . . . . . . ✅ 𝗔𝗻𝘀𝘄𝗲𝗿: undefined ReferenceError: Cannot access 'b' before initialization 💡 𝗦𝗶𝗺𝗽𝗹𝗲 𝗘𝘅𝗽𝗹𝗮𝗻𝗮𝘁𝗶𝗼𝗻 JavaScript behaves differently for var and let: 👉 var is hoisted and initialized with undefined 👉 let is also hoisted, BUT it stays in a “𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗗𝗲𝗮𝗱 𝗭𝗼𝗻𝗲” until the line where it’s defined So: • a exists → prints undefined • b exists but is 𝗻𝗼𝘁 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝘆𝗲𝘁 → throws error 🎯 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀 • var → function scoped + can lead to unexpected bugs • let → block scoped + safer to use • Always prefer let & const in modern JavaScript 🔥 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗴𝗲𝘁 𝗶𝘁 𝗿𝗶𝗴𝗵𝘁? Be honest 😄 💬 Comment your answer before you saw the solution 🔖 Save this for interview prep 💡 Part of my #FrontendRevisionMarathon — breaking down Frontend concepts daily 🚀 🚀 Follow Shubham Kumar Raj for more such content. #javascript #frontenddeveloper #codinginterview #webdevelopment #learnjavascript #100daysofcode #programming #interviewprep #CareerGrowth #SowftwareEngineering

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day52 🚀 Just Built a Random Password Generator 🔐 I recently created a Random Password Generator using HTML, CSS, and JavaScript. 💻 Features: Generate strong and secure passwords Includes uppercase, lowercase, numbers, and symbols Copy to clipboard functionality Clean and responsive UI ⚠️ Challenges I Faced: While building this project, I encountered some interesting issues that helped me improve my debugging skills 👇 Issue 1: Password not generating properly Solution: Fixed logic by properly using random character selection Issue 2: Copy button not working Solution: Used navigator.clipboard.writeText() correctly Issue 3: Weak password generation Solution: Ensured inclusion of all character types Issue 4: JavaScript not working Solution: Fixed script linking and DOM loading issues ✨ This project helped me strengthen my understanding of: JavaScript logic building DOM manipulation Event handling 🔗Github Link :https://lnkd.in/dAjqqBgK Code Of School || Ritendra Gour sir || Avinash Gour sir #JavaScript #WebDevelopment #100DaysOfCode #Frontend #CodingJourney

15 JavaScript interview questions. DOM Manipulation & Events. Answer karo comments mein 👇 DOM Basics Q1. What is the DOM? Q2. What is the difference between querySelector and getElementById? Q3. What is the difference between textContent and innerHTML? Events Q4. What is an event listener and how do you add one? Q5. How do you remove an event listener? Q6. What is event bubbling? Q7. What is the difference between event bubbling and event capturing? Q8. What is e.stopPropagation() and when do you use it? Q9. What is e.preventDefault() and when do you use it? Q10. What is the difference between e.target and e.currentTarget? Event Delegation Q11. What is event delegation and why is it important? Q12. How does React use event delegation internally? Advanced Q13. What are synthetic events in React? Q14. Why should you avoid direct DOM manipulation in React? Q15. What is the difference between mouseenter and mouseover? Full answers + code on GitHub 👇 https://lnkd.in/dj72-XEi #JavaScript #JStoReact #InterviewPrep #WebDevelopment #Frontend #ReactJS #30DayChallenge #JavaScriptTips #FrontendDeveloper #100DaysOfCode

🔁 Why does this print 4, 4, 4 — and not 1, 2, 3? One of the most common JavaScript interview questions, and it all comes down to one thing: the event loop. Look at this: for (var i = 1; i <= 3; i++) {  setTimeout(() => console.log(i), 0) } What I expected when I started with Javascript: 1 2 3 What we actually get: 4 4 4 Why? 😓 😓 😓 JavaScript is single-threaded. When the loop runs, it doesn't pause and wait for setTimeout to fire. Instead, each callback gets placed in the task queue and runs only after the call stack is completely empty. So by the time any callback runs, the loop is already done — and i has already been incremented to 4. The callbacks don't hold a copy of i. They all share a reference to the same var i. And that i is now 4. But swap var for let — and suddenly it prints :1, 2, 3. Why? 😓 for (let i = 1; i <= 3; i++) {  setTimeout(() => console.log(i), 0) } let is block-scoped. Each iteration of the loop gets its own brand new i( Imagine this , let is a self-centered guy who likes to live in his own bubble) So each callback closes over a separate variable — one holding 1, one holding 2, one holding 3. When the callbacks eventually run from the task queue, they each find their own i — untouched. var shares one variable across the whole loop. let creates a fresh one per iteration. That's the entire difference. #javascript #eventloop

Day 4 — Today was the day the web stopped being static for me. DOM manipulation. Sounds scary. Actually really fun. Built a simple to-do list from scratch — no libraries, no frameworks. Just vanilla JS touching the page directly. The moment I typed something in an input field and saw it appear on screen because of code I wrote... that feeling doesn't get old. Key thing I learned: event delegation. Instead of adding an event listener to every single element, you add one to the parent and let events bubble up. Cleaner and way more efficient. Also — preventDefault() is your best friend in form handling. Took me an embarrassing number of refreshing pages to learn that lesson. What was your first "I built this" moment in coding? #javascript #webdev #frontenddeveloper #learninpublic

🚀 Day 4/30 – JavaScript Challenge Solved: Counter II (LeetCode 2665) Today’s problem was all about understanding closures and how functions can maintain their own state in JavaScript. What I learned: 1.How closures help preserve variable values across function calls 2.Creating multiple operations (increment, decrement, reset) using a single function 3.Clean use of arrow functions for concise code Approach: I created a function that stores the initial value and returns an object with three methods: 1.increment() -> increases value 2.decrement() -> decreases value 3.reset() -> resets to initial value All of this works because of closure, where the inner functions still remember the variable n. Key Insight: Closures are powerful when you need to encapsulate data and control how it’s modified — a very common pattern in real-world JavaScript applications. Consistency is the real game here 🔥 Let’s keep building, one day at a time. #Day4 #30DaysOfCode #JavaScript #WebDevelopment #CodingChallenge #LeetCode #Closures #LearningJourney

Props vs State ⚔️ 🔹 Props 📥 ✔ Passed from parent component ✔ Read-only (immutable) ✔ Used for communication 🔹 State 📦 ✔ Managed inside component ✔ Can be updated ✔ Controls dynamic behavior 🔹 Key Difference 🧠 📥 Props = External Data 📦 State = Internal Data 🔹 When to Use? 👉 Props → Send data between components 👉 State → Handle user interaction & changes #ReactJS #PropsVsState #FrontendDev #JavaScript