JavaScript Function Behavior with Undefined and Extra Args

🚀 **JavaScript Interview Question** What will be the output of this code? ```js const obj = { a: { b: 0 } }; const v1 = obj?.a?.b || 42; const v2 = obj?.a?.b ?? 42; console.log(v1, v2); ``` 🤔 **Think before you scroll...** --- #JavaScript #Frontend #WebDevelopment #CodingInterview #ReactJS

🚨 React Interview Scenario (Real World) You have a component that fetches data from an API. useEffect(() => { fetchData(); }, []); Everything works fine… But suddenly: 👉 API is called multiple times 👉 Even though dependency array is empty 👀 Why is this happening? 👉 How would you fix it? Bonus: What changes in production vs development? #ReactJS #FrontendInterview #ReactHooks #JavaScript #FrontendDeveloper #WebDevelopment

💡 **Daily React/JavaScript Interview Tip** The event loop isn’t just theory—it explains **why your code runs in a certain order**. 👉 Weak answer: “The event loop handles async operations.” ✅ Stronger answer: “JavaScript is single-threaded, so it uses the event loop to manage async tasks. Synchronous code runs first, then callbacks from the task queue (like `setTimeout`) and microtask queue (like Promises) are processed. Microtasks always run before the next task, which is why Promise callbacks execute before `setTimeout`.” 🧠 Example: ```js console.log('A'); setTimeout(() => console.log('B'), 0); Promise.resolve().then(() => console.log('C')); console.log('D'); ``` 👉 Output: A D C B 📌 Tip: If you can clearly explain **call stack, task queue, and microtask queue with an example**, you’ll stand out instantly. #JavaScript #EventLoop #WebDevelopment #AsyncJavaScript #TechInterviews

🧠 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩 – 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐅𝐚𝐯𝐨𝐫𝐢𝐭𝐞 🚀 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 Interview Trap — Can You Predict the Output? for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }, 1000); } 🤔 What do you think this will print? Most developers expect: 👉 0 1 2 3 4 But the actual output is: 👉 5 5 5 5 5 🚨 Why does this happen? Because: var is function-scoped, not block-scoped By the time setTimeout runs, the loop has already completed So i becomes 5 for all executions 🧠 Fix it using let (block scope): for (let i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }, 1000); } ✅ Output: 👉 0 1 2 3 4 🔥 Key Takeaways: Understand var vs let scope Know how closures work Be careful with async functions inside loops 📌 This is one of the most common JavaScript interview questions! #JavaScript #WebDevelopment #CodingInterview #Frontend #AsyncJavaScript #LearnToCode

One of the most common JavaScript interview questions: "Why does setTimeout with 0ms delay not run immediately?" Most developers cannot answer this correctly. Here is the full explanation: JavaScript is single-threaded. It can only do one thing at a time. The Event Loop is how it manages everything else. The execution order is always the same: 1 — Synchronous code runs first All regular code on the Call Stack executes immediately. 2 — Microtasks run second Promises, async/await — these run before anything else once the Call Stack is empty. 3 — Macrotasks run last setTimeout, setInterval, DOM events — these wait until ALL microtasks are done. This is why setTimeout with 0ms still runs after a Promise. The Promise is a microtask. setTimeout is a macrotask. Microtasks always win. Understanding this prevents real bugs in production — async state updates, race conditions, unexpected render order. Save this post for your next async debugging session. Have you ever been confused by JavaScript async order? Drop a comment below. #JavaScript #WebDevelopment #Frontend #SoftwareEngineering #AsyncJavaScript

🚀 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 — 𝗢𝗻𝗲 𝗼𝗳 𝘁𝗵𝗲 𝗠𝗼𝘀𝘁 𝗔𝘀𝗸𝗲𝗱 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀! If you’ve ever prepared for a JavaScript interview, you’ve definitely come across closures. But do you truly understand them? In simple terms: A closure is when a function “remembers” the variables from its outer scope even after that outer function has finished executing. 𝗪𝗵𝘆 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝗲𝗿𝘀 𝗹𝗼𝘃𝗲 𝘁𝗵𝗶𝘀 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻? Because it tests your understanding of:  • Scope  • Lexical environment  • Memory behavior in JavaScript Quick Example: function outer() {  let count = 0;  return function inner() {   count++;   console.log(count);  }; } const counter = outer(); counter(); // 1 counter(); // 2 Here, inner() still has access to count even after outer() is executed — that’s a closure! 🔥 𝗥𝗲𝗮𝗹-𝗪𝗼𝗿𝗹𝗱 𝗨𝘀𝗲 𝗖𝗮𝘀𝗲𝘀 • Data privacy (encapsulation) • Creating counters & stateful functions • Event handlers & callbacks • Memoization & performance optimizations 💬 If you’re preparing for interviews, don’t just memorize definitions — understand how closures work under the hood. #frontend #javascript #reactjs #nextjs #community

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

🔥 JavaScript Interview Question That Trips Many Developers Here’s a simple-looking question that reveals how well you understand this in JavaScript 👇 const obj = { name: 'Alice', greet() { console.log(this.name); }, greetArrow: () => { console.log(this.name); }, }; obj.greet(); obj.greetArrow(); const fn = obj.greet; fn(); ❓ What will be the output? ✅ Answer: Alice undefined undefined 💡 Explanation (Must-Know for Interviews): 1️⃣ obj.greet() Regular function this → refers to obj 👉 Output: Alice 2️⃣ obj.greetArrow() Arrow function Doesn’t have its own this Takes this from outer (global) scope 👉 Output: undefined 3️⃣ fn() Function is detached from object this is lost (defaults to global/undefined) 👉 Output: undefined 🧠 Key Takeaways: ✔ this depends on how a function is called ✔ Arrow functions don’t bind this ✔ Extracting methods can break this 💥 Pro Tip: If you want to preserve this: const fn = obj.greet.bind(obj); fn(); // Alice #JavaScript #Frontend #WebDevelopment #InterviewPrep #CodingInterview #JSConcepts

Most Asked JavaScript Interview Question: Flatten a Nested Array (Without Using .flat()) There are two common ways to flatten an array in JavaScript: 1️⃣ Using the built-in .flat() method 2️⃣ Using recursion (important for interviews) Using Recursion let arr = [[1, 2, 3, 4, 1, 2], 3, 4, [3, 1], 3, 4, 5]; let flat = []; function flatArrayFunc(arr, flat) { for (let i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { flatArrayFunc(arr[i], flat); } else { flat.push(arr[i]); } } } flatArrayFunc(arr, flat); console.log(flat); #JavaScript #CodingInterview #FrontendDeveloper #WebDevelopment