12 Frontend Interview Questions That Senior Devs Still Get Wrong

Source: Dev.to

1️⃣ Event‑Loop Execution Order

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

Answer: 1, 4, 3, 2

Why seniors get it wrong:

• setTimeout creates a macrotask (task queue).
• Promise.then creates a microtask.
• The event loop empties the microtask queue before moving to the next macrotask.

Interview tip: Draw the call stack, the micro‑task queue, and the macro‑task queue. Visual thinking is a big plus for interviewers.

---

2️⃣ CSS Specificity

#header .nav li a { color: blue; }   /* Specificity: 0‑1‑2‑1 */
.nav-link.active { color: red; }     /* Specificity: 0‑0‑2‑0 */

Answer: Blue wins.

The trap: Many senior devs think “more classes = higher specificity.” An ID selector (#header) outranks any number of class selectors.

Specificity Table

Specificity is a tuple, not a single number.

---

3️⃣ var vs. let in Loops

function createButtons() {
  const buttons = [];
  for (var i = 0; i  console.log(i));
  }
  return buttons;
}
createButtons().forEach(btn => btn());

Output: 5, 5, 5, 5, 5 (not 0,1,2,3,4)

Fixes

// 1️⃣ Block‑scoped `let`
function createButtons() {
  const buttons = [];
  for (let i = 0; i  console.log(i));
  }
  return buttons;
}

// 2️⃣ IIFE (classic)
function createButtons() {
  const buttons = [];
  for (var i = 0; i  console.log(j));
    })(i);
  }
  return buttons;
}

Why it matters: Shows understanding of scope chains vs. block scoping—critical for debugging memory‑leak‑prone code.

---

4️⃣ this in Arrow Functions

const obj = {
  name: 'Widget',
  getName: () => this.name,
  getNameFn() { return this.name; }
};

console.log(obj.getName());   // undefined
console.log(obj.getNameFn()); // 'Widget'

Explanation: Arrow functions don’t have their own this; they inherit it from the lexical environment (the module/global scope here). Regular functions get this bound to the calling object.

Senior trap: “I always use arrow functions.” – Do you know when not to?

---

5️⃣ Virtual DOM (VDOM) Myth

• Common belief: “VDOM makes React fast.”
• Reality:
  • VDOM adds diffing overhead.
  • Direct DOM manipulation is faster for simple, targeted updates.
  • VDOM shines when you don’t know what changed (declarative UI).
  • Frameworks like Svelte prove you can achieve great performance without a VDOM.

Interview answer:

“VDOM is a trade‑off: it gives us declarative UI at the cost of diffing overhead. It’s not inherently fast; it’s fast enough while being developer‑friendly.”

---

6️⃣ Core Web Vitals (2024+)

Senior trap: Knowing the acronyms but not how to improve them.

Quick Wins

• LCP: Preload hero image, fetchpriority="high".
• CLS: Set explicit width/height on images & videos.
• INP: Break long tasks with scheduler.yield() or requestIdleCallback.

---

7️⃣ Promise Combinators

// Promise.all – fails fast
Promise.all([fetch('/a'), fetch('/b'), fetch('/c')])
  .catch(err => /* ONE failure kills ALL */);

// Promise.allSettled – always completes
Promise.allSettled([fetch('/a'), fetch('/b'), fetch('/c')])
  .then(results => results.filter(r => r.status === 'fulfilled'));

---

8️⃣ Media Queries vs. Container Queries

/* Viewport‑based */
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

/* Container‑based */
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Why it matters: Components should adapt to their container, not just the viewport. A card inside a sidebar should stay narrow even on a wide screen.

Senior trap: Still relying only on media queries in 2026. Container queries now have 95 %+ browser support.

---

9️⃣ Map vs. WeakMap (Memory Leaks)

// Regular Map – can cause leaks
const cache = new Map();
function process(obj) {
  cache.set(obj, expensiveComputation(obj));
  // `obj` can never be garbage‑collected while in the Map
}

// WeakMap – no leak
const cache = new WeakMap();
function process(obj) {
  cache.set(obj, expensiveComputation(obj));
  // `obj` can be GC'd when there are no other references
}

Use cases:

• Storing metadata for DOM elements.
• Private class fields.
• Caching without preventing garbage collection.

---

🔟 From URL to Pixels (Browser Rendering Pipeline)

DNS → TCP → TLS → HTTP → HTML parsing → CSSOM → Render Tree
      → Layout → Paint → Composite

Key insights:

• CSS blocks rendering.
• JavaScript blocks HTML parsing (unless defer/async).

Performance pattern

SSR flow:

1. HTML arrives → browser shows content (fast FCP).
2. JS downloads → framework “hydrates”.
3. Page becomes interactive (TTI).

Hydration tax: Gap between FCP and TTI.

Modern solutions:

• Partial hydration – Astro islands
• Resumability – Qwik (zero hydration)
• Streaming SSR – React 18 Suspense
• Progressive hydration – load JS only for visible components first

Senior answer: “I’d first evaluate whether we even need client‑side JS for this component.”

---

1️⃣1️⃣ Tree‑Shaking & Bundle Size

// ❌ Imports EVERYTHING
import _ from 'lodash';          // ~71 KB gzipped

// ✅ Imports only what you need
import debounce from 'lodash-es/debounce'; // ~1 KB

Why tree‑shaking fails:

• CommonJS (require) can’t be statically analyzed.
• Side‑effects in modules prevent elimination.
• Missing "sideEffects": false in package.json.
• Barrel files (index.js re‑exports) defeat static analysis.

Check your bundle:

npx webpack-bundle-analyzer

---

1️⃣2️⃣ Real‑World Interview Question Checklist

These 12 questions are taken from 40+ actual frontend interviews (2022‑2026). They separate senior from truly senior developers.

• Understand the event loop (micro‑ vs. macro‑tasks).
• Master CSS specificity calculations.
• Know the difference between var, let, and IIFE closures.
• Be aware of this binding rules for arrow vs. regular functions.
• Have a nuanced view of the Virtual DOM trade‑offs.
• Keep up‑to‑date with Core Web Vitals (especially INP).
• Choose the right Promise combinator for the problem.
• Use container queries where appropriate.
• Prevent memory leaks with WeakMap.
• Explain the browser rendering pipeline and hydration costs.
• Optimize bundles with proper tree‑shaking techniques.

Good luck! 🎉

# Cheat Sheet Overview

**Cheat Sheet** — covering React internals, TypeScript advanced patterns, system design for front‑ends, and accessibility gotchas.

## More Cheat Sheets

- 📊 **50 DSA Patterns for Coding Interviews** — **$9**
- 🏗️ **40 System Design Patterns** — **$9**
- 🗃️ **SQL Interview Patterns** — **$7**

---

### Building Something?

Check out **DonFlow** — a budget‑drift detector that runs entirely in your browser.  
Zero backend, zero signup, and your data never leaves your device.