Frontend Cases

var is function-scoped and hoisted, let and const are block-scoped. const cannot be reassigned but can have mutable properties. Use const by default, let when you need to reassign.

Event delegation is attaching a single event listener to a parent element instead of multiple listeners to child elements. It's useful for dynamic content, better performance, and cleaner code.

The virtual DOM is a lightweight JavaScript representation of the real DOM. React uses it to batch updates and minimize direct DOM manipulation, improving performance through diffing and reconciliation.

Hooks are functions that let you use state and other React features in functional components. They were introduced to simplify code reuse, make components easier to understand, and eliminate class component complexity.

CSS specificity determines which styles apply when multiple rules target the same element. Calculated as: inline styles (1000) > IDs (100) > classes/attributes (10) > elements (1). Higher specificity wins.

A closure is a function that has access to variables from its outer scope even after the outer function has returned. It's created every time a function is created and allows data privacy and function factories.

== performs type coercion before comparison, while === checks both value and type without coercion. Always use === to avoid unexpected behavior and bugs.

Both handle asynchronous code, but async/await is syntactic sugar over promises. async/await is more readable and allows using try/catch for error handling, making code look synchronous.

Use a hash function to generate short codes, store mappings in a database. Consider: collision handling, expiration, analytics tracking, rate limiting, and caching with Redis for frequently accessed URLs.

Use WebSockets for real-time communication, message queue (RabbitMQ/Kafka) for reliability, database for persistence, Redis for caching active users, and load balancing for scalability.

Implement using token bucket or sliding window algorithm. Store request counts in Redis with TTL, return 429 status when limit exceeded. Consider per-user, per-IP, and global limits.

Use multi-level caching: browser cache (HTTP headers), CDN for static assets, Redis for application cache, database query cache. Implement cache invalidation strategies like TTL and event-based updates.

Use message queue (Kafka/RabbitMQ) for reliability, multiple channels (email, SMS, push), database for notification history, and retry logic for failed deliveries.

The event loop is a mechanism that allows JavaScript to perform non-blocking asynchronous operations by using a call stack, callback queue, and tasks/ microtasks queues to manage execution order.

Memoization caches the results of expensive function calls and returns cached results when the same inputs occur again, reducing redundant computations and improving performance.

useEffect performs side effects in functional components, like data fetching or subscriptions. Pitfalls include missing dependencies leading to stale data or infinite loops if useEffect updates dependencies improperly.

Keys are unique identifiers used by React to track elements in lists for efficient re-rendering. They help React detect which items changed, added, or removed, improving reconciliation performance.

Vue uses reactive getters/setters (Vue 2) or proxies (Vue 3) to track dependencies and notify components when data changes, triggering efficient DOM updates.

Controlled components' form data is managed by React state, while uncontrolled components manage data through the DOM. Controlled provides better React integration and validation control.

The prototype chain is how JavaScript objects inherit properties and methods through links between objects. When accessing a property, JS looks up the prototype chain until found or null.

HOCs are functions that take a component and return a new enhanced component, enabling code reuse, logic abstraction, and manipulating props.

Vue directives are special tokens in the template that tell Vue to apply reactive behavior to DOM elements. Common directives include v-if, v-for, v-model, and v-bind.

Event bubbling is when an event propagates from the target element up through parent elements. You can stop it with e.stopPropagation() in the event handler.

ES6 introduced let/const, arrow functions, template literals, default parameters, destructuring, classes, modules, promises, and more for modern JavaScript development.

Vue lifecycle hooks are functions called at different stages of a component's lifecycle, like created, mounted, updated, and destroyed, used to run code at specific moments.

JSX is a syntax extension that looks like HTML but is transformed to JavaScript calls (React.createElement). It allows writing UI structure in a declarative and intuitive way.

Use React.memo, useCallback, useMemo, lazy loading, code splitting, and avoid unnecessary renders to optimize React app performance.

Vue 3 introduces proxy-based reactivity, Composition API, improved TypeScript support, smaller bundle size, better performance, and tree-shaking compared to Vue 2's options API and Object.defineProperty reactivity.

Synchronous code runs sequentially, blocking execution until complete. Asynchronous code runs alongside other operations using callbacks, promises, or async/await without blocking.

A Promise represents a value that may be available now, later, or never. It allows attaching callbacks for success (then) or failure (catch) of asynchronous operations.

Vue apps use Vuex or Pinia for centralized state management, providing a single source of truth and predictable state mutations across components.

A closure allows a function to access variables from its lexical scope even after the outer function has finished execution, enabling data encapsulation and private variables.

Composition API organizes component logic by feature rather than lifecycle hooks, improving code readability, reuse, and TypeScript integration compared to Options API.

Use props for parent-to-child data flow, callbacks to send data child-to-parent, and context API or state management libraries for global shared state.

A design system is a collection of reusable components, guidelines, and standards that ensure consistency and scalability in UI design and development across a product or organization.

Flexbox provides a flexible layout model for arranging items in a container either horizontally or vertically, allowing alignment, space distribution, and reordering with ease, ideal for responsive layouts.

ARIA (Accessible Rich Internet Applications) attributes provide additional semantic information to assistive technologies, improving the accessibility of dynamic content and custom UI components.

CSS Grid is a 2-dimensional layout system for rows and columns, suitable for complex layouts, while Flexbox is 1-dimensional for laying out items in a single row or column.

Semantic HTML uses meaningful tags (like <article>, <nav>, <header>) which improve accessibility, SEO, and maintainability by clearly describing content purpose and structure.

px is an absolute pixel unit; em is relative to the font size of the parent element; rem is relative to the root (html) font size. rem and em enable scalable, responsive designs.

The CSS box model describes the rectangular boxes generated for elements, including content, padding, border, and margin areas, affecting layout and spacing.

Use semantic HTML, ARIA attributes, keyboard navigability, color contrast, alt text for images, and test with screen readers to ensure your website is accessible.

Block elements start on a new line and take full width, inline elements flow within text without line breaks, inline-block behaves like inline but accepts block properties like width and height.

CSS preprocessors like SASS or LESS add programming features (variables, nesting, mixins) to CSS for better maintainability, modularity, and reusability.

By using flexible grids, media queries, flexible images, and CSS units like %, em, and rem to adapt the layout and content across various screen sizes and devices.

Progressive enhancement delivers basic content and functionality to all browsers while adding advanced features for modern browsers, improving accessibility and user experience.

Use tabindex properly, manage focus order logically, ensure visible focus indicators, and trap focus within modals or dialogs to support keyboard users.

Pseudo-classes define a special state of an element, e.g., :hover, :focus, :nth-child(), enabling styling based on user interaction or element position.

visibility: hidden hides the element but it still occupies space in the layout; display: none removes the element from the layout flow entirely.

Define visual style, behavior, and accessibility guidelines; build modular code with clear API, documentation, and test for reusability and consistency across apps.

Minimize and compress CSS files, use critical CSS inline for above-the-fold content, load non-critical styles asynchronously, and avoid unused CSS.

The role attribute defines the semantic purpose of an element (e.g., role='button') to help assistive technologies understand and interact with custom or non-semantic elements.

Use feature detection, CSS prefixes, polyfills, progressive enhancement, testing on different browsers, and avoid deprecated or non-standard features.

tabindex controls keyboard navigation order: positive numbers set explicit order, 0 makes element focusable in natural order, -1 removes from tab navigation but can be focused programmatically.

Techniques include minimizing HTTP requests, lazy loading images, code splitting, caching assets, minimizing CSS/JS, using CDN, optimizing images, and reducing render-blocking resources.

Lazy loading defers loading offscreen or non-critical resources until needed, improving initial load time and reducing bandwidth for faster, more efficient user experiences.

It's the sequence of steps browsers take to convert HTML, CSS, and JavaScript into pixels on the screen, including parsing, style calculation, layout, painting, and compositing. Optimizing it improves page load speed.

A CDN is a distributed network of servers that delivers content to users based on geographic location, reducing latency, speeding up asset loading, and improving reliability and scalability.

Use component-based structure, modular CSS, state management, lazy loading, code splitting, API layer abstraction, and automated testing for maintainability and scalability.

REST (Representational State Transfer) is an architectural style for APIs using stateless communication, uniform interface, and resource-based URLs with HTTP methods like GET, POST, PUT, DELETE.

REST exposes multiple endpoints for data resources; GraphQL exposes a single endpoint and allows clients to specify exactly what data they need, reducing over-fetching and under-fetching.

Use GraphQL to query only needed data, implement pagination, filtering, field selection, and versioning in REST APIs to optimize payload size and response time.

Use try/catch or .catch for promises, show user-friendly error messages, implement retry mechanisms, fallback UI states, and log errors for diagnostics.

Use client-side cache, HTTP cache headers (ETag, Cache-Control), service workers for offline support, and server-side caching to reduce server load and improve response time.

Debounce delays a function call until after a wait period of inactivity; throttle limits calls to a function to one per interval. Use debounce for search inputs and throttle for scroll or resize events.

Organize by feature or domain, use reusable components, separate containers and presentational components, manage state with Context or Redux, and use code splitting for faster loads.

API versioning manages changes to an API without breaking existing clients, using URI versioning, header versioning, or custom strategies to maintain backwards compatibility.

Web workers run scripts in background threads separate from the main UI thread, preventing blocking and improving performance for heavy or async computations.

CORS is a browser security feature that restricts web pages from making requests to a different domain unless the server allows it via specific headers, enabling controlled resource sharing.

Synchronous calls block execution until a response is received forcing sequential execution; asynchronous calls do not block and allow multiple operations to happen simultaneously.

Use HTTPS, authentication (OAuth, JWT), input validation, rate limiting, CORS policy, and proper error handling to prevent common vulnerabilities.

SSR renders the initial HTML on the server improving SEO and load speed; CSR renders content in the browser using JavaScript improving rich interactivity but may delay time-to-first-paint.

Use limit and offset or cursor-based pagination to limit data return per request, improving performance and user experience with large datasets.

OpenAPI/Swagger provide standards and tools for describing, consuming, and testing RESTful APIs, enhancing documentation, client generation, and validation.

Debounce delays the execution of a function until a certain time has passed since it was last called, preventing excessive calls during events like scrolling or typing.

Use an array of images, track the current index, and update the displayed image on navigation button clicks or automatic timer intervals.

Use recursion or array.flat(Infinity) to convert nested arrays into a single-level array.

'classnames' merges class names conditionally into a single string. A simple implementation concatenates truthy string arguments.

Throttle limits function execution to once per interval regardless of how many times it’s triggered, useful for scroll or resize events.

Use recursion to copy all properties and nested objects to a new object, or use structuredClone() in modern environments.

Recursively combine properties of both objects, merging nested objects instead of overwriting.

A closure is a function that retains access to its lexical scope even when executed outside that scope, enabling data encapsulation and private variables.

Use an array to push, pop, and peek elements following LIFO (Last In First Out) principle.

Use an array with push to enqueue and shift to dequeue, following FIFO (First In First Out) principle.

Allows controlling whether the function triggers on the leading and/or trailing edge of the timeout window.

Shallow copy copies top-level properties, referencing nested objects; deep copy recursively clones nested objects creating independent copies.

Recursively check all properties and nested objects for equality, handling different object types accordingly.

Caches results of expensive function calls to optimize repeated calls with the same arguments.

Iterate through the list, reversing pointers by keeping track of previous, current, and next nodes.

Recursive calculation with memoization to avoid redundant computation.

Allows subscribing, emitting, and unsubscribing events with callbacks.

Search a sorted array by repeatedly dividing the search interval in half.

Convert each RGB channel to a two-digit hex string and concatenate.

map() returns a new array with transformed elements; forEach() executes a function on each item without returning; reduce() aggregates array to a single value.

Next.js is a React framework for server-side rendering (SSR), static site generation (SSG), API routes, and hybrid apps offering improved performance and SEO.

getStaticProps fetches data at build time for static generation; getServerSideProps fetches data on each request for server-side rendering.

ISR allows static pages to be regenerated on-demand at runtime, combining benefits of static and dynamic rendering with revalidation intervals.

API routes let you create backend endpoints inside the Next.js app under the /api directory, enabling serverless functions without additional server setup.

Next.js uses file-based routing inside the pages directory; dynamic routes are created using bracket syntax like [id].js, and catch-all routes with [[...slug]].js.

Middleware runs before requests to pre-process or rewrite routes, protect pages, or add headers, enabling advanced routing and authentication logic.

Use .env.local, .env.development, or .env.production files with NEXT_PUBLIC_ prefix for client-side variables; process.env is accessible on server-side.

The Image component optimizes images with lazy loading, resizing, and caching for improved performance and better Core Web Vitals scores.

Next.js has built-in i18n routing and locale detection, allowing localization of URLs and content with easy configuration in next.config.js.

You can deploy Next.js apps on platforms like Vercel, Netlify, or any Node.js server; Vercel offers optimized support including ISR, serverless functions, and edge middleware.

SSG offers faster load times and lower server costs but is less dynamic; SSR provides always fresh data but with performance and scalability trade-offs.

Client-side routing uses the Next.js Link component to navigate without page reload; server-side routing involves full page requests for initial HTML generation or API calls.

Next.js automatically prefetches linked pages in the viewport using the Link component; you can also manually trigger prefetch() for enhanced performance.

Supports global CSS, CSS Modules, styled-jsx, and integration with CSS-in-JS libraries like styled-components and emotion for scoped and dynamic styles.

Create files with bracket syntax inside /api (e.g., [id].js) to access dynamic parameters via req.query for flexible API endpoints.

Custom Document (_document.js) enhances the HTML document structure; Custom App (_app.js) wraps all pages for shared layout, state, or styles.

Next.js middleware can run at the edge with caching headers to improve performance and deliver personalized content globally with low latency.

Client components can fetch data inside useEffect or via SWR/React Query libraries for client-side caching and revalidation.

The API optimizes image loading by automatic resizing, lazy loading, and modern formats, improving load speed and bandwidth.

Create a tsconfig.json file and install @types/react/@types/node; Next.js auto-detects TypeScript and configures accordingly.

Next.js serves static files from the /public directory, accessible via the root URL path, allowing easy inclusion of images, fonts, and other assets.

next/link enables client-side navigation without full page reloads, improves prefetching of linked pages, and retains app state for faster, smoother transitions.

getStaticPaths is used with getStaticProps to specify dynamic paths to pre-render at build time when using static generation for dynamic routes.

Use middleware for route protection, NextAuth.js or custom API routes for authentication flows, and secure cookies or JWT for session management.

Server components are rendered on the server without sending JS to the client, improving performance, while client components render on the client enabling interactivity.

Create a custom 404.js or _error.js in the pages directory to handle not found and general errors with custom UI and error reporting.

Use SSR/SSG for pre-rendered HTML, dynamic meta tags with next/head, sitemap generation, and semantic HTML for better crawlability and indexing.

It allows configuring Next.js features like custom webpack config, environment variables, image domains, internationalization, redirects, and rewrites.

Dynamic imports allow loading React components or modules asynchronously, enabling code splitting and faster initial page loads by reducing bundle size.

Use React Context, Redux, Zustand, or other state libraries and integrate with Next.js lifecycle for SSR compatibility and hydration.

Matchers define which routes middleware applies to, allowing granular control over middleware execution per path or patterns.

Middleware functions intercept API requests for authentication, logging, or request modification before reaching the final API handler.

Rewrites map an incoming request path to a different destination path without changing the URL, useful for masking URLs or API proxying.

Use middleware or API route handlers to set custom HTTP headers on responses for security or caching policies.

CSS Modules locally scope styles by default, preventing class name collisions and allowing CSS imports into components for scoped styling.

Fallback pages display when a dynamic route isn’t pre-rendered; fallback: true allows generating pages on demand with loading UI, fallback: blocking delays rendering until data loads.

Use the built-in next build --stats or third-party tools like Webpack Bundle Analyzer to identify large dependencies and optimize accordingly.

Override _error.js for frontend errors, use API middleware for backend errors, and integrate services like Sentry or LogRocket for centralized logging.

Next.js Image component supports placeholder='blur' to show a low-quality blurred image while the main image loads, improving visual stability and UX.

Use controlled React forms with API routes to handle submissions, or external services; integrate validation libraries and handle client/server validation.

TypeScript adds static typing, early error detection, better tooling with IntelliSense, enhanced code readability, and scalability for large projects.

'any' disables type checking allowing any value, while 'unknown' is safer by requiring type checking before usage, preventing unintended errors.

Interfaces define contracts for object shapes and can be extended or implemented; types are more versatile allowing unions, intersections, and primitives.

Generics enable writing reusable, type-safe functions or classes by allowing parameters and return types to be specified dynamically upon usage.

TypeScript automatically infers the type of variables and return values when types are not explicitly declared, improving developer experience without verbosity.

Union types allow a variable to hold values of multiple specified types, enabling flexible API designs and safer type checks.

Type assertion tells the compiler to treat a value as a specific type, overriding inferred types without changing runtime behavior.

Interfaces are open and extendable for objects and classes; type aliases are closed and can represent primitives, unions, tuples, or intersections.

Use the '?' syntax after property names in interfaces or types to declare them as optional.

keyof returns a union of string literals representing all keys of a given type, useful for dynamic property access and type-safe APIs.