JavaScript Interview Questions: Memory, Async & Performance

The alarm went off at 02:13 AM. Our production dashboard showed a steady climb in RSS and latency, and within minutes the Node.js service that powers the checkout flow started throwing “out of memory” errors. The root cause? A tiny utility that cached every incoming order object for later analytics—but it never released them. In a high‑traffic shop, that pattern turned a few megabytes per second into a multi‑gigabyte heap, stalling the V8 mark‑compact phase and killing the user experience.

That night taught me three hard‑won lessons: you can’t ignore the runtime’s memory model, you must measure before you “optimize”, and senior‑level interview questions should surface exactly those hidden edge cases.

JavaScript Interview Guide for Software Engineers

A comprehensive guide to JavaScript interview questions, covering core concepts (hoisting, closures), asynchronous patterns (Promises, async/await), and performance analysis. It includes real‑world metrics, system design considerations, and architectural trade‑offs for senior engineering roles, moving beyond syntax to practical application and optimization.

Execution Context, Hoisting & The TDZ

When a function is invoked, V8 creates an execution context—a stack frame that holds the lexical environment, variable environment, and this‑binding. The variable environment is populated during the creation phase, where var bindings are hoisted to undefined, let/const create a temporal dead zone (TDZ), and function declarations receive a full function object.

// Node.js v22 LTS
// demo-execution-context.js
(() => {
  console.log(message);    // ReferenceError: Cannot access 'message' before initialization
  let message = 'Hello';
})();

The TDZ forces a runtime error rather than silently using undefined. Interviewers love this nuance because it reveals whether a candidate truly grasps the spec versus memorizing “var is function‑scoped”.

Why it matters in production A mis‑understanding can lead to subtle bugs when code is transpiled. Babel’s loose mode may transform let into a mutable var, effectively removing the TDZ and exposing race conditions in concurrent code.

“A single long task blocking the main thread for >50 ms can negatively impact INP.” – Web.dev, Chrome DevRel

Memory Models, Garbage Collection Patterns

V8 employs a generational GC: young space (Scavenger) for short‑lived objects and old space (Mark‑Compact) for survivors. Minor GCs pause for <1 ms, but a major GC can stall the event loop for >100 ms on a 2 GB heap.

// Node.js v22 LTS
// gc‑demo.js
const { execSync } = require('child_process');

function allocate(sizeInMB) {
  return Buffer.alloc(sizeInMB * 1024 * 1024);
}
let leak = [];

setInterval(() => {
  leak.push(allocate(10)); // 10 MB per tick
  console.log(process.memoryUsage().heapUsed / 1e6 + ' MB');
}, 100);

Running node --trace-gc gc-demo.js prints every GC event, letting you see when a major collection occurs. In interviews, you can demonstrate this by showing the flags --trace-gc and interpreting the output.

Quick comparison: Scavenger vs. Mark‑Compact

Phase	Heap Segment	Typical Pause	When Triggered
Scavenger	Young (≤256 MB)	< 1 ms	Every allocation burst
Mark‑Compact	Old (≥1 GB)	30–150 ms	After many survivor promotions

Event Loop & the Micro/Macro Task Queue Deep Dive

Node’s and browsers’ event loops share the same conceptual model but differ in phases. Each tick processes macrotasks (timers, I/O callbacks) and then drains the microtask queue (Promises, process.nextTick). The microtask queue runs to completion before the next macrotask, which can starve the UI thread if overused.

// Node.js v22 LTS
// micro‑macro.js
setTimeout(() => console.log('macrotask'), 0);
Promise.resolve().then(() => console.log('microtask 1'));
process.nextTick(() => console.log('nextTick'));
Promise.resolve().then(() => console.log('microtask 2'));

Output order: nextTick → microtask 1 → microtask 2 → macrotask.

Below is a Mermaid diagram that visualizes one loop iteration:

flowchart TD
    A[Start Tick] --> B[Timers Phase]
    B --> C[Pending Callbacks]
    C --> D[Idle, Prepare]
    D --> E[Poll (I/O callbacks)]
    E --> F[Check (setImmediate)]
    F --> G[Close Callbacks]
    G --> H[Microtasks Queue]
    H --> I[Render (browser) / Loop Exit (Node)]

Interview angle Ask candidates to explain why await inside a for loop can create a microtask bottleneck and how Promise.all actually batches microtasks, reducing the number of tick switches.

—

Asynchronous Programming Patterns & Pitfalls

Modern JavaScript services rely heavily on async code. Understanding both the cost and the readability trade‑offs separates senior engineers from junior coders.

Promise Chain Cost vs. Async/Await Readability

A naïve for…of + await creates a sequential series of microtasks, each waiting for the previous network request to resolve. This is simple to read but can be 5‑10× slower than parallel execution.

// Node.js v22 LTS
// sequential-fetch.js
const fetch = require('node-fetch'); // v3

async function fetchAll(ids) {
  const results = [];
  for (const id of ids) {
    const res = await fetch(`https://api.example.com/${id}`);
    results.push(await res.json());
  }
  return results;
}

A parallel version using Promise.all runs all fetches concurrently:

// parallel-fetch.js
async function fetchAllParallel(ids) {
  const promises = ids.map(id => fetch(`https://api.example.com/${id}`).then(r => r.json()));
  return Promise.all(promises);
}

Performance tip: Benchmark with performance.now() and remember to cap concurrency with a semaphore (e.g., p-limit) when the remote service can’t handle thousands of parallel connections.

Promise.all vs. Promise.allSettled: Performance & UX Trade‑off

Promise.all rejects on the first failure, aborting the entire batch—great for all‑or‑nothing transactions but terrible for UI that needs partial results. Promise.allSettled always resolves, giving you an array of {status, value, reason} objects.

Feature	Promise.all	Promise.allSettled
Failure handling	Immediate reject	Collect all outcomes
Microtask count	N (one per promise) + 1 extra	N (one per promise) + 1 extra
UX scenario	Transactional API calls	Dashboard widgets loading independently

In a recent e‑commerce case study, swapping a critical order‑submission batch from Promise.all to Promise.allSettled reduced Total Blocking Time by 22 ms because the UI could render partial success states while the failing calls were retried.

Real-time Data: WebSocket Lifecycle & Connection Pooling

WebSockets keep a single TCP connection open, delivering low‑latency messages. However, each socket consumes a file descriptor and memory for buffers. In a micro‑service architecture, connection pooling across workers is vital.

// Node.js v22 LTS
// ws-pool.js
const WebSocket = require('ws'); // v8.13
const pool = new Map();

function getSocket(userId) {
  if (pool.has(userId)) return pool.get(userId);
  const ws = new WebSocket(`wss://realtime.example.com?uid=${userId}`);
  pool.set(userId, ws);
  ws.on('close', () => pool.delete(userId));
  return ws;
}

Interview hint: Discuss how to handle reconnection logic, heartbeat pings, and back‑pressure when the server emits faster than the client can process. Mention Node’s worker_threads or cluster to distribute sockets across CPU cores.

—

System Design & Architectural Decision-Making

Senior interviewers love to probe why you choose a tool, not just what tool you use. Below are three common decision points, each with concrete metrics.

Module Bundlers (Webpack vs. Vite): Dev Ex vs. Build Time

Webpack builds a dependency graph, applying loaders and plugins in a single process. Vite, powered by ESBuild, delegates most work to native esbuild during dev, serving source files directly with on‑the‑fly transformation.

Metric (React app, 400 KB source)	Webpack 5.78 (prod)	Vite 4.5 (prod)
Initial dev server start	8 s	1.2 s
Hot Module Replacement latency	200 ms	45 ms
Production bundle size (gzip)	150 KB	138 KB
Build time (ci)	30 s	12 s

When to pick Webpack: you need fine‑grained control (custom plugins, legacy asset handling). When Vite shines: fast iteration, modern browsers, and when the CI budget is tight.

State Management: Context API Heuristic & When to Use Libraries

React’s Context is great for theme or locale—values that change rarely. When a context value updates on every animation frame, every consumer re‑renders, causing a cascade of reconciliations.

// React 18.2
import { createContext, useContext, memo } from 'react';

const MousePosContext = createContext({ x: 0, y: 0 });

function MouseTracker() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = e => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('pointermove', handler);
    return () => window.removeEventListener('pointermove', handler);
  }, []);
  return (
    <MousePosContext.Provider value={pos}>
      <ExpensiveTree />
    </MousePosContext.Provider>
  );
}

The ExpensiveTree will re‑render ~60 times per second. The fix: lift the mutable value into a ref and broadcast via a subscription library (e.g., Zustand) or use useSyncExternalStore.

My take: For any app that updates state > 30 Hz, avoid Context. The extra bundle overhead of a lightweight store (< 2 KB gzipped) pays off hands‑off.

Server‑Side Rendering (SSR) Metrics: TTFB vs. TTI Trade‑offs

Time‑to‑First‑Byte (TTFB) measures how fast the HTML arrives. Time‑to‑Interactive (TTI) captures when the page becomes usable. SSR improves TTFB but can increase TTI if the client has to hydrate a huge DOM.

Strategy	TTFB (ms)	TTI (ms)	Bundle Size (KB)
CSR only (Next.js SPA)	1200	2100	86
SSR (Next.js getServerSideProps)	380	1600	92
SSG (ISR)	320	1400	78

When the Core Web Vitals budget demands INP < 100 ms, a hybrid approach—SSR for the hero section + client‑side streaming for below‑the‑fold—often meets both TTFB and TTI constraints.

—

Performance & Operational Excellence

Lighthouse CI: Core Web Vitals Automation

lighthouse-ci (v3) can be wired into a GitHub Actions pipeline to enforce a performance budget.

# .github/workflows/perf.yml
name: Lighthouse CI
on: [push, pull_request]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install
        run: npm ci
      - name: Run LHCI
        run: |
          npx @lhci/cli@3 autorun --upload.target=temporary-public-storage

Configure lighthouserc.json to set max CLS = 0.1, max LCP = 2500 ms, and fail the job if any metric exceeds the threshold.

Memory Leak Detection with process.memoryUsage() & Heap Snapshots

In production, attach a SIGUSR2 handler that dumps a heap snapshot without stopping the service.

// Node.js v22 LTS
const v8 = require('v8');
process.on('SIGUSR2', () => {
  const snapshot = v8.getHeapSnapshot();
  const filename = `heap-${Date.now()}.heapsnapshot`;
  require('fs').writeFileSync(filename, snapshot);
  console.log('Heap snapshot saved to', filename);
});

Open the .heapsnapshot in Chrome DevTools → Memory → Comparison view to spot retained objects that shouldn’t survive across requests.

Bundle Analysis: webpack-bundle-analyzer CLI Commands

Run the analyzer in CI to catch unexpected size regressions.

# Bash, Webpack 5.78
npx webpack-bundle-analyzer dist/stats.json \
  --mode static \
  --report dist/bundle-report.html \
  --json dist/bundle-stats.json

Set a PR check that fails if any entry exceeds a predefined size budget (e.g., vendor.js > 150 KB gzipped). This guards against accidental inclusion of large polyfills.

—

Modern Ecosystem & Framework Internals

React 18+ Concurrent Features & Suspense Data Patterns

React Fiber (v18) introduces concurrent rendering, allowing the scheduler to pause, abort, or restart work based on priority. Suspense now supports data fetching via useTransition and React.lazy.

// React 18.2
import { Suspense, useTransition } from 'react';

function Search() {
  const [startTransition, isPending] = useTransition();
  const [query, setQuery] = useState('');
  const results = useDeferredValue(fetchResults(query));

  return (
    <>
      <input onChange={e => startTransition(() => setQuery(e.target.value))} />
      {isPending && <Spinner />}
      <Suspense fallback={<Loader />}>
        <ResultsList data={results} />
      </Suspense>
    </>
  );
}

During the interview, articulate how React’s Scheduler decides to render the spinner first, keeping the UI responsive while the heavy fetchResults resolves in the background.

Vue 3 Reactivity: Proxy vs. defineProperty Performance Data

Vue 3 switched from Object.defineProperty (Vue 2) to native Proxy. Benchmarks on V8 10.4 show a 30 % speedup for deep object tracking and a 13 % reduction in memory overhead.

Feature	Vue 2 (defineProperty)	Vue 3 (Proxy)
Reactive getter latency	0.84 µs	0.58 µs
Reactive setter latency	1.12 µs	0.78 µs
Heap growth per 10 k objects	2.1 MB	1.5 MB

When answering system‑design questions, mention that Proxy enables lazy tracking—only accessed properties generate deps, which reduces unnecessary recomputations.

Tooling: Biome vs. ESLint + Prettier in CI/CD Pipelines

Biome (v1.6) bundles linting, formatting, and type‑checking into a single Rust‑compiled binary, cutting lint time by ~45 % compared to the classic ESLint 8 + Prettier 3 combo.

Task	ESLint + Prettier (avg)	Biome v1.6
Lint (10k lines)	1.8 s	0.9 s
Fix autofix	2.2 s	1.1 s
CI config	2 steps (eslint, prettier)	1 step (biome)

For a senior interview, discuss the trade‑off: migrating to Biome reduces maintenance overhead but may miss community plugins that rely on ESLint’s ecosystem.

—

Common Errors & Fixes

Symptom	Root Cause	Fix
“Maximum call stack size exceeded” when calling a recursive function	Tail‑call optimization not supported; accidentally creating a closure that captures the same variable each iteration.	Refactor to an iterative loop or use setImmediate to break the call chain.
Memory usage climbs despite deleteing object properties	Hidden references via closures or DOM nodes retained in a global map.	Use WeakMap for cache entries; run global.gc() (with --expose-gc) after clearing strong refs in a test.
Promise.all rejects early, leaving pending network calls hanging	Unhandled rejections cause the Node process to terminate (if unhandledRejection is set to 'throw').	Wrap each promise with a catch that returns a sentinel value; then inspect results after Promise.all.
SSR page flashes white before hydration	Hydration script loads after the main bundle due to defer misplacement.	Ensure the hydration script is placed inline or with async attribute and that the server injects nonce correctly for CSP.

—

Frequently asked questions

—

If you’ve navigated a memory‑leak nightmare, swapped a Promise.all for a more resilient pattern, or fine‑tuned a bundler to stay under Core Web Vitals limits, I’d love to hear your story. Drop a comment below and let’s keep the conversation going!