Swiggy

Closures

A closure is a function that retains access to variables from its outer (enclosing) scope even after the outer function has returned, enabled by JavaScript's lexical scoping.

Promises & Async/Await

Promises represent eventual completion or failure of async operations with three states (pending, fulfilled, rejected), and async/await provides syntactic sugar for writing promise-based code that reads like synchronous code.

Event Loop & Runtime

JavaScript is single-threaded with one call stack — the event loop enables async behavior by processing microtasks (promises) before macrotasks (setTimeout) between each cycle of the call stack.

The this Keyword

The this keyword is dynamically bound based on how a function is called — four binding rules (new, explicit, implicit, default) determine its value, with arrow functions being the exception that inherits this lexically.

Scope & Scope Chain

JavaScript uses lexical scoping where variable access is determined by code structure at write time — the engine walks up the scope chain from inner to outer scopes until it finds the variable or reaches the global scope.

Hoisting

Hoisting is JavaScript's behavior of moving declarations to the top of their scope during compilation — var is initialized as undefined, let/const enter a Temporal Dead Zone, and function declarations are fully available before their code position.

Debounce & Throttle

Debounce delays execution until a pause in events, while throttle limits execution to a fixed interval — both are essential for controlling high-frequency event handlers.

Variables

var is function-scoped and hoisted with undefined, let is block-scoped and reassignable, const is block-scoped and cannot be reassigned — modern JavaScript favors const by default and let when reassignment is needed.

Currying & Partial Application

Currying transforms a function with multiple arguments into a sequence of single-argument functions, while partial application fixes some arguments upfront and returns a function expecting the rest.

Arrays

Understanding arrays in javascript

Events

DOM events flow through three phases — capture, target, and bubble — and event delegation leverages bubbling to handle events on dynamic child elements with a single parent listener.

Hooks

Hooks let functional components manage state (useState), run side effects (useEffect), access refs (useRef), and extract reusable logic into custom hooks — all following strict rules about call order.

React Internals

React's reconciliation algorithm diffs virtual DOM trees in O(n) using two heuristics — different element types tear down the subtree, same types compare attributes — while the Fiber architecture makes this work interruptible so the browser stays responsive during large updates.

State Management

Redux provides predictable state with a single store, actions, and reducers (RTK simplifies this with createSlice). Zustand offers a lighter alternative. Choose based on app complexity — most apps can start with useState + Context.

Performance Optimization

React.memo skips re-renders when props haven't changed, useMemo caches computed values, and useCallback caches function references — but these are targeted optimizations, not defaults for every component.

Components

React components are reusable, self-contained UI building blocks — functional components (plain functions returning JSX) have replaced class components for most use cases since hooks were introduced in React 16.8.

Context API

Context provides data to any descendant component without passing props through every level — it solves prop drilling but is not state management, and context value changes re-render all consumers.

Advanced Patterns

React patterns evolved from mixins to HOCs to render props to hooks — compound components share implicit state for flexible APIs, while custom hooks have replaced most logic-sharing patterns.

Responsive Design Fundamentals

Responsive design combines the viewport meta tag, media queries, fluid units (%, vw, rem, clamp()), and mobile-first methodology to create layouts that adapt gracefully from mobile screens to large desktops.

Core Web Vitals & Performance Metrics

Core Web Vitals are Google's three key metrics (LCP, INP, CLS) that measure real-world user experience for loading speed, interactivity, and visual stability, directly impacting search rankings.

Real-Time System Architecture

Real-time frontend architecture enables instant data updates without page refreshes — choosing between WebSockets, Server-Sent Events, and long polling depends on whether your communication is bidirectional, and building features like presence indicators, notifications, and collaborative editing requires understanding event-driven patterns and conflict resolution.

Component Architecture at Scale

Scaling a component library beyond a handful of components requires deliberate architectural decisions — design systems, atomic design hierarchies, compound and headless component patterns, prop API design, versioning strategies, and documentation-driven development.

Data Layer Architecture

The data layer determines how a frontend application fetches, caches, normalizes, and synchronizes data — separating client state from server state and choosing the right fetching and caching strategies is critical for maintainable, performant applications.