Easy Frontend Development Interview Questions

Show answer

ES modules use import and export, are statically analysable, load asynchronously and are the standard in browsers and modern Node. CommonJS uses require and module.exports, loads synchronously and was Node's original system. Because ES module imports are static, bundlers can tree-shake unused exports, which shrinks bundles. Mixing the two causes interop issues, so new frontend projects use ES modules with type: module in package.json.

How does destructuring with default values work?

Show answer

Destructuring pulls values out of arrays or objects into variables. Defaults apply only when the value is undefined, not when it is null. For example, const { name, city = 'Delhi' } = user sets city to Delhi if the property is missing. Function parameters can be destructured too, like function render({ title, size = 'md' } = {}), which avoids errors when no argument is passed and documents expected options clearly.

Explain optional chaining and the nullish coalescing operator.

Show answer

Optional chaining ?. stops evaluation and returns undefined if the value before it is null or undefined, so user?.address?.pincode never throws. Nullish coalescing ?? returns the right side only when the left is null or undefined, unlike || which also replaces 0, false and empty strings. For example, const qty = input ?? 1 keeps a valid 0, while input || 1 would wrongly change 0 into 1.

When should you use Map and Set instead of plain objects and arrays?

Show answer

Map allows keys of any type, keeps insertion order, has a size property and performs well with frequent additions and deletions, so it suits caches and lookups by object. Set stores unique values with fast has() checks, ideal for tracking selected ids. Plain objects are better for fixed-shape records and JSON. Arrays are better when order and index access matter and duplicates are allowed.

What are pure functions and why does immutability matter in frontend code?

Show answer

A pure function returns the same output for the same input and has no side effects such as changing external variables. Immutability means creating new objects instead of modifying existing ones, for example using spread syntax to update state. Together they make code predictable and easy to test, and they let frameworks detect changes with a simple reference comparison, which enables efficient re-rendering.

What are higher-order functions and currying?

Show answer

A higher-order function takes a function as an argument or returns one, like map, filter or a custom withLogging(fn) wrapper. Currying transforms a function with many arguments into a chain of single-argument functions, so add(2)(3) returns 5. Currying makes partial application easy, for example creating formatINR = formatCurrency('INR') once and reusing it. Overusing it can reduce readability for teams unfamiliar with functional style.

Flatten a deeply nested array without using Array.prototype.flat.

Show answer

A recursive reduce handles any depth: function flatten(arr) { return arr.reduce((acc, item) => Array.isArray(item) ? acc.concat(flatten(item)) : acc.concat(item), []); } flatten([1, [2, [3, [4]], 5]]); // [1, 2, 3, 4, 5] In real code, arr.flat(Infinity) does the same. For extremely deep nesting, an iterative version with a stack avoids call stack overflow.

Predict the output order of synchronous code, promises and setTimeout.

Show answer

Synchronous code runs first, then microtasks, then macrotasks: console.log('A'); setTimeout(() => console.log('B'), 0); Promise.resolve().then(() => console.log('C')); queueMicrotask(() => console.log('D')); console.log('E'); // Output: A, E, C, D, B A and E are synchronous. C and D are microtasks queued in order. B is a macrotask and waits until the microtask queue is empty, even with a 0 ms delay.

Editing one item in a copied list also changes the original list. Why?

Show answer

Copying an array with spread or slice creates a new array, but the objects inside are still the same references. Changing copy[0].qty changes the original object too. The fix is to create new objects for changed items, for example list.map(item => item.id === id ? { ...item, qty: item.qty + 1 } : item), or use structuredClone when a full deep copy is genuinely needed.

Why do you want to build a career in frontend development?

Show answer

I like work where users see the result directly. In college I built a timetable app for my class, and watching classmates use it daily taught me how small UI details matter. Frontend combines logic, design and performance, and the ecosystem keeps evolving, which keeps me learning. I want to build fast, accessible interfaces for products used by millions of people across India.

What is TypeScript and why do teams adopt it?

Show answer

TypeScript is a superset of JavaScript that adds static types and compiles to plain JavaScript. It catches errors such as wrong property names, missing arguments and null access while you type, before the code runs. It also improves editor autocomplete and makes refactoring large codebases safer. Types are erased at runtime, so TypeScript adds no performance cost but needs a build or type-stripping step.

What is the difference between type and interface in TypeScript?

Show answer

Both describe object shapes. An interface can be extended with extends and merged by declaring it twice, which libraries use to let users augment types. A type alias can describe anything, including unions, tuples, primitives and mapped types, and combines with intersections. For plain object shapes either works; many teams use interface for public object contracts and type for unions and computed types.

What are union and intersection types?

Show answer

A union type A | B means the value can be either type, such as string | number or 'success' | 'error'. You must narrow it before using type-specific members. An intersection type A & B combines all properties of both, for example User & { permissions: string[] } adds a field to an existing type. Unions model alternatives, while intersections model composition of features.

Explain the utility types Partial, Pick, Omit and Record.

Show answer

Partial<T> makes all properties optional, useful for update payloads. Pick<T, 'id' | 'name'> creates a type with only selected keys, and Omit<T, 'password'> removes keys, handy for public user objects. Record<K, V> builds an object type with keys K and values V, such as Record<'en' | 'hi', string> for translations. Others include Required, Readonly, ReturnType and Awaited.

How would you learn TypeScript quickly if your new project required it?

Show answer

Situation: I joined an internship where the codebase was fully TypeScript, which I had never used. Task: I needed to contribute within the first week. Action: I read the official handbook basics, studied existing types in the project, and converted small JavaScript exercises into TypeScript each evening. Result: I submitted my first typed component on day five and became comfortable with generics within a month.

Why use requestAnimationFrame instead of setTimeout for animations?

Show answer

requestAnimationFrame runs your callback right before the browser paints the next frame, usually 60 or 120 times per second matching the display. It pauses in background tabs, saving battery, and avoids the drift and dropped frames that setTimeout causes because timers are not synced with rendering. The callback receives a high-precision timestamp, so animations can be calculated from elapsed time rather than fixed steps.

What is a Progressive Web App?

Show answer

A Progressive Web App is a website that behaves like an installable app. It needs HTTPS, a web app manifest with name, icons and theme colour, and usually a service worker for offline support and caching. Users can add it to their home screen and it opens in a standalone window. PWAs are popular in India for lightweight apps that work on low-end phones and patchy mobile networks.

How do browser permission APIs like Geolocation and Notifications work?

Show answer

Powerful features require user consent, a secure HTTPS context and usually a user gesture. Calling navigator.geolocation.getCurrentPosition or Notification.requestPermission shows a browser prompt; if the user denies it, you cannot ask again easily. navigator.permissions.query lets you check the current state first. Good UX explains why you need the permission before triggering the prompt, for example asking for location only when the user taps 'Find nearest centre'.

What are the URL and URLSearchParams APIs used for?

Show answer

The URL constructor parses a URL into parts like hostname, pathname and searchParams, and builds valid URLs without manual string concatenation. URLSearchParams reads and writes query strings, handling encoding automatically, for example params.get('page') or params.set('sort', 'price'). They prevent bugs with special characters such as spaces and ampersands in search terms, and are the clean way to sync filters with the address bar.

Keep product filters in sync with the URL query string.

Show answer

Read params on load and update them without reload: const params = new URLSearchParams(location.search); const category = params.get('category') ?? 'all'; applyFilters({ category }); function updateFilter(key, value) { const p = new URLSearchParams(location.search); value ? p.set(key, value) : p.delete(key); history.pushState(null, '', '?' + p.toString()); applyFilters(Object.fromEntries(p)); } window.addEventListener('popstate', () => applyFilters(Object.fromEntries(new URLSearchParams(location.search)))); Users can now share and bookmark filtered views.

Implement a copy-to-clipboard button with user feedback.

Show answer

The async Clipboard API works in secure contexts after a user action: copyBtn.addEventListener('click', async () => { try { await navigator.clipboard.writeText(couponCode.textContent); copyBtn.textContent = 'Copied!'; } catch { copyBtn.textContent = 'Press Ctrl+C to copy'; } setTimeout(() => (copyBtn.textContent = 'Copy code'), 2000); }); An aria-live region can announce 'Copied' to screen reader users, since a changing button label may not always be read out.

A new browser API you used does not work in older Safari versions. How do you handle it?

Show answer

I would use feature detection, such as if ('share' in navigator), rather than browser sniffing, and provide a fallback like a copy-link button. Checking Can I Use and the project's browser support list before building avoids surprises. Where reasonable, a small polyfill can fill gaps. This progressive enhancement approach ensures the core feature works everywhere while newer browsers get a better experience.

Tell me about a time you learned a new browser API to deliver a feature.

Show answer

Situation: during my internship, the team wanted product images to load only when visible. Task: I was asked to implement it without adding a library. Action: I studied IntersectionObserver on MDN, built a small prototype, measured the page in Lighthouse and then applied it to the listing page with a fallback. Result: initial page weight dropped by about 60 percent, and the pattern was reused on other pages.

How does Tailwind CSS keep the final CSS file small?

Show answer

Tailwind scans your source files for class names and generates only the utilities you actually use, so the production CSS is usually a few kilobytes even though thousands of utilities are available. This requires class names to appear as complete strings in the code. Tailwind v4 uses a CSS-first configuration with @theme for design tokens and detects source files automatically.

Does native CSS support nesting now?

Show answer

Yes. All modern browsers support native CSS nesting, so you can write .card { padding: 1rem; & .title { font-weight: 600; } &:hover { box-shadow: ... } } without Sass. The ampersand refers to the parent selector. Deep nesting still creates high specificity and long selectors, so the usual advice from Sass days applies: keep nesting to one or two levels.

Why are dvh and svh units better than vh on mobile?

Show answer

On mobile browsers, 100vh equals the height with the address bar hidden, so a full-screen section gets cut off when the bar is visible. svh is the small viewport height with browser UI shown, lvh the large one, and dvh updates dynamically as the bar appears or hides. Using min-height: 100dvh for hero sections or app shells prevents content hiding behind browser chrome.

What colour contrast ratios does WCAG require?

Show answer

WCAG 2.2 level AA requires a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, which is about 24 pixels regular or 19 pixels bold. Interface components and focus indicators need 3 to 1 against adjacent colours. Level AAA raises text to 7 to 1. Tools like the DevTools contrast checker help catch light grey text that fails these limits.

What is prefers-reduced-motion and why should you respect it?

Show answer

prefers-reduced-motion is a media query that detects when users have asked their operating system to minimise animation, often because motion causes dizziness or nausea. Inside @media (prefers-reduced-motion: reduce), you should remove or tone down parallax, large transitions and auto-playing animations, while keeping essential feedback such as simple fades. It is a small change that makes interfaces accessible to people with vestibular disorders.

Write a visually-hidden utility class for screen-reader-only text.

Show answer

This hides content visually but keeps it readable by assistive technology: .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } Use it for labels on icon-only buttons, such as <button><svg aria-hidden='true'></svg><span class='sr-only'>Close</span></button>. display: none would hide the text from screen readers too.

Show clear focus styles only for keyboard users.

Show answer

:focus-visible applies when the browser decides focus should be shown, typically for keyboard navigation: button:focus-visible, a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; } button:focus:not(:focus-visible) { outline: none; } Mouse users do not see an outline on click, while keyboard users always know where they are. Never remove outlines globally with *:focus { outline: none } without a replacement.

Make an embedded video keep a 16:9 ratio at any width.

Show answer

The aspect-ratio property replaces the old padding-top hack: .video-embed { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; } .avatar { width: 64px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; } The browser reserves the correct height before the iframe loads, preventing layout shift, and object-fit keeps images from stretching inside fixed ratios.

A full-screen hero section is cut off at the bottom on mobile phones. How do you fix it?

Show answer

The section uses height: 100vh, which on mobile includes the area hidden behind the browser's address bar. I would change it to min-height: 100svh or 100dvh so the height matches the visible viewport, keeping 100vh as a fallback line before it for very old browsers. Using min-height instead of height also lets content grow on small screens instead of overflowing.

What are Core Web Vitals and their good thresholds?

Show answer

Core Web Vitals are Google's user experience metrics measured from real users. Largest Contentful Paint measures loading and should be 2.5 seconds or less. Interaction to Next Paint measures responsiveness and should be 200 milliseconds or less. Cumulative Layout Shift measures visual stability and should be 0.1 or less. A page passes when at least 75 percent of visits meet each threshold, and they influence search ranking.

What are code splitting and lazy loading?

Show answer

Code splitting breaks a large JavaScript bundle into smaller chunks so the browser downloads only what the current page needs. Lazy loading defers loading code or assets until they are required, using dynamic import() for components like a chart or a rich text editor. Route-based splitting is the most common starting point. It reduces initial download and parse time, which improves LCP and INP on slower devices.

How do you choose the right image format and size?

Show answer

Use AVIF or WebP for photos because they are much smaller than JPEG at similar quality, with JPEG as fallback. Use SVG for icons and logos, and PNG only when lossless transparency is essential. Serve sizes that match the display width with srcset and sizes, compress with tools like Squoosh or an image CDN, and always specify width and height to avoid layout shift.

How can web fonts slow a page down and how do you optimise them?

Show answer

Fonts are often discovered late, after CSS is parsed, and text may stay invisible until they load. To optimise, self-host fonts in WOFF2 format, subset them to the characters you need, preload the main weight, and use font-display: swap so fallback text appears immediately. Limiting the number of weights and using variable fonts reduces downloads. Matching fallback metrics with size-adjust prevents layout shift.

Load a heavy module only when the user needs it.

Show answer

Use a dynamic import inside the event handler: const exportBtn = document.querySelector('#export-pdf'); exportBtn.addEventListener('click', async () => { exportBtn.disabled = true; const { generatePdf } = await import('./pdf-export.js'); await generatePdf(reportData); exportBtn.disabled = false; }); The bundler creates a separate chunk for pdf-export.js, so users who never export do not download it. Prefetching on hover can hide the delay.

Add resource hints for a third-party font and the hero image.

Show answer

Place these early in the head: <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin> <link rel='preload' href='/fonts/inter-var.woff2' as='font' type='font/woff2' crossorigin> <link rel='preload' href='/img/hero-1200.avif' as='image' fetchpriority='high'> <link rel='dns-prefetch' href='https://analytics.example.com'> Fonts must be preloaded with crossorigin, even from the same origin, or the browser downloads them twice. Preload only a few critical resources.

Product images on a listing page load slowly. What quick fixes would you apply?

Show answer

I would convert images to WebP or AVIF, resize them to the actual thumbnail size instead of loading full product photos, and serve them through srcset. Images below the fold get loading='lazy', while the first few visible ones load eagerly. Adding width and height prevents layout shift, and serving images from a CDN with long cache headers makes repeat visits much faster.

What is a JavaScript bundler and why do frontend projects need one?

Show answer

A bundler takes your source files, follows imports to build a dependency graph and outputs optimised files for the browser. Along the way it transpiles TypeScript and JSX, processes CSS, handles images, minifies code, removes unused exports and adds content hashes for caching. Native ES modules work in browsers, but loading hundreds of unoptimised files is slow, so production builds still use bundlers like Vite, webpack or Rspack.

Why is Vite faster than webpack during development?

Show answer

webpack bundles the whole application before serving it, so startup and updates slow down as the project grows. Vite serves source files as native ES modules and transforms only the files the browser requests, while pre-bundling dependencies with esbuild. Hot updates touch only the changed module. For production, Vite uses Rollup, and newer versions use the Rust-based Rolldown, to create optimised bundles.

What are source maps and should they be deployed to production?

Show answer

Source maps link minified production code back to the original source files and line numbers, so DevTools and error trackers show readable stack traces. They are generated by the bundler as .map files. Many teams upload them privately to monitoring tools like Sentry and do not serve them publicly, which keeps original source code less exposed while still allowing debugging of production errors.

Explain dependencies, devDependencies and peerDependencies.

Show answer

dependencies are packages needed at runtime, such as a charting library. devDependencies are used only during development and build, like Vite, ESLint, TypeScript and test runners. peerDependencies are declared by libraries that expect the host project to provide a package, for example a React component library listing react as a peer, which avoids shipping two copies. For bundled frontend apps, the split mainly documents intent and affects installs.

What do caret and tilde mean in package versions, and why commit the lockfile?

Show answer

Versions follow semantic versioning: major.minor.patch. ^1.4.2 allows any 1.x.x version at or above 1.4.2, and ~1.4.2 allows only patch updates within 1.4.x. Because ranges can resolve differently over time, the lockfile, such as package-lock.json or pnpm-lock.yaml, records exact installed versions. Committing it and using npm ci in CI ensures every developer and build uses identical dependencies.

Compare npm, pnpm and Yarn.

Show answer

npm comes with Node and is the default. pnpm stores each package version once in a global content-addressable store and links it into projects, saving disk space and installing faster, and its strict node_modules layout prevents using undeclared dependencies. Yarn offers workspaces and Plug'n'Play mode. All three support workspaces for monorepos. pnpm has become very popular for large projects because of speed and strictness.

What is Hot Module Replacement?

Show answer

Hot Module Replacement updates changed modules in the running app without a full page reload, so you keep current state such as an open modal or form input while editing code. The dev server watches files, sends the update over a WebSocket, and the framework plugin swaps the module. CSS updates apply instantly. If a change cannot be applied safely, the dev server falls back to a full reload.

Create a new Vite project with TypeScript and run it.

Show answer

Use the official scaffolding tool: npm create vite@latest my-app -- --template vanilla-ts cd my-app npm install npm run dev # starts the dev server with HMR npm run build # type-checks and builds to dist/ npm run preview # serves the production build locally Templates also exist for react-ts, vue-ts and svelte-ts. The dist folder contains static files ready for any web server or CDN.

Tell me about a time you automated a repetitive task.

Show answer

Situation: in my internship, we resized and compressed product images manually before every upload. Task: I wanted to save the team time. Action: I wrote a small Node script using Sharp that converted images to WebP in three sizes and added it as an npm script. Result: a task that took an hour per batch became a one-minute command, and image sizes dropped by more than half.

What is the testing pyramid, and how does the testing trophy differ?

Show answer

The testing pyramid suggests many fast unit tests, fewer integration tests and very few slow end-to-end tests. The testing trophy, popular for frontend work, puts most effort into integration tests that render components with real behaviour, supported by static analysis like TypeScript and ESLint at the base. Both aim for confidence at reasonable cost; the trophy reflects that UI bugs often appear where units connect.

What is the difference between unit, integration and end-to-end tests?

Show answer

A unit test checks a single function or module in isolation, such as a price formatter. An integration test checks several pieces working together, like a form component with validation and an API call mocked at the network level. An end-to-end test drives a real browser through a complete user flow, such as signup to dashboard, against a running app. They trade speed for realism in that order.

Write a Vitest unit test for an INR price formatter.

Show answer

Test normal, edge and invalid inputs: // format.ts export const formatINR = (paise: number) => new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(paise / 100); // format.test.ts import { describe, it, expect } from 'vitest'; import { formatINR } from './format'; describe('formatINR', () => { it('formats lakhs with Indian grouping', () => { expect(formatINR(12345600)).toBe('\u20b91,23,456.00'); }); it('handles zero', () => { expect(formatINR(0)).toBe('\u20b90.00'); }); });

A bug reached production even though all tests passed. What do you do next?

Show answer

First I fix the bug and confirm the fix with the user's steps. Then I write a regression test that fails without the fix and passes with it, so the same bug cannot return. I also ask why existing tests missed it, for example mocks that hid the real API shape or a browser not covered, and improve that gap rather than only adding one test.

QA reports a bug that happens only in Safari on iPhone. How do you debug it?

Show answer

I would reproduce it on a real iPhone or simulator and connect Safari Web Inspector from a Mac to see console errors and network requests. Common causes are unsupported APIs, date parsing differences, 100vh and viewport issues, and input zoom on small fonts. Cloud device platforms help if no device is available. After fixing it, I would add WebKit to the Playwright browser matrix to catch similar issues.

How do you test that a page shows the right message when an API fails?

Show answer

I would simulate failures at the network layer with Mock Service Worker or Playwright's page.route, returning 500 responses, timeouts or malformed JSON. Then I assert that the user sees a clear error message, a retry button works, and no broken partial data appears. Testing empty states and slow responses with loading indicators is equally important, because these paths are often skipped in manual testing.

How do you handle a situation where a bug you wrote affected users?

Show answer

Situation: a form validation change I made blocked some users from signing up with valid numbers. Task: I needed to fix it and be transparent. Action: I informed my lead immediately, rolled back the change, found that my regex rejected numbers with a +91 prefix, fixed it, and added tests for different formats. Result: signups recovered within an hour, and I now test with real-world data samples.

How do you work with QA engineers as a frontend developer?

Show answer

I treat QA as partners rather than gatekeepers. I share feature details and edge cases early, give them testable builds on staging, and add stable test ids or accessible labels that help automation. When bugs come in, I ask for clear steps and environment details instead of arguing. In my last project, this collaboration cut bug reopen rates because we agreed on acceptance criteria before development.

Compare SPA, MPA, server-side rendering and static site generation.

Show answer

A single-page app loads once and renders views in the browser, giving app-like navigation but slower first load. A multi-page app renders each page on the server with full reloads. Server-side rendering generates HTML per request for fast content and SEO, then hydrates. Static site generation pre-builds HTML at build time and serves it from a CDN, which is fastest for content that changes rarely, like blogs.

How does client-side rendering affect SEO and social sharing?

Show answer

With pure client-side rendering, the initial HTML is mostly empty and content appears after JavaScript runs. Google can render JavaScript, but it happens later and less reliably, while many social media link previewers and some search engines do not run JavaScript at all, so titles and images are missing. Server rendering or prerendering important pages ensures content and meta tags are in the initial HTML.

At a high level, how does React's virtual DOM and reconciliation work?

Show answer

React components return a description of the UI as a tree of elements. When state changes, React renders a new tree and compares it with the previous one, a process called reconciliation, then applies only the minimal DOM changes needed. Keys help it match list items correctly. The React Compiler now adds automatic memoisation, reducing unnecessary re-renders without manual useMemo calls.

Where do you see yourself in five years as a frontend developer?