Frontend Development Interview Questions in Noida

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.

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

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.

What is the difference between lab data and field data in performance?

Show answer

Lab data comes from controlled tests like Lighthouse or WebPageTest on a fixed device and network, which is great for debugging and comparing changes. Field data, or real user monitoring, comes from actual visitors through the Chrome UX Report or your own analytics, capturing real devices, networks and behaviour. Google ranks on field data. A page can score well in the lab but fail in the field on low-end phones.

Why is Vite faster than webpack during development?

Build Tools and ToolingEasy

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.

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

Modern JavaScriptMedium

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.

When should you use IndexedDB instead of localStorage?

Browser APIsMedium

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.

Set up ESLint with the flat config for a TypeScript project.

Show answer

Install packages and create eslint.config.js: // npm i -D eslint @eslint/js typescript-eslint import js from '@eslint/js'; import tseslint from 'typescript-eslint'; export default tseslint.config( js.configs.recommended, ...tseslint.configs.recommended, { rules: { '@typescript-eslint/no-explicit-any': 'warn', 'no-console': ['warn', { allow: ['error'] }] } }, { ignores: ['dist/'] } ); Run npx eslint . locally and in CI. Leave formatting to Prettier so the two tools do not conflict.

Design the frontend for a search box with autocomplete suggestions.

Frontend ArchitectureHard

Show answer

I would debounce input by about 200 milliseconds, cancel outdated requests with AbortController and cache recent queries in a Map. Suggestions render in an accessible combobox pattern with aria-expanded, aria-activedescendant and arrow key navigation. I would highlight matched text safely, show loading and empty states, and limit results to around eight. Measuring latency and prefetching popular terms keep it feeling instant on slow networks.

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

Browser APIsMedium

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.

How do you test code that depends on the current date or timers?

Frontend TestingMedium

Show answer

Real time makes tests slow and nondeterministic. I would use fake timers, such as vi.useFakeTimers() and vi.setSystemTime(new Date('2026-11-12T10:00:00+05:30')), then advance time with vi.advanceTimersByTime to test debounce, countdowns or expiry logic instantly. Restoring real timers after each test avoids leaking state. Designing functions to accept a clock or date parameter makes them even easier to test.

What are the URL and URLSearchParams APIs used for?

Browser APIsEasy

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.

After a release, the app shows a blank page in some older browsers. What could be wrong?

Show answer

The build probably targets newer syntax or uses an API that older browsers lack, causing a parse error that stops the whole bundle. I would check the console in that browser, compare the build target and browserslist with our support policy, and add missing polyfills for used APIs. Error monitoring with browser breakdowns catches this quickly, and testing on the oldest supported browser should be part of release checks.

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

Modern JavaScriptEasy

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.

Create a simple custom element with Shadow DOM.

Browser APIsMedium

Show answer

Extend HTMLElement and register a tag name containing a hyphen: class RatingStars extends HTMLElement { connectedCallback() { const value = Number(this.getAttribute('value') || 0); const root = this.attachShadow({ mode: 'open' }); root.innerHTML = `<style>span { color: var(--star-color, orange); }</style> <span role='img' aria-label='${value} out of 5'>${'*'.repeat(value)}</span>`; } } customElements.define('rating-stars', RatingStars); // usage: <rating-stars value='4'></rating-stars> The custom property lets the page theme it despite Shadow DOM isolation.

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

Frontend TestingEasy

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.

End-to-end tests fail randomly in CI about one run in five. How do you stabilise them?

Frontend TestingHard

Show answer

I would collect traces, videos and screenshots of failures to see what actually happened. Usual fixes are replacing fixed waits with auto-waiting assertions, waiting for specific network responses, seeding isolated test data per test, mocking unstable third-party services, and disabling animations. I would quarantine persistently flaky tests with a tracking ticket rather than letting the team ignore red builds, and retry only as a temporary measure.

What are design tokens?

CSS Architecture and AccessibilityMedium

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.

What are CSS cascade layers and what problem do they solve?

CSS Architecture and AccessibilityHard

Show answer

Cascade layers, declared with @layer reset, base, components, utilities, let you control the order of priority between groups of styles regardless of selector specificity. A simple selector in a later layer beats a highly specific selector in an earlier layer. This solves specificity wars between resets, third-party libraries and your components, without resorting to !important. Unlayered styles win over all layered ones.

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

Frontend TestingEasy

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.

How do HTTP/2 and HTTP/3 change frontend bundling strategy?

Web PerformanceHard

Show answer

HTTP/1.1 allowed few parallel requests per domain, so developers concatenated everything into one big bundle and used domain sharding. HTTP/2 multiplexes many requests over one connection, and HTTP/3 runs over QUIC to avoid head-of-line blocking on lossy mobile networks. This makes moderate chunk splitting efficient and improves caching, because changing one module invalidates only its chunk. Still, too many tiny files add overhead.

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

Frontend TestingMedium

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.

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

TypeScriptEasy

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.

Configure cache headers for hashed assets and HTML in Nginx.

Show answer

Long cache for fingerprinted files, revalidation for HTML: location ~* \.(js|css|woff2|avif|webp|svg)$ { add_header Cache-Control 'public, max-age=31536000, immutable'; } location / { try_files $uri /index.html; add_header Cache-Control 'no-cache'; } This works only when build tools add content hashes to filenames. Returning users then load assets from cache instantly, while every deploy still reaches them through fresh HTML.

Marketing has added many third-party scripts and the site has become slow. What do you do?

Show answer

I would measure each script's cost using the Performance panel and request blocking in DevTools. Then I would remove unused tags, load the rest with async or defer, delay non-essential ones like chat widgets until user interaction or idle time, and use facades, such as a static image for embedded videos. Moving tag management to a server-side setup and agreeing on a script budget with marketing prevents repeat problems.

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

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.

How does type narrowing work in TypeScript?

TypeScriptMedium

Show answer

Narrowing is how TypeScript refines a broad type to a specific one inside a code branch. It understands typeof checks, instanceof, the in operator, equality checks, truthiness and discriminant properties. For example, inside if (typeof value === 'string') you can call value.toUpperCase(). Custom type guard functions returning value is User extend this to your own checks, and assertion functions narrow after they run.

Mock fetch in a Vitest test to check error handling.

Frontend TestingMedium

Show answer

Stub the global fetch and assert behaviour: import { it, expect, vi, afterEach } from 'vitest'; import { loadCourses } from './api'; afterEach(() => vi.unstubAllGlobals()); it('returns an empty list when the server fails', async () => { vi.stubGlobal('fetch', vi.fn().mockResolvedValue( new Response('Server error', { status: 500 }) )); const result = await loadCourses(); expect(result).toEqual([]); expect(fetch).toHaveBeenCalledWith('/api/courses'); }); For larger suites, MSW handlers are cleaner than stubbing fetch in every test.

How would you choose a frontend framework for a new project?

Frontend ArchitectureMedium

Show answer

I would base it on project needs and team context rather than trends: team experience, hiring market in India, SEO and rendering requirements, ecosystem maturity, long-term support and performance on target devices. React has the largest ecosystem and talent pool, Angular suits large enterprise teams wanting an opinionated structure, Vue is approachable, and Svelte or Astro produce less JavaScript. A small proof of concept helps confirm the choice.

Define brand design tokens in Tailwind CSS v4.

CSS Architecture and AccessibilityMedium

Show answer

Tokens go in CSS with the @theme directive: @import 'tailwindcss'; @theme { --color-brand-500: #2563eb; --color-brand-700: #1d4ed8; --font-display: 'Poppins', sans-serif; --radius-card: 12px; } /* usage in markup */ /* <button class='bg-brand-500 hover:bg-brand-700 rounded-card font-display'> */ Tailwind generates utilities like bg-brand-500 from these variables and also exposes them as CSS custom properties for use in plain CSS.

What is transpilation and how does browserslist control it?

Show answer

Transpilation converts modern JavaScript or TypeScript into syntax that target browsers understand. Tools include Babel, SWC and esbuild. A browserslist setting, such as '> 0.5%, last 2 versions, not dead', or a build target like es2020, decides which features need conversion and which polyfills to include. Targeting only modern browsers produces smaller, faster code, so the support list should be based on real analytics.

What are code splitting and lazy loading?

Web PerformanceEasy

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.

A third-party library you need has no TypeScript types. What do you do?

TypeScriptMedium

Show answer

First I check if types exist on DefinitelyTyped by installing @types/library-name. If not, I write a minimal declaration file, for example declare module 'old-chart-lib' with only the functions I use, in a types folder included by tsconfig. This is better than a blanket any import. If the library is important to the community, contributing those types upstream helps everyone.

Companies with offices in Noida (4)

Fintech

Paytm

Frontend Development interview questions

30 questions
5 rounds

Noida, Bengaluru, Mumbai

Product

Microsoft

Frontend Development interview questions

30 questions
5 rounds

Hyderabad, Bengaluru, Noida +2

Product

Adobe

Frontend Development interview questions

30 questions
5 rounds

Noida, Bengaluru, Gurugram

Consulting

Publicis Sapient

Frontend Development interview questions

30 questions
5 rounds

Gurugram, Noida, Bengaluru