JavaScript Interview Questions: Functions, Scope & Closures Explained

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

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

#js #7 **Function Declaration vs Function Expression in JavaScript** 🔹 Function Declaration Definition: A function declaration defines a named function using the function keyword. function greet() {  console.log("Hello"); } ✅ Features: Must have a name Hoisted (can be called before it is defined) Declared as a separate statement Example (Hoisting): greet(); // works function greet() {  console.log("Hello"); } 🔹 Function Expression Definition: A function expression is when a function is assigned to a variable. const greet = function () {  console.log("Hello"); }; ✅ Features: Can be anonymous (no name) Not hoisted (cannot be used before definition) Treated like a value Example: greet(); // ❌ Error const greet = function () {  console.log("Hello"); } #Javascript #ObjectOrientedProgramming #SoftwareDevelopment

15 JavaScript interview questions. Promises & Async/Await. Answer karo comments mein 👇 Promises Q1. What is a Promise in JavaScript and why does it exist? Q2. What is the difference between resolve and reject? Q3. What does .then() return? Q4. What is the difference between .catch() and the second argument of .then()? Q5. What does .finally() do? Async/Await Q6. What is async/await and how does it relate to Promises? Q7. What does an async function always return? Q8. Can you use await outside an async function? Q9. What happens if you don't use try/catch with async/await? Q10. What is the difference between sequential and parallel async calls? Promise Methods Q11. What is the difference between Promise.all and Promise.allSettled? Q12. What is Promise.race and when would you use it? React Connection Q13. Why can't useEffect callback be directly async? Q14. What is the standard loading/error/data pattern in React? Q15. What is the difference between async errors and sync errors in React? Full answers + code on GitHub 👇 https://lnkd.in/dj72-XEi #JavaScript #JStoReact #InterviewPrep #WebDevelopment #Frontend #ReactJS #30DayChallenge #JavaScriptTips #FrontendDeveloper #100DaysOfCode

💡JavaScript Interview Question💡 Predict the output of the below code and explain in detail. const result = ("b" + "a" + +"cteri" + "a").toLowerCase(); console.log(result); 𝗔𝗻𝘀𝘄𝗲𝗿: The above code prints "banana" as the output. This is because in JavaScript unary + operator converts a string into a number for example, +"5" will return 5 but If the string to be converted is not a number then NaN is returned so in the above code +"cteria" will result in NaN So, "b" + "a" => "ba" "ba" + +"cteria" => "baNaN" "baNaN" + "a" => "baNaNa" ("baNaNa").toLowerCase() => "banana" So, even If you write ("b" + "a" + + "a" + "a").toLowerCase(), it will still result into "banana". 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. #javascript #reactjs #nextjs #webdevelopment

🧠 == vs === in JavaScript (One Small Difference That Causes Big Bugs) One of the first things I learned in JavaScript was: 👉 Always use === instead of == But I didn’t fully understand why until I saw how they actually behave. Here’s a simple breakdown 👇 🔹 == (Loose Equality) == compares values after type conversion (type coercion). Example: 0 == "0" // true false == 0 // true JavaScript tries to convert values to the same type before comparing. This can lead to unexpected results. 🔹 === (Strict Equality) === compares both value and type. Example: 0 === "0" // false false === 0 // false No type conversion happens here. 🔹 Why this matters Using == can introduce subtle bugs because of automatic type coercion. Using === makes your code: ✅ more predictable ✅ easier to debug ✅ less error-prone 💡 One thing I’ve learned: Small JavaScript concepts like this can have a big impact on code reliability. Curious to hear from other developers 👇 Do you ever use ==, or do you always stick with ===? #javascript #frontenddevelopment #webdevelopment #reactjs #softwareengineering #developers

I was recently asked a classic JavaScript "gotcha" in an interview: "How do you return an object in an arrow function, and why are parentheses required?" It sounds simple But the "Why" is where most developers get tripped up. The Problem: In JavaScript, {} is ambiguous. It can mean an Object Literal OR a Function Block. By default, the JS engine sees a brace after an arrow => and assumes it's a function block. The Result: const getUser = () => { name: 'Chandhan' }; The engine thinks name: is a label and returns undefined. The Fix: Wrap it in parentheses! ({ ... }) The () forces the engine to treat the contents as an expression, not a statement. ✅ const getUser = () => ({ name: 'Chandhan' }); Small syntax, big difference in how the engine parses your code. #JavaScript #WebDevelopment #CodingTips #Angular #Frontend #InterviewPrep

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗘𝘃𝗲𝗻𝘁𝗟𝗼𝗼𝗽 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 (𝗔 𝗠𝘂𝘀𝘁‐𝗞𝗻𝗼𝘄 𝗖𝗼𝗻𝗰𝗲𝗽𝘁) Understanding the JavaScript Event Loop is a game changer for writing efficient and predictable asynchronous code. Many developers use setTimeout and Promises every day — but far fewer truly understand how JavaScript executes async tasks behind the scenes. Let’s break it down 👇 𝗛𝗼𝘄 𝘁𝗵𝗲 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗪𝗼𝗿𝗸𝘀 • JavaScript runs on a single thread • Synchronous code executes first via the Call Stack • Then Microtasks run (like Promises) • Next, one Macrotask executes (timers, events) • This cycle continues repeatedly 𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗣𝗿𝗶𝗼𝗿𝗶𝘁𝘆 ➡️ Synchronous ➡️ Microtasks ➡️ Macrotasks 𝗪𝗵𝘆 𝘁𝗵𝗶𝘀 𝗰𝗼𝗻𝗰𝗲𝗽𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀 ✅ Debug async issues with confidence ✅ Avoid unexpected execution order ✅ Build more predictable React applications ✅ Frequently tested in frontend interviews Credit: owner Follow Rensith Udara Gonalagoda for more related content! 🤔 Having Doubts in technical journey? 🚀 Book 1:1 session with me : https://lnkd.in/gQfXYuQm 🚀 Subscribe and stay up to date: https://lnkd.in/dGE5gxTy 🚀 Get Complete React JS Interview Q&A Here: https://lnkd.in/d5Y2ku23 🚀 Get Complete JavaScript Interview Q&A Here: https://lnkd.in/d8umA-53 #JavaScript #EventLoop #FrontendDevelopment #ReactJS #WebDevelopment #InterviewPrep #AsyncJavaScript #SoftwareEngineering

💡 Still confused about call(), apply(), and bind() in JavaScript? Let’s fix that in 60 seconds. If you've ever struggled with how this works in JavaScript… you're not alone. These three methods are your secret weapons to take control of it. 👉 Here’s the simplest way to understand them: 🔹 call() Invokes the function immediately Pass arguments one by one fn.call(thisArg, arg1, arg2) 🔹 apply() Also invokes immediately But takes arguments as an array fn.apply(thisArg, [args]) 🔹 bind() Does NOT run immediately Returns a new function you can call later const newFn = fn.bind(thisArg) 🧠 Think of it like this: call → “Run now, here are the args” apply → “Run now, here’s a list of args” bind → “Save this for later with this context” ✨ Why it matters: Mastering these helps you: ✔ Control this like a pro ✔ Reuse methods across objects ✔ Avoid common bugs in callbacks & event handlers 🔥 Pro tip: In modern JS, apply() is less common thanks to the spread operator: fn.call(thisArg, ...args) 📌 If you're preparing for interviews or leveling up your JS fundamentals — this trio is a must-know. 💬 Which one do you use the most: call, apply, or bind? #JavaScript #WebDevelopment #Frontend #CodingTips #100DaysOfCode