🔥 Advanced JavaScript and web development interview questions with Answers 🔥

🔹 JavaScript – Advanced

1. Explain the JavaScript event loop in detail. How does it differ in the browser vs Node.js?
Answer:

The event loop is a mechanism that allows JavaScript to perform non-blocking I/O operations by offloading operations to the system and executing the callback after the operation completes.

Browser:

• Has Web APIs (DOM events, setTimeout, etc.).
• macrotasks: setTimeout, setInterval, I/O, etc.
• microtasks: Promises, MutationObserver.
• Executes all microtasks before the next macrotask.

Node.js:

• Uses libuv.
• Has multiple phases: timers, I/O callbacks, idle/prepare, poll, check, close.
• Microtasks (Promises) are also prioritized between phases.

2. What are WeakMap and WeakSet and their real-world use cases?
Answer:

WeakMap and WeakSet store weak references to keys (objects only), allowing garbage collection if no other references exist.
Use case: Storing metadata or caching data tied to DOM elements without risking memory leaks.

const cache = new WeakMap();
function process(node) {
  if (!cache.has(node)) {
    cache.set(node, computeExpensiveValue(node));
  }
  return cache.get(node);
}

3. How does JavaScript handle memory management and garbage collection?
Answer:

• Mark-and-sweep: GC periodically checks which objects are still reachable from the root (global scope or closures) and clears unreachable ones.
• Reference counting: Tracks number of references (used less now due to circular reference issues).

4. Deep dive into this in different contexts, including arrow functions and class methods.
Answer:

• this depends on how a function is called.
• Arrow functions don’t bind this — they inherit from the surrounding lexical scope.
• In class methods, this refers to the instance unless the method is detached and called separately.

5. How would you implement a custom debounce and throttle function?
Answer:

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

function throttle(fn, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

🔹 Modern JavaScript (ES6+)

6. What are the benefits of using generators and when would you use them?
Answer:

• Generators pause execution (yield) and resume later.
• Useful for building iterators, state machines, and asynchronous control flows (with co or redux-saga).

function* counter() {
  let i = 0;
  while (true) yield i++;
}

7. Explain structural sharing and immutability. How do libraries like Immer or Immutable.js help?
Answer:

• Structural sharing reuses unchanged data to optimize memory.
• Immer uses proxies to allow "mutative" code that produces immutable results.
• Immutable.js uses persistent data structures.

🔹 Advanced Web Concepts

8. How would you optimize performance in a React (or large-scale frontend) application?
Answer:

• Code splitting via React.lazy, dynamic import().
• Memoization (memo, useMemo, useCallback).
• Virtualization (react-window).
• Avoid unnecessary re-renders using shouldComponentUpdate/React.memo.
• Debounce user input.
• Avoid anonymous functions in props.
• Server-side rendering (SSR) and hydration strategies.

9. Explain CSP (Content Security Policy) and how to prevent XSS in SPAs.
Answer:

• CSP is a browser feature to restrict resource loading (scripts, styles, etc.).
• Prevent XSS via:
• Escaping dynamic content.
• Using frameworks that auto-sanitize (React, Angular).
• Avoid dangerouslySetInnerHTML.
• Set HTTP headers: Content-Security-Policy, X-Content-Type-Options, X-XSS-Protection.

10. Describe the process of server-side rendering (SSR) and hydration in Next.js.
Answer:

• SSR: HTML is rendered on the server using getServerSideProps.
• Hydration: React attaches event listeners and reactivates the app on the client side using the static HTML.
• Benefits: SEO, faster First Contentful Paint (FCP).

If this helped, feel free to save, share, or comment!💥