Frontend & Java script Interview Questions

Core JavaScript

1. Difference between var, let, and const.
2. Explain hoisting in JavaScript.
3. Difference between == and ===.
4. Explain this keyword in different contexts (global, function, class, arrow function).
5. Difference between call, apply, and bind.
6. Event bubbling vs event capturing.
7. What is closure? Give example.
8. Difference between null and undefined.
9. Difference between map, forEach, filter, reduce.
10. What is IIFE (Immediately Invoked Function Expression)?
11. Difference between synchronous and asynchronous JavaScript.
12. What is the event loop? Explain microtasks and macrotasks.
13. Difference between shallow copy and deep copy — how to implement.
14. Difference between Object.assign() and spread operator.
15. Explain prototype and prototype chain.
16. Explain ES6 modules and CommonJS modules difference.
17. What are Promises and how do they work?
18. Difference between async/await and .then/.catch().
19. How does garbage collection work in JS?
20. Difference between for…in and for…of.

---

Advanced / Scenario-Based JS

1. Implement debounce and throttle functions — explain use case.
2. Difference between mutable and immutable objects in JS.
3. Explain memory leak scenarios in JS and how to prevent.
4. Implement a function to deep clone nested objects.
5. Difference between setTimeout(fn, 0) and Promise.resolve().then(fn).
6. Explain Symbol and its usage.
7. Difference between generator function and async generator.
8. How to handle large array processing without blocking UI (chunking).
9. Explain WeakMap and WeakSet.
10. Difference between Object.freeze() and const in objects.

---

Tricky JavaScript Questions (Advanced)

1. What's the output?

javascript

console.log(typeof typeof 1);
console.log(0.1 + 0.2 === 0.3);
console.log([] == ![]);
console.log(+'10' + 5);

1. Explain the execution order:

javascript

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

1. Temporal Dead Zone (TDZ) — explain with example and why it exists.
2. What happens when you do this?

javascript

const obj = { a: 1 };
const arr = [obj, obj];
arr[0].a = 2;
console.log(arr[1].a); *// ?*

1. Explain currying — implement a curry function that works for any function.
2. What's wrong with this code?

javascript

for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}

How to fix it? (Multiple solutions)

1. Implement a pipe/compose function — explain the difference.
2. Explain Proxy and Reflect API — practical use case (e.g., validation).
3. What is the difference between Object.create(null) and {}?
4. Implement a function that executes promises in sequence (not parallel).
5. Explain the difference between:

javascript

`function foo() { return { bar: "hello" }; }
function foo() { 
  return 
  { bar: "hello" }; 
}`

1. What is the new keyword doing internally? Implement your own new operator.
2. Explain tail call optimization — does JS support it?
3. Implement a memoization function that works for any function with any number of arguments.
4. What's the output and why?

javascript

`const promise = new Promise((resolve) => {
  console.log(1);
  resolve();
  console.log(2);
});
promise.then(() => console.log(3));
console.log(4);`

1. How do you detect if a function is called with new?
2. Implement Promise.all, Promise.race, and Promise.allSettled from scratch.
3. What is the difference between Promise.then() chaining and async/await error propagation?
4. Explain the "double equals quirks":

javascript

`[] == ![] *// true*
{} == !{} *// false*
[] == [] *// false*`

1. What's the difference between arguments and rest parameters? Why avoid arguments?

---

Advanced Memory & Performance Questions

1. Memory leak scenario: Event listeners not removed — how to detect and fix?
2. Explain V8's garbage collection algorithms: Mark-and-sweep, Scavenge, Major GC.
3. How to profile memory usage in Node.js? Tools and approaches.
4. What causes memory leaks in closures? Give specific example.
5. Explain hidden classes and inline caching in V8 — how to write optimized code?
6. What is the -max-old-space-size flag? When to use it?
7. How do you handle 10GB file processing in Node.js without loading it all into memory?
8. Implement a LRU (Least Recently Used) cache with O(1) get and put operations.
9. Explain memory fragmentation — how does it affect Node.js applications?
10. How to detect and fix event loop blocking in production?

---

React / Next.js / State Management Questions

React Core

1. Difference between class components and functional components.
2. What is virtual DOM and how React uses it?
3. Explain React lifecycle methods (class) and hooks equivalents.
4. Explain useState and useEffect — common pitfalls.
5. Explain useMemo and useCallback — when and why to use.
6. Difference between controlled and uncontrolled components.
7. Explain React context API and its use case.
8. How to prevent unnecessary re-renders in React.
9. Difference between key props in lists — why important.
10. Explain reconciliation in React.

React Advanced / Optimization

1. Explain code splitting and lazy loading in React.
2. Difference between React.memo, PureComponent, and useMemo.
3. How to optimize React app performance — list techniques.
4. Explain event delegation in React.
5. How to handle large forms efficiently.
6. How to handle error boundaries in React.
7. What is Suspense and Concurrent Mode in React.
8. Difference between client-side rendering and server-side rendering.

---

React Advanced & Tricky Questions

1. What's wrong with this code?

javascript

function Component() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
};
return <button onClick={handleClick}>{count}</button>;
}

How to fix it? Explain batching.

1. Explain the difference between:

javascript

useEffect(() => { */* ... */* }, []);
useEffect(() => { */* ... */* });
useLayoutEffect(() => { */* ... */* }, []);

1. Why is this an infinite loop?

javascript

useEffect(() => {
setData(fetchData());
}, [data]);

1. Implement a custom hook for debounced value.
2. What's the difference between:

javascript

<Component data={data} />
<Component data={[...data]} />

1. Explain stale closures in React hooks — give example and solution.
2. How to share stateful logic between components without Context or Redux? (Custom hooks)
3. What's the purpose of the key prop in React? Why not use index as key?
4. Implement useReducer from scratch — explain when to use it over useState.
5. Explain React Fiber architecture — how it enables concurrent rendering.
6. How does React decide when to batch state updates? Automatic batching in React 18.
7. What's the difference between flushSync and normal state updates?
8. How to prevent child component re-render when parent re-renders? (Multiple techniques)
9. Explain React's reconciliation algorithm — Diff algorithm in detail.
10. What happens when you call setState in render method? Why is it dangerous?
11. Implement a custom usePrevious hook that returns previous value of a state.
12. How to handle race conditions in useEffect with API calls?
13. Explain ref forwarding and useImperativeHandle — when to use?
14. What's the difference between synthetic events and native events in React?
15. How to optimize context to prevent unnecessary re-renders? Split context technique.

---

Next.js Advanced Questions

1. Difference between SSR, SSG, ISR, and CSR in Next.js.
2. Explain getServerSideProps vs getStaticProps.
3. Explain API routes in Next.js.
4. How to implement dynamic routing in Next.js.
5. Explain Next.js image optimization.
6. How to handle authentication in Next.js (JWT, cookies).
7. Explain incremental static regeneration (ISR).
8. How to optimize Next.js app performance (bundle splitting, caching).

Next.js Advanced & Tricky

1. How does Next.js handle automatic code splitting? Can you control it?
2. Explain the difference between next/link and regular anchor tags — prefetching behavior.
3. How to implement middleware in Next.js 13+? Use cases and limitations.
4. Explain App Router vs Pages Router — migration strategy.
5. How to handle environment variables securely in Next.js? NEXT_PUBLIC_ prefix.
6. What's the difference between:

javascript

`export const revalidate = 60; *// ISR*
export const dynamic = 'force-dynamic'; *// SSR*
export const dynamic = 'force-static'; *// SSG*`

1. How to implement edge functions in Next.js? Difference from serverless.
2. Explain streaming SSR in Next.js 13+ — Suspense boundaries.
3. How to optimize fonts in Next.js? next/font system.
4. What happens when you use use client directive? Bundle implications.
5. How to handle SEO for dynamic routes? generateMetadata function.
6. Explain parallel and intercepting routes in App Router.

---

Redux / State Management

1. Difference between Redux and React context.
2. Explain Redux flow — actions, reducers, store.
3. How to avoid unnecessary re-renders with Redux.
4. Difference between middleware in Redux — thunk, saga.
5. How to structure Redux state for large apps.
6. Explain Redux Toolkit and why it's preferred.
7. How to handle async API calls in Redux.
8. How to persist Redux state in localStorage/sessionStorage.

Redux Advanced & Tricky

1. Why is Redux state immutable? What happens if you mutate?
2. Explain Redux middleware — implement a custom logger middleware.
3. What's the difference between:

javascript

`useSelector(state => state.user)
useSelector(state => ({ user: state.user }))`

Re-render implications.

1. How does Redux Toolkit's createSlice work under the hood? Immer integration.

2. Explain Redux Saga effects: call, put, take, fork, spawn.

3. How to handle optimistic updates in Redux?

4. What's the difference between combineReducers and a single reducer?

5. How to implement time-travel debugging? Redux DevTools internals.

6. Explain selectors and reselect library — memoization benefits.

7. How to handle authentication state in Redux? Token refresh flow.

8. What's the difference between Redux Thunk and Redux Saga? When to use each?

9. How to test Redux reducers and actions? Best practices.