Core Concepts Cheat Sheet

Use these snapshots alongside the prep plan. Each section includes talking points, tips, and quick reminders tailored to senior frontend roles.

Runtime & Language Essentials

JavaScript engines and runtime model

• Engines: V8, SpiderMonkey, and JavaScriptCore compile and optimize hot paths (JIT).
• Event loop: Microtasks (promises, queueMicrotask) run after the current stack, before macrotasks (setTimeout, I/O).
• Execution contexts: Lexical scope, closures, and this binding affect runtime behavior.

Modules and bundling

• ESM vs CJS: Prefer ESM for modern tooling and tree-shaking.
• Bundling: Vite/Webpack/esbuild handle code splitting, asset loading, and transpilation.
• Dynamic imports: Use for route-level or feature-level code splitting.

Value vs reference

• Primitives: Copied by value (number, string, boolean, bigint, symbol, null, undefined).
• Objects: Passed by reference; mutation affects all references.
• Immutability: Use object spread, Array.map, and structural sharing for predictable state.

Async and Concurrency

Async/Await quick notes

• Await yields: It pauses the function and resumes on microtask completion.
• Cancellation: Use AbortController for fetch and DOM-related async work.
• Parallelism: Promise.all for concurrent I/O; avoid blocking the main thread.

const controller = new AbortController();
const response = await fetch('/api/data', { signal: controller.signal });

Task scheduling

• Microtasks: Promises, queueMicrotask.
• Macrotasks: Timers, UI events, network callbacks.

Memory & Performance Basics

Garbage collection in JS

• Generational GC: Short-lived objects collected frequently; long-lived objects promoted.
• Leaks: Detached DOM nodes, global caches, and unremoved listeners.
• Profiling: Use Chrome DevTools memory heap snapshots and performance timelines.

Rendering performance

• Avoid layout thrash: Batch DOM reads/writes.
• Virtualization: Use react-window or similar for large lists.
• Web Vitals: LCP, INP, CLS are the core metrics for UX.

Data Structures and Algorithms

Collections

• Array: Fast indexed access; push is amortized O(1); shift is O(n).
• Map/Set: Ideal for O(1) lookups and membership checks.

Sorting and searching

• Sorting: JS sort is O(n log n) and uses a stable sort in modern engines.
• Searching: Use binary search for sorted data; otherwise linear scan.

API and Service Design (Frontend)

API client patterns

• Centralize base URL, headers, auth, retries, and error mapping.
• Validate responses with runtime guards (Zod/Valibot) to protect UI state.
• Use caching strategies like stale-while-revalidate.

Resilience

• Retries: Exponential backoff with jitter for transient failures.
• Timeouts: Wrap promises to avoid hanging UI.
• Fallbacks: Use cached or placeholder data when possible.

Interview-ready checklists

• Explain how the event loop affects UI responsiveness.
• Describe how you avoid re-render storms in React/Angular.
• Discuss trade-offs in global state vs local component state.
• Walk through debugging a memory leak using DevTools.