Skip to content
Frontend Development
All coursesPlacement Report
‹ Back to previous sectionCourse homeAll page URLs

Frontend Development Interview Questions in Gurgaon

36 practice questions with answers for Frontend Development interviews in Gurgaon.

Frontend Development jobs in Gurgaon

Gurgaon (Gurugram) is home to many multinational, consulting, fintech and consumer-internet offices. Interviews often expect strong business understanding along with technical skills, especially for analytics and product-facing roles.

Below are 36 questions that match the mix of service, product and domain employers hiring frontend developers in Gurgaon.

Solved for GurgaonStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
3 questions free Unlock the rest in seconds
01

Implement a throttle function.

Modern JavaScriptMedium
Save to ▾
Show answer
Throttle allows a function to run at most once in a given interval: function throttle(fn, wait) { let last = 0; return function (...args) { const now = Date.now(); if (now - last >= wait) { last = now; fn.apply(this, args); } }; } window.addEventListener('scroll', throttle(updateProgressBar, 100)); Unlike debounce, which waits for calls to stop, throttle fires regularly during continuous events such as scrolling or dragging.
02

Why are many teams moving from Jest to Vitest?

Frontend TestingMedium
Save to ▾
Show answer
Vitest reuses the Vite configuration and transform pipeline, so TypeScript, JSX, ES modules and path aliases work without separate Babel or ts-jest setup. It is fast thanks to on-demand transformation and smart watch mode, and its API is largely compatible with Jest, making migration easy. Jest remains mature and widely used, especially in projects not built with Vite. Both support mocking, snapshots and coverage.
03

What is TypeScript and why do teams adopt it?

TypeScriptEasy
Save to ▾
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.
04

Compare CSS Modules, CSS-in-JS and utility-first CSS.

CSS Architecture and AccessibilityMedium
Save to ▾
Show answer
CSS Modules scope class names per file at build time, giving plain CSS with no runtime cost. CSS-in-JS libraries write styles in JavaScript with dynamic props, but runtime versions add bundle size and slow server rendering, so zero-runtime options are now preferred. Utility-first frameworks like Tailwind compose small classes in markup, producing small CSS and consistent spacing. The choice depends on team preference and rendering strategy.
05

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

Frontend TestingEasy
Save to ▾
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.
06

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

Web PerformanceEasy
Save to ▾
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.
07

The main JavaScript bundle is 2 MB. How do you reduce it?

Web PerformanceMedium
Save to ▾
Show answer
I would run a bundle analyser to see what is inside. Usual wins are route-based code splitting, lazy loading heavy widgets, replacing large libraries such as full date or utility packages with smaller alternatives or native APIs, and importing only needed functions so tree shaking works. I would also remove polyfills for browsers we no longer support, and make sure production mode and minification are enabled.
08

What are long tasks and why do they hurt user experience?

Web PerformanceMedium
Save to ▾
Show answer
A long task is any main-thread work lasting more than 50 milliseconds. While it runs, the browser cannot respond to taps or paint updates, so the page feels frozen. Common sources are large script evaluation, heavy JSON processing, big framework re-renders and third-party scripts. The Performance panel highlights them with red corners, and splitting work into smaller chunks or moving it to a worker keeps the page responsive.
09

What is the difference between ES modules and CommonJS?

Modern JavaScriptEasy
Save to ▾
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.
10

Tell me about a time you received critical feedback in a code review.

CSS Architecture and AccessibilityMedium
Save to ▾
Show answer
Situation: a senior engineer rejected my pull request for a new dashboard because the CSS was hard to maintain. Task: I had to rework it without missing the sprint. Action: I asked for a short call to understand the concerns, refactored styles into reusable components with tokens, and added notes explaining my choices. Result: the PR was approved, and the components were later reused in two other screens.
11

Write a Playwright end-to-end test for a login flow.

Frontend TestingMedium
Save to ▾
Show answer
Use role-based locators and web-first assertions: import { test, expect } from '@playwright/test'; test('user can log in and see dashboard', async ({ page }) => { await page.goto('/login'); await page.getByLabel('Email').fill('student@example.com'); await page.getByLabel('Password').fill('Secret@123'); await page.getByRole('button', { name: 'Log in' }).click(); await expect(page).toHaveURL(/dashboard/); await expect(page.getByRole('heading', { name: 'My courses' })).toBeVisible(); }); Assertions auto-wait, so no manual sleeps are needed. Save login state with storageState to reuse in other tests.
12

Production builds take eight minutes on an old webpack setup. How would you speed them up?

Build Tools and ToolingHard
Save to ▾
Show answer
I would profile the build to find slow loaders and plugins. Quick wins include replacing Babel and Terser with SWC or esbuild, enabling persistent filesystem caching, and removing unused plugins. For a bigger gain, I would evaluate migrating to Vite or Rspack, which keeps webpack-compatible config. In CI, caching dependencies and build outputs and running only affected packages in a monorepo cut time further.
13

Describe a disagreement with your team about choosing a tool or framework.

Build Tools and ToolingHard
Save to ▾
Show answer
Situation: half the team wanted a heavy state management library for a new app, while I felt it was unnecessary. Task: we needed a decision quickly. Action: I suggested building the same feature both ways in a time-boxed spike and compared code size, learning curve and bundle impact. Result: the data favoured the simpler approach, the team agreed, and we documented criteria for when to add the library later.
14

How do environment variables work in frontend builds, and what is the risk?

Build Tools and ToolingMedium
Save to ▾
Show answer
Build tools replace variables at build time, for example Vite exposes only variables prefixed with VITE_ through import.meta.env. The values become plain text inside the JavaScript bundle that anyone can read. So frontend environment variables must never hold secrets like private API keys or database passwords; those belong on a server or backend proxy. Use them only for public configuration such as API base URLs.
15

Which tsconfig options are important for a strict codebase?

TypeScriptMedium
Save to ▾
Show answer
strict: true enables a family of checks, including strictNullChecks and noImplicitAny, and should be on for new projects. noUncheckedIndexedAccess adds undefined to array and record lookups, catching many runtime errors. exactOptionalPropertyTypes, noImplicitOverride and noFallthroughCasesInSwitch add more safety. For bundler-based apps, moduleResolution: bundler, isolatedModules and verbatimModuleSyntax keep TypeScript aligned with how tools like Vite compile code.
16

npm audit reports a critical vulnerability in a dependency. What do you do?

Build Tools and ToolingMedium
Save to ▾
Show answer
I would check whether the vulnerable package is actually used in the production bundle or only in build tooling, and whether the vulnerable code path is reachable. Then I would update to a patched version, using npm update or overrides for transitive dependencies. If no fix exists, I would look for an alternative package or mitigate. Automated tools like Dependabot or Renovate keep dependencies current.
17

Write a DeepReadonly type using mapped and conditional types.

TypeScriptHard
Save to ▾
Show answer
Recursively mark nested properties readonly: type DeepReadonly<T> = T extends (...args: any[]) => any ? T : T extends object ? { readonly [K in keyof T]: DeepReadonly<T[K]> } : T; interface Config { api: { baseUrl: string; retries: number } } const config: DeepReadonly<Config> = { api: { baseUrl: '/api', retries: 3 } }; // config.api.retries = 5; // error Functions are left untouched, and primitives end the recursion.
18

The build works on your machine but fails in CI. How do you troubleshoot?

Build Tools and ToolingMedium
Save to ▾
Show answer
I would compare environments first: Node version, package manager version, and whether CI uses npm ci with the committed lockfile while I used npm install. Other common causes are case-sensitive file paths on Linux, missing environment variables, and files ignored by Git. Pinning Node with an .nvmrc or engines field and reproducing the CI command locally in a clean clone or container usually reveals the difference.
19

What is visual regression testing?

Frontend TestingMedium
Save to ▾
Show answer
Visual regression testing captures screenshots of pages or components and compares them pixel by pixel with approved baselines, flagging unexpected visual changes such as broken spacing or wrong colours. Tools include Playwright's toHaveScreenshot, Chromatic with Storybook and Percy. To avoid false failures, run in consistent containers, disable animations, and mask dynamic content like dates. It catches CSS bugs that functional tests miss.
20

Tell me about a time you pushed back on releasing code without tests.

Frontend TestingMedium
Save to ▾
Show answer
Situation: near a release deadline, a teammate suggested skipping tests for a new checkout coupon feature. Task: I felt the risk to payments was too high. Action: I proposed covering only the critical paths, valid, expired and invalid coupons, and wrote those tests myself in two hours. Result: one test caught a discount rounding bug before release, and the feature shipped on time.
21

How can you communicate between multiple tabs of the same site?

Browser APIsMedium
Save to ▾
Show answer
BroadcastChannel lets same-origin tabs, windows and workers publish and subscribe to messages on a named channel, which suits syncing logout, theme or cart updates. The storage event fires in other tabs when localStorage changes, which is a simple fallback. SharedWorker can hold shared state for all tabs. Each option works only within the same origin, so cross-domain sync needs a server or postMessage.
22

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

Build Tools and ToolingEasy
Save to ▾
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.
23

Write a minimal observable store in plain JavaScript.

Frontend ArchitectureMedium
Save to ▾
Show answer
A store holds state and notifies subscribers: function createStore(initial) { let state = initial; const listeners = new Set(); return { get: () => state, set(update) { state = { ...state, ...update }; listeners.forEach(fn => fn(state)); }, subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn); } }; } const cart = createStore({ items: 0 }); const stop = cart.subscribe(s => (badge.textContent = s.items)); cart.set({ items: 2 }); The returned unsubscribe function prevents memory leaks.
24

Test a DOM form with Testing Library and user-event.

Frontend TestingMedium
Save to ▾
Show answer
Simulate real typing and clicks: import { screen } from '@testing-library/dom'; import userEvent from '@testing-library/user-event'; import { mountSignupForm } from './signup'; it('shows an error for an invalid mobile number', async () => { document.body.innerHTML = '<div id=app></div>'; mountSignupForm(document.getElementById('app')); const user = userEvent.setup(); await user.type(screen.getByLabelText('Mobile'), '12345'); await user.click(screen.getByRole('button', { name: 'Sign up' })); expect(screen.getByRole('alert')).toHaveTextContent('Enter a valid mobile number'); }); toHaveTextContent comes from @testing-library/jest-dom.
25

What are design tokens?

CSS Architecture and AccessibilityMedium
Save to ▾
Show answer
Design tokens are named values for design decisions, such as color-primary, space-4 or radius-md, stored in one place and shared by designers and developers. They are often kept in JSON and converted into CSS custom properties, Tailwind theme values or mobile platform formats. Changing a token updates every component consistently, which makes rebranding or dark mode much easier than hunting hard-coded values.
26

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

Modern JavaScriptEasy
Save to ▾
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.
27

What are the pros and cons of snapshot testing?

Frontend TestingMedium
Save to ▾
Show answer
Snapshot tests save a component's rendered output and fail when it changes, which quickly detects unintended changes with little effort. However, large snapshots are hard to review, so developers often update them blindly, and they break on harmless markup changes. They work best for small, stable outputs like serialised config or error messages. For UI behaviour, explicit assertions on visible text and roles are more meaningful.
28

How do HTTP caching headers work for frontend assets?

Web PerformanceMedium
Save to ▾
Show answer
Cache-Control controls caching. Files with content hashes in their names, like app.3f9a2c.js, can use max-age=31536000, immutable because a new build produces a new filename. HTML should use no-cache, which forces revalidation so users get new asset references after a deploy. ETag and Last-Modified allow cheap revalidation with 304 Not Modified responses. Wrong headers cause either stale apps or needless re-downloads.
29

How do private class fields and getters work in modern JavaScript?

Modern JavaScriptMedium
Save to ▾
Show answer
Fields prefixed with #, such as #balance, are truly private and cannot be accessed outside the class body, unlike the old underscore convention. Getters and setters, written get total() and set total(v), let you expose computed or validated properties while keeping internal state hidden. Static fields and static blocks are also supported. These features make classes safer for building reusable UI components and service objects.
30

Move a heavy calculation into a Web Worker.

Browser APIsMedium
Save to ▾
Show answer
The worker runs on its own thread and talks through messages: // worker.js self.onmessage = (e) => { const total = e.data.reduce((sum, row) => sum + row.amount, 0); self.postMessage(total); }; // main.js const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' }); worker.postMessage(bigArrayOfRows); worker.onmessage = (e) => showTotal(e.data); The UI stays responsive. Data is copied between threads, so for huge binary data use transferable objects like ArrayBuffer.
31

You must change a complex legacy module that has no tests. How do you proceed safely?

Frontend TestingMedium
Save to ▾
Show answer
I would first write characterisation tests that capture the current behaviour, including odd cases, by calling the module with real inputs and recording outputs. With that safety net, I make small refactors to separate logic from DOM or network code, adding focused tests as I go. Then I implement the change. Small commits and feature flags let me release gradually and roll back quickly if something breaks.
32

Collect Core Web Vitals from real users with the web-vitals library.

Web PerformanceMedium
Save to ▾
Show answer
Report metrics to your analytics endpoint: import { onLCP, onINP, onCLS } from 'web-vitals'; function send(metric) { const body = JSON.stringify({ name: metric.name, value: metric.value, rating: metric.rating, page: location.pathname }); navigator.sendBeacon('/analytics/vitals', body); } onLCP(send); onINP(send); onCLS(send); sendBeacon delivers data reliably even when the page is closing. Aggregate at the 75th percentile per page.
33

When should you use IndexedDB instead of localStorage?

Browser APIsMedium
Save to ▾
Show answer
localStorage is synchronous, stores only strings and is limited to about 5 MB, so large reads block the main thread. IndexedDB is asynchronous, stores structured data including blobs, supports indexes and transactions, and can hold hundreds of megabytes depending on disk space. Use it for offline data, drafts, cached API results or files in PWAs. Wrapper libraries like idb make its event-based API easier with promises.
34

Write a card that changes layout based on its container width.

CSS Architecture and AccessibilityMedium
Save to ▾
Show answer
Use a container query so the card adapts wherever it is placed: .card-wrapper { container-type: inline-size; } .card { display: grid; gap: 1rem; } @container (min-width: 420px) { .card { grid-template-columns: 160px 1fr; align-items: center; } } In a narrow sidebar the image stacks above text; in a wide main column it sits beside the text, with no viewport media queries.
35

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

CSS Architecture and AccessibilityEasy
Save to ▾
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.
36

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

CSS Architecture and AccessibilityEasy
Save to ▾
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.

Companies with offices in Gurgaon (8)

E-commerce & consumer tech

Zomato

Frontend Development interview questions

  • 30 questions
  • 4 rounds

Gurugram

View questions
E-commerce & consumer tech

MakeMyTrip

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Gurugram, Bengaluru

View questions
Product

Microsoft

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Hyderabad, Bengaluru, Noida +2

View questions
Product

Google

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Bengaluru, Hyderabad, Gurugram +2

View questions
Product

Amazon

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Bengaluru, Hyderabad, Chennai +2

View questions
Product

Adobe

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Noida, Bengaluru, Gurugram

View questions
Consulting

Thoughtworks

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Pune, Bengaluru, Chennai +2

View questions
Consulting

Publicis Sapient

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Gurugram, Noida, Bengaluru

View questions

Frequently asked questions

Which companies hire Frontend Development professionals in Gurgaon?

Companies with large offices in Gurgaon include Zomato, MakeMyTrip, Microsoft, Google, Amazon, Adobe, Thoughtworks, Publicis Sapient. Use their company pages below to practise employer-specific sets.

Are Frontend Development interviews in Gurgaon different from other cities?

The questions depend more on the company than the city. Gurgaon's mix of employers decides the style: Interviews often expect strong business understanding along with technical skills, especially for analytics and product-facing roles

How do I find Frontend Development jobs in Gurgaon?

Shortlist companies with Gurgaon offices, keep your CV focused on Frontend Development projects, apply on company career pages and job portals with the Gurgaon filter, and practise the questions on this page before each interview.

Other cities

DelhiNoidaBangaloreHyderabadPuneChennaiMumbaiKolkataAhmedabadJaipurLucknowChandigarhIndoreKochiCoimbatoreBhubaneswarNagpurVisakhapatnamThiruvananthapuram

More ways to practise

Company-wise Frontend Development questionsExperience-wise Frontend Development questionsRole-wise Frontend Development questionsCity-wise Frontend Development questionsMost asked Frontend Development questionsScenario-based questionsPractical / hands-on questionsHR & behavioural questionsFrontend Development mock interviewOnline assessment questionsTechnical round questionsManagerial round questionsFrontend Development topic sheets