Flipkart

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.

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.

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.

Prototypes & Inheritance

Every JavaScript object has an internal [[Prototype]] link forming a chain — property lookups walk this chain until found or null. ES6 classes are syntactic sugar over this prototypal inheritance model.

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.

IIFE (Immediately Invoked Function Expression)

An IIFE is a function expression that is defined and executed immediately. Before ES6 modules, IIFEs were the primary mechanism for creating private scope and avoiding global namespace pollution.

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.

Memory Management & Garbage Collection

JavaScript automatically manages memory through garbage collection using a mark-and-sweep algorithm — objects are freed when they become unreachable from root references, but common patterns like forgotten timers and detached DOM nodes cause memory leaks.

Data Structures

ES6 introduced Map and Set as specialized alternatives to plain objects and arrays — Map allows any key type with guaranteed order, while Set stores unique values with O(1) lookups.

DOM

The Document Object Model (DOM) is a tree-structured programming interface that lets JavaScript read, modify, and respond to a web page's content, structure, and styles in real time.

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.

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.

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.

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.

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.

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.

Concurrent React

Concurrent rendering lets React interrupt and prioritize work — Suspense provides declarative loading states, useTransition marks updates as non-urgent, and useDeferredValue defers expensive re-renders.

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.

State

State is internal, mutable data owned by a component — updates must be immutable (creating new objects, not mutating existing ones) and are batched asynchronously in React 18+ for performance.

Flexbox Layout

Flexbox is a one-dimensional layout model for distributing space and aligning items along a main axis and cross axis, with container properties controlling flow direction and item properties controlling grow, shrink, and basis behavior.

CSS Grid Layout

CSS Grid provides two-dimensional layout control over rows and columns simultaneously, using grid-template definitions, the fr unit for fractional space, auto-fit/auto-fill for responsive grids, and named grid areas for semantic layout declarations.

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.

Rendering Strategies & Critical Rendering Path

Choosing between CSR, SSR, SSG, and ISR determines when and where HTML is generated, while understanding the Critical Rendering Path (DOM, CSSOM, render tree, layout, paint) reveals how browsers turn that HTML into visible pixels.

Runtime Performance & Profiling

Runtime performance focuses on what happens after the page loads: identifying long tasks that block the main thread, avoiding layout thrashing, using requestAnimationFrame for smooth animations, and offloading heavy computation to Web Workers.