‹ Back to previous section Course home All page URLs

Frontend Development Telephonic Interview Questions & Answers

30 questions for the telephonic interview stage — 22 easy, 8 medium.

About the telephonic interview round

The telephonic or screening round is a 15-30 minute call with a recruiter or engineer. It checks your basics, your CV and whether you can explain Frontend Development concepts clearly without a screen to point at.

Tips for the telephonic interview round

Keep your CV in front of you and be ready to explain every line on it.
Answer in short, clear sentences; there is no whiteboard, so structure matters.
Take the call somewhere quiet and confirm the time in advance.
Prepare one question to ask the interviewer at the end.

Solved — telephonic interviewStart 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

Why does await inside forEach not wait for each item?

Modern JavaScriptMedium

Show answer

forEach ignores the promise returned by an async callback, so all callbacks start almost at once and forEach finishes before any await completes. Code after it runs too early. For sequential processing, use a for...of loop with await inside. For parallel processing with a final result, use await Promise.all(items.map(async item => ...)). Choosing between them depends on whether order and rate limits matter.

Show clear focus styles only for keyboard users.

CSS Architecture and AccessibilityEasy

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.

What is the difference between local UI state, global state and server state?

Frontend ArchitectureMedium

Show answer

Local state belongs to one component, like whether a dropdown is open. Global client state is shared across the app, like theme or the logged-in user. Server state is data owned by the backend, such as orders, that must be fetched, cached, refreshed and kept in sync. Treating server state separately with tools like TanStack Query removes much of the code teams once wrote in global stores.

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

Build Tools and ToolingEasy

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.

Users report errors you cannot reproduce. How do you set up frontend observability?

Frontend ArchitectureMedium

Show answer

I would add an error monitoring tool like Sentry with uploaded source maps, release tags and user context such as browser and route, without personal data. Real user monitoring tracks Web Vitals and slow API calls. Breadcrumbs of clicks and network requests before an error help reproduce issues, and session replay with privacy masking shows what users saw. Alerts on error spikes after a release enable quick rollbacks.

Write a Vitest unit test for an INR price formatter.

Frontend TestingEasy

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'); }); });

How do browser permission APIs like Geolocation and Notifications work?

Browser APIsEasy

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'.

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

CSS Architecture and AccessibilityMedium

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.

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 can web fonts slow a page down and how do you optimise them?

Web PerformanceEasy

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.

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

Frontend ArchitectureEasy

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.

How does destructuring with default values work?

Modern JavaScriptEasy

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.

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

Frontend TestingEasy

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 are union and intersection types?

TypeScriptEasy

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.

What is Hot Module Replacement?

Build Tools and ToolingEasy

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.

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.

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.

Why use requestAnimationFrame instead of setTimeout for animations?

Browser APIsEasy

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.

How do you estimate the time needed for a frontend feature?

Frontend ArchitectureMedium

Show answer

I break the feature into small parts: components, states such as loading, empty and error, API integration, responsive behaviour, accessibility and tests. I estimate each part, add time for reviews and unknowns, and flag dependencies like pending designs or APIs. For example, a filter panel I estimated at five days was delivered in five because I had listed edge cases upfront instead of discovering them late.

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

Build Tools and ToolingEasy

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.

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 would you learn TypeScript quickly if your new project required it?

TypeScriptEasy

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.

Keep product filters in sync with the URL query string.

Browser APIsEasy

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.

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

Frontend TestingEasy

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.

What is the difference between ES modules and CommonJS?

Modern JavaScriptEasy

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.

What is the difference between type and interface in TypeScript?

TypeScriptEasy

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.

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

Frontend TestingEasy

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.

What is the guiding principle of Testing Library and why query by role?

Frontend TestingMedium

Show answer

Testing Library encourages testing the way users interact: find elements by what they see and hear, not by implementation details like class names or component internals. getByRole('button', { name: 'Submit' }) is preferred because it also verifies the element is accessible. Tests written this way survive refactors and catch real accessibility problems. Test ids are a last resort when no accessible query works.

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

Build Tools and ToolingEasy

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.

Explain optional chaining and the nullish coalescing operator.

Modern JavaScriptEasy

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.

Frequently asked questions

What happens in the Frontend Development telephonic interview round?

How do I clear the telephonic interview round?

Keep your CV in front of you and be ready to explain every line on it. Answer in short, clear sentences; there is no whiteboard, so structure matters. Take the call somewhere quiet and confirm the time in advance.

Which round comes next?

A typical order is online assessment, telephonic screening, one or two technical rounds, a managerial round and HR. Use the other round pages to practise each stage.

Practise every interview round

Online Assessment questions Technical Round questions Managerial Round questions Rapid-Fire questions HR & behavioural questions Full mock interview

More ways to practise

Company-wise Frontend Development questions Experience-wise Frontend Development questions Role-wise Frontend Development questions City-wise Frontend Development questions Most asked Frontend Development questions Scenario-based questions Practical / hands-on questions HR & behavioural questions Frontend Development mock interview Online assessment questions Technical round questions Managerial round questions Frontend Development topic sheets