Razorpay

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.

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.

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.

Type Coercion

JavaScript automatically converts types during operations (implicit coercion) — the + operator favors strings, other arithmetic operators favor numbers, and there are exactly 8 falsy values.

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.

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.

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.

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.

CORS

CORS (Cross-Origin Resource Sharing) is a browser-enforced security mechanism that uses HTTP headers to control whether JavaScript on one origin can access resources from a different origin.

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.

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.

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.

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.

Security

JSX auto-escapes values to prevent XSS by default, but dangerouslySetInnerHTML, href='javascript:', and localStorage token storage are common vulnerability vectors that require explicit mitigation.