Question 1

What is a closure in JavaScript? Give a practical use case.

Accepted Answer

A closure is a function that retains access to its outer lexical scope even after the outer function has returned. The inner function "closes over" the outer variables.

Question 2

Explain the JavaScript Event Loop and microtasks vs macrotasks.

Accepted Answer

The event loop processes tasks from the call stack, microtask queue (Promises, queueMicrotask), and macrotask queue (setTimeout, setInterval, I/O). Microtasks always drain completely before the next macrotask runs.

Question 3

What is the difference between == and === in JavaScript?

Accepted Answer

=== (strict equality) checks value AND type with no coercion. == (loose equality) applies type coercion rules before comparing, leading to surprising results.

Question 4

Explain React hooks: useState, useEffect, useMemo, useCallback.

Accepted Answer

useState manages component state. useEffect handles side effects (data fetching, subscriptions). useMemo memoizes expensive computed values. useCallback memoizes function references to prevent child re-renders.

Question 5

What is prototype-based inheritance in JavaScript?

Accepted Answer

JavaScript uses prototype chains rather than classical inheritance. Every object has a hidden [[Prototype]] link. When you access a property, JS walks the chain until it finds it or reaches null.

Question 6

How does the `this` keyword work in JavaScript? Explain call, apply, bind, and arrow functions.

Accepted Answer

"this" is determined by HOW a function is CALLED, not where it's defined — this is "dynamic binding" (the opposite of lexical scoping for variables). Four rules, in order of precedence: (1) "new Foo()" → this = the new object. (2) call/apply/bind → this = explicitly provided object. (3) "obj.method()" → this = obj. (4) plain function call → this = undefined (strict mode) or global object. Arrow functions are the EXCEPTION — they don't have their own "this"; they inherit it lexically from the enclosing scope at definition time.

Question 7

Explain async/await and Promise combinators: Promise.all, Promise.allSettled, Promise.race, Promise.any.

Accepted Answer

async/await is SYNTACTIC SUGAR over Promises that lets asynchronous code read like synchronous code — "await" pauses the function until the Promise settles, without blocking the thread. Promise.all() runs promises in PARALLEL and rejects immediately if ANY fails (fail-fast). Promise.allSettled() also runs in parallel but ALWAYS resolves, giving you the status (fulfilled/rejected) of EVERY promise. Promise.race() resolves/rejects with whichever promise settles FIRST. Promise.any() resolves with the first FULFILLED promise, ignoring rejections unless ALL reject.

Question 8

What is the difference between Debounce and Throttle? When would you use each?

Accepted Answer

Both LIMIT how often a function runs in response to frequent events (scroll, resize, keystroke), but differently. DEBOUNCE waits until the events STOP for a quiet period, then runs the function ONCE — good for "search-as-you-type" (wait until the user pauses typing). THROTTLE runs the function at most ONCE per fixed time interval, REGARDLESS of how many events fire — good for scroll/resize handlers where you want REGULAR updates, not a single final one.

Question 9

Explain TypeScript Generics and common Utility Types (Partial, Pick, Omit, Record).

Accepted Answer

Generics let you write REUSABLE code that works with MULTIPLE types while preserving type information — instead of "any" (which loses all type safety), a generic is a placeholder that gets filled in at the CALL SITE, and TypeScript tracks the relationship between input and output types. Utility types are built-in generic helpers that TRANSFORM existing types: Partial makes all properties optional, Required makes them all required, Pick selects a subset of keys, Omit excludes keys, and Record builds an object type with keys K and values V.

Question 10

What is the Virtual DOM? How does React's reconciliation (diffing) algorithm work?

Accepted Answer

The Virtual DOM is a lightweight JavaScript object representation of the actual DOM. When state changes, React builds a NEW virtual DOM tree, DIFFS it against the previous tree (reconciliation), and applies only the MINIMAL set of real DOM mutations needed — because real DOM operations are expensive, but creating/comparing JS objects is cheap. React's diffing uses heuristics: different element TYPES at the same position trigger a full subtree replacement; lists use the "key" prop to match elements across renders instead of comparing by position.

Question 11

TypeScript: interface vs type — what's the difference, and when should you use each?

Accepted Answer

Both define the SHAPE of an object and are largely interchangeable for simple cases. The key differences: interfaces support DECLARATION MERGING (multiple interface declarations with the same name automatically combine) and are extended with "extends"; types use "&" (intersection) for combining and can represent UNIONS, primitives, tuples, and mapped/conditional types — things interfaces cannot express. The common convention: use "interface" for object shapes that might be EXTENDED (especially public APIs/library definitions), use "type" for unions, intersections, and utility-type compositions.

Question 12

What is the difference between ES Modules (import/export) and CommonJS (require/module.exports)?

Accepted Answer

CommonJS (Node.js's original module system) loads modules SYNCHRONOUSLY at runtime via require() — module.exports is a regular object, and "what you export" can change dynamically. ES Modules (the JavaScript STANDARD, used by "import"/"export") are STATICALLY analyzable — imports/exports are determined at PARSE time (before any code runs), enabling TREE-SHAKING (removing unused exports from bundles) and supporting ASYNCHRONOUS loading. Modern Node.js supports both, but mixing them has gotchas (CommonJS modules imported into ESM get wrapped, default exports interop can be confusing).

Question 13

Compare localStorage, sessionStorage, and Cookies for storing data in the browser.

Accepted Answer

All three store key-value data in the browser, but differ in PERSISTENCE, SCOPE, and SERVER VISIBILITY. localStorage persists indefinitely (until explicitly cleared), scoped per-origin, ~5-10MB, NEVER sent to the server. sessionStorage persists only for the TAB's lifetime (cleared on tab close), scoped per-tab AND per-origin, similar size limit, also never sent to server. Cookies are small (~4KB), can have an EXPIRY date, are scoped by domain/path, and are AUTOMATICALLY sent with every HTTP request to matching domains — making them essential for server-side session/auth, but adding overhead to every request.

Question 14

CSS Flexbox vs CSS Grid — when should you use each?

Accepted Answer

Flexbox is ONE-DIMENSIONAL — it lays out items in a single row OR column, distributing space along that ONE axis (great for navbars, button groups, centering content, or any list of items that flow in one direction). Grid is TWO-DIMENSIONAL — it defines both ROWS and COLUMNS simultaneously, letting you place items precisely in a 2D layout (great for overall page layouts, image galleries, dashboards, card grids). Rule of thumb: "if I'm thinking about ROWS or COLUMNS, use Flexbox; if I'm thinking about ROWS AND COLUMNS together, use Grid."

Question 15

How should you handle errors in JavaScript/TypeScript? Explain try/catch, custom Error classes, and React Error Boundaries.

Accepted Answer

try/catch handles SYNCHRONOUS errors (and awaited Promise rejections inside async functions) — code that throws inside try jumps to catch. CUSTOM ERROR CLASSES (extending the built-in Error) let you attach structured data (error codes, HTTP status, field names) and use instanceof checks to handle different error types differently. REACT ERROR BOUNDARIES are special components that catch JavaScript errors anywhere in their CHILD component tree DURING RENDERING, and display a fallback UI instead of crashing the whole app — but they do NOT catch errors in event handlers, async code, or server-side rendering.

Question 16

What are JavaScript Generators and Iterators? How do they relate to async/await?

Accepted Answer

An ITERATOR is any object with a next() method that returns { value, done } — the protocol that powers "for...of" loops. A GENERATOR is a special function (function*) that automatically implements the iterator protocol — calling it returns an iterator, and "yield" PAUSES execution, returning a value, until .next() is called again to RESUME. Generators are the conceptual ancestor of async/await: an async function is essentially a generator that automatically resumes itself when each "awaited" promise resolves, driven by a hidden runner.

Question 17

What are WeakMap and WeakSet? How do they help with memory management?

Accepted Answer

WeakMap and WeakSet are like Map and Set, but their KEYS (WeakMap) or VALUES (WeakSet) must be OBJECTS, and those references are "WEAK" — they DON'T prevent the garbage collector from reclaiming the object if there are no OTHER references to it. This makes them ideal for attaching METADATA to objects (e.g., caching computed results per DOM element) WITHOUT causing MEMORY LEAKS — when the object is no longer used elsewhere and gets garbage-collected, its entry in the WeakMap/WeakSet is automatically removed too.

Question 18

What are Web Workers? How do they enable multithreading in JavaScript?

Accepted Answer

JavaScript normally runs on a SINGLE thread — the "main thread", which also handles UI rendering, user input, and the event loop. A long-running computation (e.g., processing a large dataset) BLOCKS this thread, freezing the UI. Web Workers run JavaScript in a SEPARATE background thread with its OWN event loop and memory — they communicate with the main thread via MESSAGE PASSING (postMessage/onmessage), NOT shared memory (except via SharedArrayBuffer). This lets CPU-intensive work happen WITHOUT freezing the UI.

Question 19

What is the Critical Rendering Path? Explain Reflow vs Repaint and how to minimize them.

Accepted Answer

The Critical Rendering Path is the sequence of steps the browser takes to convert HTML/CSS/JS into PIXELS on screen: parse HTML → build DOM, parse CSS → build CSSOM, combine into a RENDER TREE, compute LAYOUT (geometry/positions — "reflow"), then PAINT (fill in pixels) and COMPOSITE (layer them onto the screen). REFLOW (layout) recalculates the POSITION/SIZE of elements and is EXPENSIVE — it can cascade to affect the whole page. REPAINT (without reflow) just redraws pixels (e.g., color change) without recalculating geometry — cheaper. The FASTEST path is COMPOSITE-ONLY changes (transform, opacity), which can run on the GPU without involving layout or paint at all.

Question 20

Compare Server-Side Rendering (SSR), Static Site Generation (SSG), and Client-Side Rendering (CSR) — and how Next.js implements each.

Accepted Answer

CSR sends a near-empty HTML shell; the BROWSER downloads JS, then renders everything client-side — fast initial server response, but slow "time to content" and poor SEO without extra work. SSR renders the full HTML on the SERVER for EVERY request — good SEO and fast first paint, but adds server load and per-request latency. SSG pre-renders HTML at BUILD TIME — served as static files via CDN, extremely fast and cheap, but content can go stale until the next build (mitigated by ISR — Incremental Static Regeneration, which revalidates pages periodically without a full rebuild).

Question 21

What is Currying and Function Composition? How are they used in functional JavaScript?

Accepted Answer

Currying transforms a function that takes MULTIPLE arguments into a SEQUENCE of functions that each take ONE argument — f(a, b, c) becomes f(a)(b)(c). This enables PARTIAL APPLICATION: fixing some arguments early to create a SPECIALIZED function for later use. Function composition combines multiple single-argument functions into ONE, where the OUTPUT of one becomes the INPUT of the next — compose(f, g)(x) = f(g(x)). Together, these enable building complex logic from small, reusable, testable pieces — a core "functional programming" style.

Question 22

How do you handle Immutability in JavaScript? Compare Object.freeze, spread/rest, and structuredClone.

Accepted Answer

JavaScript objects/arrays are MUTABLE by default — modifying them in place can cause bugs in React (state changes go undetected) and unexpected shared-reference issues. Object.freeze(obj) makes an object's OWN properties immutable (SHALLOW — nested objects remain mutable) and throws (in strict mode) or silently fails on mutation attempts. Spread syntax ({...obj, key: newValue} / [...arr, newItem]) creates a SHALLOW COPY with changes — the standard React/Redux pattern for immutable updates. structuredClone(obj) performs a DEEP CLONE natively (no libraries needed), but doesn't clone functions or special object types like Map/Set in older implementations.

Question 23

When should you use map/filter/reduce vs a for loop? What are the performance trade-offs?

Accepted Answer

map/filter/reduce are DECLARATIVE (describe WHAT transformation you want) and IMMUTABLE (return new arrays, don't mutate the original) — they're generally preferred for READABILITY and avoiding mutation bugs. A plain for loop (or for...of) is generally FASTER (no function-call overhead per iteration, no intermediate array allocations) and necessary when you need to BREAK early, handle multiple outputs, or process huge datasets where allocation overhead matters. CHAINING multiple array methods (.filter().map().reduce()) creates an INTERMEDIATE ARRAY at each step — for very large arrays, a single for loop (or .reduce() doing everything in one pass) avoids this.

Question 24

What is Web Accessibility (a11y)? Explain semantic HTML, ARIA, and keyboard navigation.

Accepted Answer

Web accessibility (a11y) means building UIs usable by people with disabilities — including those using SCREEN READERS, keyboard-only navigation, or assistive devices. The foundation is SEMANTIC HTML (using

Question 25

How do you test React applications? Compare unit, integration, and end-to-end (E2E) tests, and explain mocking.

Accepted Answer

The "testing pyramid" has three layers: UNIT tests (Jest/Vitest) test a SINGLE function/component in ISOLATION — fast, numerous, but don't catch integration issues. INTEGRATION tests (React Testing Library) render components TOGETHER with their real children and test user-facing BEHAVIOR ("clicking this button shows that text") rather than implementation details — fewer than unit tests, but catch more real bugs. E2E tests (Playwright/Cypress) run the FULL APP in a real browser, simulating actual user journeys — fewest in number (slow, expensive to maintain), but catch issues unit/integration tests CAN'T (real network requests, browser quirks, full user flows across pages). MOCKING replaces real dependencies (API calls, modules, timers) with fake, controllable versions for isolated, deterministic tests.

Question 26

How do you build Custom Hooks in React? Walk through useFetch and useLocalStorage examples.

Accepted Answer

A custom hook is simply a JavaScript function whose name starts with "use" and that calls OTHER hooks (useState, useEffect, etc.) inside it. Custom hooks let you EXTRACT and REUSE stateful logic across multiple components — without changing the component tree (unlike Higher-Order Components or render props). Each component that calls a custom hook gets its OWN independent state — the hook is a way to SHARE LOGIC, not state itself. Common examples: useFetch (data fetching with loading/error states), useLocalStorage (state synced to localStorage), useDebounce, useMediaQuery, useOnClickOutside.

Question 27

Explain Optional Chaining (?.), Nullish Coalescing (??), and other modern JS operators.

Accepted Answer

Optional chaining ("obj?.prop", "obj?.[key]", "obj?.method?.()") safely accesses nested properties — if any link in the chain is "null" or "undefined", the WHOLE expression short-circuits to "undefined" instead of THROWING "Cannot read property of undefined". Nullish coalescing ("a ?? b") returns "b" ONLY if "a" is "null" or "undefined" — unlike "||" which also treats "0", "''", and "false" as "falsy" and replaces them. These, plus the logical assignment operators ("??=", "||=", "&&="), reduce verbose defensive checks ("if (obj && obj.a && obj.a.b)") into single concise expressions.

Question 28

What is Event Delegation? Why and how is it used in JavaScript?

Accepted Answer

Event delegation means attaching ONE event listener to a PARENT element instead of separate listeners on EACH child — relying on EVENT BUBBLING (events fire on the target, then "bubble up" through ancestors) to handle events for children via a SINGLE handler on the parent. Inside the handler, "event.target" identifies which CHILD was actually interacted with. Benefits: fewer event listeners (better memory/performance for long lists), and AUTOMATICALLY works for elements ADDED LATER (dynamically created children don't need their own listener attached).

Question 29

What are Proxy and Reflect in JavaScript? How do they relate to Symbols?

Accepted Answer

Proxy wraps an object and lets you INTERCEPT fundamental operations on it (get, set, has, deleteProperty, etc.) via "trap" functions — enabling things like validation, logging, reactive systems (Vue 3's reactivity is built on Proxy), and virtual properties. Reflect is a built-in object providing methods that MIRROR these same operations (Reflect.get, Reflect.set, etc.) — used INSIDE Proxy traps to perform the DEFAULT behavior after your custom logic runs. Symbols are unique, immutable primitive values often used as OBJECT KEYS to avoid naming collisions, and to define special "well-known" behaviors (Symbol.iterator from [[js-16]], Symbol.toPrimitive, etc.).

Question 30

What are CORS, CSP, and common Web Security headers? How do they protect web applications?

Accepted Answer

CORS (Cross-Origin Resource Sharing) is a BROWSER mechanism that BLOCKS a webpage from making requests to a DIFFERENT origin (domain/port/protocol) UNLESS the SERVER explicitly allows it via "Access-Control-Allow-Origin" and related headers — it protects USERS from malicious sites silently making authenticated requests to OTHER sites on their behalf. CSP (Content Security Policy) is a response header that tells the browser WHICH sources are allowed to load scripts/styles/images/etc. — primarily a defense against XSS (Cross-Site Scripting), by blocking INLINE scripts and scripts from UNTRUSTED domains even if an attacker manages to inject HTML.

Question 31

What are Service Workers and PWAs? Explain caching strategies for offline support.

Accepted Answer

A Service Worker is a SCRIPT that the browser runs in the BACKGROUND, SEPARATE from the web page — it can intercept NETWORK REQUESTS, cache responses, and continue running even when the page is closed (enabling push notifications and background sync). A PWA (Progressive Web App) is a website that uses Service Workers + a Web App Manifest to behave like a NATIVE APP — installable on the home screen, works OFFLINE, and can receive push notifications. CACHING STRATEGIES (Cache First, Network First, Stale-While-Revalidate) determine HOW the service worker decides between serving cached content vs fetching fresh content for each request.

Question 32

What is the Intersection Observer API? How is it used for lazy loading and infinite scroll?

Accepted Answer

The Intersection Observer API lets you ASYNCHRONOUSLY observe when a target element ENTERS or EXITS the viewport (or another ancestor element) — WITHOUT manually listening to "scroll" events and calling "getBoundingClientRect()" repeatedly (which causes LAYOUT THRASHING — see [[js-19]]). It's the modern, PERFORMANT way to implement LAZY LOADING (load images/components only when they're about to become visible), INFINITE SCROLL (load more content when the user nears the bottom), and "scrollspy" navigation (highlight the nav item for the section currently in view).

Question 33

How do CSS animations and transitions work? What makes an animation "performant"?

Accepted Answer

CSS Transitions animate a property smoothly between TWO states (e.g., on hover/focus/class change) over a specified duration. CSS Animations (@keyframes) define MULTIPLE steps/states for more complex, potentially LOOPING or multi-stage motion. PERFORMANT animations only animate "transform" and "opacity" — these properties can be handled by the GPU on a SEPARATE COMPOSITOR THREAD without triggering LAYOUT or PAINT (recall the rendering pipeline from [[js-19]]). Animating properties like "width", "top", "margin", or "box-shadow" triggers LAYOUT/PAINT on every frame — causing JANK, especially on lower-end devices.

Question 34

How do you build Responsive Designs? Compare media queries, mobile-first approach, and container queries.

Accepted Answer

Responsive design means a layout ADAPTS to different SCREEN SIZES/devices. MEDIA QUERIES ("@media (min-width: 768px) { ... }") apply CSS conditionally based on VIEWPORT dimensions. MOBILE-FIRST means writing BASE styles for the SMALLEST screens, then using "min-width" media queries to ADD complexity for larger screens — generally produces SIMPLER, more maintainable CSS than "desktop-first" (which requires OVERRIDING desktop styles for mobile). CONTAINER QUERIES ("@container (min-width: 400px) { ... }") are a NEWER feature that lets a component adapt based on its CONTAINER's size — not the viewport — enabling truly REUSABLE components that respond to wherever they're placed.

Question 35

How does JavaScript handle Dates and Times? What are common pitfalls and how does Intl help?

Accepted Answer

JavaScript's built-in "Date" object is notoriously AWKWARD: months are ZERO-INDEXED (January = 0), it's MUTABLE (methods like "setDate()" modify the object IN PLACE), parsing date STRINGS is INCONSISTENT across browsers/engines (only ISO 8601 format is reliably standardized), and it has NO built-in TIMEZONE support beyond "local" and "UTC". The "Intl" namespace (Intl.DateTimeFormat, Intl.NumberFormat, Intl.RelativeTimeFormat) provides LOCALE-AWARE formatting built into the JS engine — no library needed for displaying dates/numbers/currencies in the user's LOCALE and TIMEZONE. For complex date ARITHMETIC/manipulation, libraries like date-fns or Day.js are preferred over raw "Date" methods.

Question 36

What is the React Context API? When should you use it, and what are its performance pitfalls?

Accepted Answer

Context lets you pass data through the component tree WITHOUT manually passing "props" down through every intermediate level ("prop drilling"). "createContext()" creates a Context object, "<Context.Provider value={...}>" supplies a value to all descendants, and "useContext(Context)" reads it from any descendant, no matter how DEEP. The key PERFORMANCE pitfall: when a Provider's "value" CHANGES, ALL components calling "useContext" for that context RE-RENDER — even if they only use a SMALL PART of the value that didn't change. Context is best for INFREQUENTLY-CHANGING "global" data (theme, auth, locale) — for FREQUENTLY-CHANGING state shared widely, dedicated state libraries (Redux, Zustand, Jotai) with SELECTIVE subscriptions are more efficient.

Question 37

How does Redux (and Redux Toolkit) work? When do you need global state management?

Accepted Answer

Redux is a PREDICTABLE STATE CONTAINER: ALL application state lives in ONE central "store" (a single JS object). The ONLY way to change state is by DISPATCHING an "action" (a plain object describing "what happened", e.g., "{ type: 'cart/itemAdded', payload: item }") — a "reducer" (a PURE FUNCTION) takes the CURRENT state + the action and returns a NEW state (immutably). Components SUBSCRIBE to the store via "selectors" — and (critically) only RE-RENDER when the SPECIFIC SLICE they selected actually CHANGES, unlike Context's all-or-nothing re-renders. Redux Toolkit (RTK) is the modern, OFFICIAL way to write Redux — it eliminates most boilerplate via "createSlice" (auto-generates action creators + reducers) and includes "Immer" (lets you write "mutating" code that produces immutable updates).

Question 38

How do you optimize React performance? Explain React.memo, useMemo, useCallback, and code-splitting.

Accepted Answer

React re-renders a component whenever its STATE or PROPS change (or its parent re-renders). Most re-renders are CHEAP and harmless — premature optimization can make code more COMPLEX without measurable benefit. The main tools: "React.memo(Component)" SKIPS re-rendering a component if its PROPS are SHALLOWLY EQUAL to the previous render. "useMemo(fn, deps)" caches an EXPENSIVE COMPUTATION's result between renders. "useCallback(fn, deps)" caches a FUNCTION REFERENCE (often needed so "React.memo" on a CHILD that receives this function as a prop doesn't see a "new" function every render). CODE-SPLITTING ("React.lazy" + "Suspense", or Next.js dynamic imports) reduces INITIAL bundle size by loading components/routes ON DEMAND.

Question 39

How do you handle Forms in React? Compare controlled vs uncontrolled inputs and validation approaches.

Accepted Answer

CONTROLLED inputs have their VALUE driven by React STATE — " setName(e.target.value)} />" — React is the "single source of truth", and EVERY keystroke triggers a re-render. UNCONTROLLED inputs let the DOM manage its OWN state — React reads the value ONLY when needed (via a "ref"), e.g., on submit — "". For VALIDATION, libraries like React Hook Form (uncontrolled-by-default, minimal re-renders) combined with schema validators like Zod (TYPE-SAFE schema definitions that validate AND infer TypeScript types) are the modern standard — replacing manual "useState" + "if" validation chains.

Question 40

Compare WebSockets, Server-Sent Events (SSE), and HTTP Polling for real-time communication.

Accepted Answer

HTTP Polling repeatedly sends requests on a TIMER ("every 5 seconds, ask the server: anything new?") — simple but WASTEFUL (most requests return "nothing changed") and has LATENCY up to the polling interval. Server-Sent Events (SSE) open ONE long-lived HTTP connection where the SERVER pushes updates to the client as they happen — ONE-WAY (server → client only), built on plain HTTP (works through proxies/firewalls easily), with AUTOMATIC RECONNECTION built into the browser API. WebSockets establish a FULL-DUPLEX (bidirectional) persistent connection — both client and server can send messages ANYTIME — needed for highly-interactive real-time apps (chat, collaborative editing, multiplayer games) where the CLIENT also needs to push frequent updates.

Question 41

What are React Server Components (RSC)? How do Server and Client Components differ in the Next.js App Router?

Accepted Answer

React Server Components (RSC) RUN ONLY ON THE SERVER — they can directly access databases, file systems, or secret API keys, and their JavaScript code is NEVER SENT TO THE BROWSER (reducing bundle size). Client Components (marked with the "use client" directive) run in the browser AS WELL AS during server-side rendering — they can use "useState", "useEffect", event handlers ("onClick"), and browser APIs. In the Next.js App Router, EVERY component is a Server Component BY DEFAULT — you OPT IN to Client Components only where INTERACTIVITY is needed, and the recommendation is to push "use client" boundaries as FAR DOWN the tree as possible (small, focused interactive "islands").

Question 42

Explain advanced TypeScript types: conditional types, mapped types, and the "infer" keyword.

Accepted Answer

CONDITIONAL types ("T extends U ? X : Y") let a type DEPEND on whether one type is ASSIGNABLE to another — similar to a ternary, but evaluated at the TYPE level. MAPPED types ("{ [K in keyof T]: ... }") TRANSFORM every property of an EXISTING type — e.g., making all properties optional ("Partial") or read-only ("Readonly"). The "infer" keyword, used INSIDE a conditional type, lets TypeScript "CAPTURE" a type from within a larger type — for example, extracting a FUNCTION'S RETURN TYPE or an ARRAY'S ELEMENT TYPE — without you having to specify it manually.

Question 43

How do module bundlers (Webpack, Vite, esbuild) work? Explain tree-shaking and code-splitting.

Accepted Answer

A BUNDLER takes your application's many JavaScript/TypeScript/CSS MODULE files (each with "import"/"export" statements) and combines them into a SMALL NUMBER of optimized files ("bundles") that browsers can load efficiently. TREE-SHAKING removes UNUSED exports/code from the final bundle by analyzing "import"/"export" statements (which is why it requires ES MODULES — "import"/"export" — rather than CommonJS's "require", since ES modules' static structure can be ANALYZED without running the code). CODE-SPLITTING breaks the bundle into MULTIPLE chunks, loaded ON DEMAND (e.g., per-route), so users download only the code needed for the CURRENT page. Vite and esbuild use NATIVE-SPEED tools (written in Go/Rust) for DEVELOPMENT, making startup and rebuilds dramatically faster than Webpack's JavaScript-based pipeline.

Question 44

Compare browser storage options: localStorage, sessionStorage, cookies, and IndexedDB.

Accepted Answer

localStorage and sessionStorage store SIMPLE STRING key-value pairs, accessed SYNCHRONOUSLY — localStorage PERSISTS until explicitly cleared (survives browser restarts), sessionStorage is cleared when the TAB closes. Cookies are SMALL (around 4KB) pieces of data sent with EVERY HTTP request to the SAME domain — useful for AUTHENTICATION (especially "httpOnly" cookies, inaccessible to JavaScript, mitigating XSS theft) but add overhead to EVERY request. IndexedDB is a full ASYNCHRONOUS, TRANSACTIONAL, OBJECT-based database in the browser — supports LARGE amounts of structured data (including Blobs/Files), complex queries via INDEXES, and is the foundation for OFFLINE-FIRST web apps and PWAs (recall [[js-31]]'s service worker caching).

Question 45

How do you prevent XSS and CSRF attacks in a modern React/Next.js application?

Accepted Answer

XSS (Cross-Site Scripting) happens when ATTACKER-CONTROLLED content gets executed as CODE in a victim's browser — React's JSX AUTO-ESCAPES values rendered via "{}" (e.g., "{userInput}" renders as TEXT, not HTML), which prevents MOST XSS automatically — the danger is "dangerouslySetInnerHTML" (which, as its name warns, BYPASSES this escaping) and any place RAW HTML/URLs from user input are used directly. CSRF (Cross-Site Request Forgery) tricks a LOGGED-IN user's browser into making an UNWANTED request to your site (since cookies are sent automatically) — mitigated by "SameSite" cookies, CSRF TOKENS (a random value the server checks on state-changing requests), and CHECKING the "Origin"/"Referer" header on sensitive endpoints.

Question 46

Compare GraphQL and REST API design. What problems does GraphQL solve, and what trade-offs does it introduce?

Accepted Answer

REST organizes APIs around RESOURCES and HTTP verbs — each endpoint returns a FIXED shape of data ("/users/1" returns the WHOLE user object, however large). GraphQL exposes a SINGLE endpoint where the CLIENT specifies EXACTLY which fields it needs in the QUERY itself — solving "OVER-FETCHING" (getting fields you don't need) and "UNDER-FETCHING" (needing MULTIPLE round-trips to assemble a view, e.g., user + their posts + post authors). The trade-offs: GraphQL shifts COMPLEXITY to the SERVER (resolver design, N+1 query problems, query cost analysis) and makes HTTP-level CACHING (which relies on predictable URLs) harder — REST's simplicity and cacheability still make it the better default for many APIs.

Question 47

What are Web Workers? When and how do you use them to offload work from the main thread?

Accepted Answer

JavaScript in the browser runs on a SINGLE main thread that ALSO handles rendering, layout, and user input — a long-running, CPU-INTENSIVE task (parsing a huge JSON file, image processing, complex calculations) BLOCKS this thread, freezing the UI ("jank"). Web Workers run JavaScript on a SEPARATE BACKGROUND THREAD — they communicate with the main thread via "postMessage" (asynchronous, COPYING data by default — no SHARED memory/variables) — letting CPU-heavy work happen WITHOUT freezing the UI. Workers CANNOT access the DOM directly — they're for COMPUTATION, not rendering.

Question 48

Compare CSS-based animations/transitions with JavaScript animation libraries like Framer Motion. When would you choose each?

Accepted Answer

CSS "transition"/"animation" are DECLARATIVE, run on the COMPOSITOR thread for "transform"/"opacity" changes (recall [[js-33]]), and have NEAR-ZERO JavaScript overhead — ideal for SIMPLE state-based animations (hover effects, fade-ins, loading spinners). Framer Motion (and similar libraries like React Spring, GSAP) provide a JAVASCRIPT API for animations that need: COMPLEX ORCHESTRATION (staggering multiple elements, sequencing), GESTURE-based interactions (drag, swipe with physics), ANIMATING BETWEEN ARBITRARY VALUES based on DYNAMIC, RUNTIME-COMPUTED targets, or LAYOUT ANIMATIONS (smoothly animating when an element's SIZE/POSITION changes due to content/DOM changes — which CSS alone struggles with).

Question 49

How do you implement internationalization (i18n) in a Next.js application?

Accepted Answer

Internationalization (i18n) means structuring an app so it can DISPLAY content in MULTIPLE LANGUAGES/LOCALES — translated TEXT, locale-aware FORMATTING (dates, numbers, currency — recall [[js-35]]'s "Intl" discussion), and often locale-specific ROUTING ("/en/about" vs "/fr/about"). In the Next.js App Router, this typically means: a "[locale]" DYNAMIC SEGMENT at the root of "app/" so EVERY route is locale-aware, MIDDLEWARE that detects the user's preferred locale (from the "Accept-Language" header or a cookie) and REDIRECTS to the right locale prefix, and a library (next-intl, next-i18next, or "Intl" APIs directly) to load and use TRANSLATION STRINGS (JSON files per locale) in components.

Question 50

How do Error Boundaries work in React? How do you build a comprehensive error-handling strategy for a production app?

Accepted Answer

An Error Boundary is a React component that CATCHES JavaScript errors thrown DURING RENDERING (anywhere in its child component tree), logs them, and displays a FALLBACK UI instead of CRASHING the entire app. Error Boundaries are implemented as CLASS components (using "static getDerivedStateFromError" and/or "componentDidCatch" — there is currently NO HOOK equivalent, though "react-error-boundary" provides a hook-friendly wrapper). Crucially, Error Boundaries do NOT catch errors in: event handlers, asynchronous code (setTimeout, promises), server-side rendering, or errors thrown in the boundary itself — those need SEPARATE handling (try/catch in handlers, ".catch()" on promises, global "window.onerror"/"unhandledrejection" listeners).

JavaScript & Frontend