JavaScript Interview Questions
Master core JavaScript concepts, closures, async/await, and the event loop with real-world scenarios. Prepare with these 2 real-world questions covering beginner to advanced scenarios.
How does the JavaScript Event Loop work?
Simple Answer
The Event Loop is how JavaScript handles multiple tasks (like fetching data or timers) without freezing the browser, even though it only has one single thread. It pushes quick tasks to the Call Stack, and sends slow tasks to Web APIs. When slow tasks finish, they wait in a Queue until the Call Stack is empty, and then the Event Loop moves them back to be executed.
Detailed Answer
In a real interview, you should explain it in three parts: The Call Stack, Web APIs, and the Callback Queue (Task Queue).
1. **Call Stack:** Where your code is executed line by line. If a function is called, it goes on the stack. When it finishes, it pops off.
2. **Web APIs:** When JS hits an asynchronous task like `setTimeout` or a `fetch` request, it hands it off to the browser's Web APIs so the Call Stack can keep running other code.
3. **Callback/Microtask Queue:** Once the Web API finishes the task, it sends the callback function to the Queue.
4. **The Event Loop:** This is a constant monitoring process. It checks: 'Is the Call Stack empty?' If yes, it takes the first task from the Queue and pushes it to the Call Stack to be executed.
Interview Tip
Don't just recite definitions. Mention the difference between the **Microtask Queue** (used for Promises) and the **Macrotask Queue** (used for setTimeout). Interviewers love asking which one has higher priority (Answer: Microtasks are processed before Macrotasks).
Common Mistake
Thinking JavaScript is multi-threaded. It is single-threaded. Asynchrony is provided by the browser environment, not the JavaScript engine itself.
Real World Example
Imagine a fast-food restaurant with one cashier (Call Stack). You order a burger. If the cashier went to the kitchen to cook it, the line would stop (blocking). Instead, they send the order to the kitchen (Web APIs) and take the next customer's order. When your burger is ready, it's placed on the pickup counter (Queue). When the cashier finishes with their current customer (Call Stack is empty), they hand you your burger (Event Loop).
A React page is fetching data twice on load. How do you debug it?
Simple Answer
In React 18, Strict Mode causes components to mount, unmount, and remount in development mode. This makes `useEffect` run twice to help you catch bugs. It will only run once in production.
Detailed Answer
When debugging a double-fetch, the first thing I check is if the app is wrapped in `<React.StrictMode>` inside `index.js` or `main.jsx`. In React 18, Strict Mode intentionally double-invokes `useEffect` in development to simulate how components behave when they are hidden and restored (like navigating tabs).
If it's not Strict Mode, I check the dependency array of the `useEffect`. If a state variable or an object/function reference is in the dependency array and it changes immediately after the fetch, it will trigger an infinite loop or a double fetch.
Interview Scenario Walkthrough
My Thinking Process:
"1. Is this development or production? 2. What does the dependency array look like? 3. Is there a cleanup function?"
Possible Causes:
- React.StrictMode is enabled (React 18).
- A changing object/array reference in the dependency array.
- Parent component is re-rendering and unmounting/remounting the child.
How I Would Answer:
"If I see a double fetch, my first assumption in a modern React app is Strict Mode running in development. I would verify this by checking the network tab in a production build. If it still happens, I'd check the `useEffect` dependency array to ensure we aren't passing unstable object references that cause unintended re-renders. To fix the actual request duplication, I would implement an AbortController to cancel the stale request, or introduce React Query to handle caching and deduplication."
Interview Tip
Interviewers ask this to see if you have hands-on experience with React 18. Mentioning Strict Mode immediately shows you've encountered this real-world frustration.
Common Mistake
Removing `<React.StrictMode>` just to stop the double logs. It's better to leave it and use a cleanup function inside `useEffect` (like an AbortController for fetch requests) to cancel the first request.
Real World Example
You have a dashboard that loads a list of users. You notice the network tab shows two API calls to `/api/users`. Before wasting hours trying to rewrite the fetch logic, build the app for production (`npm run build` and `npm start`). If the double call disappears, it was just Strict Mode.
Test Your JavaScript Knowledge
Take this quick interactive quiz to see if you retained the key concepts.
JavaScript Mastery Quiz
Question 1 of 2How does the JavaScript Event Loop work?
Keep Building Your JavaScript Skills
Interview prep works best when combined with hands-on practice. Use these resources to deepen your understanding and build portfolio projects.