JavaScript Interview Questions 2026

Given an array of integers and a target sum, return all unique triplets that sum to the target. Discuss time and space complexity. Then extend the problem to k-sum and analyze how recursion depth changes performance for large k.

What differences do you see between Selenium and Playwright in automation testing? Cover architecture, browser support, speed, built-in waiting mechanisms, and cross-language support.

If a team currently using Selenium plans to migrate to Playwright, how would you help them adopt the new framework? Cover project structure, locator migration, parallel execution setup, and CI integration.

When two developers push changes to the same file in Git simultaneously, how would you resolve the merge conflict? Walk through: pulling latest, identifying conflict markers (<<<, ===, >>>), choosing which changes to keep, testing after resolution, and committing the merge.

What is the difference between async and defer attributes in JavaScript? When would you use each one?

How would you optimize video delivery in a web application to reduce load times and improve user experience?

What causes unnecessary re-renders in React, and how can React.memo, useMemo, and useCallback help improve performance?

What are resource hints such as preload, prefetch, and dns-prefetch? Explain when you would use each of them.

How would you optimize the loading of third-party scripts such as analytics, chat widgets, or advertising libraries?

A component renders hundreds of items and users experience UI lag. How would you investigate and optimize the rendering performance?

Write Playwright code to handle multiple windows (browser contexts/tabs) and perform actions on a new page. Explain the difference between new page events and popup events, and how to wait for a page load before interacting.

Explain the filter(), map(), and reduce() array methods in JavaScript with examples. Show how you would use them together to process a list of test results: filtering failures, mapping to error messages, and reducing to a summary count.

Explain async/await in JavaScript. How does it differ from Promise chaining? Write a function that fetches data from three APIs in parallel (Promise.all) and one after another (sequential await). When would you choose each?

What is cross-browser testing? How do you run the same Playwright test suite on Chrome, Firefox, and WebKit simultaneously? How do you handle browser-specific issues in your automation code?

Write a function that creates 3 buttons where clicking button N alerts N, using a for loop and var. Explain why the naive version is broken and how to fix it.

Explain how a browser renders a web page from the moment the user presses Enter. Cover: DNS resolution, TCP handshake, HTTP request, HTML parsing, CSSOM, render tree, layout, paint, and compositing. Where would you optimise for Core Web Vitals?

A list of 50,000 items renders in a React component. Users scroll and experience jank. How do you fix it without pagination?

Explain the difference between reconciliation and the commit phase in React. Why can render be interrupted in Concurrent Mode but commit cannot?

Explain how React's virtual DOM diffing algorithm (reconciliation) works. Why is it O(n) instead of O(n3)? What are the assumptions it makes and when do those break down (causing performance issues)?

Given an array of N integers, find the maximum product subarray. Explain why you need to track both the maximum and minimum product ending at each position, and handle zeros and negative numbers.

What is the difference between useMemo and useCallback? Give concrete examples of when each actually helps vs. when it hurts.

A news feed component re-fetches and re-renders every item whenever a single like count changes. Walk through how you would restructure state so only the affected item re-renders, without introducing a global state library.

Explain the output order of this code and why: console.log(1); setTimeout(()=>console.log(2),0); Promise.resolve().then(()=>console.log(3)); console.log(4);

Explain Paytm's mini-app platform architecture. Third-party developers build apps that run inside the Paytm super-app. How do you sandbox them (security), manage their lifecycle, share user identity safely (OAuth), and handle payments on their behalf?

Explain how font rendering works at the operating system level. How does Adobe handle vector-to-raster conversion (hinting, anti-aliasing) for different DPI screens? Why do fonts look different on Windows vs macOS?

You're building a browser-based image editor with layers, filters, and undo/redo. Would you manage canvas rendering state inside React state, or outside it? Justify your choice.

A web-based PDF viewer becomes unresponsive when rendering a 200-page document. What rendering strategy would you use so the app stays responsive?

Given an array of transaction amounts, find all pairs whose sum equals a given target. Return the count of unique pairs. For example: [100, 200, 300, 400], target = 500 → pairs: (100,400), (200,300) → count: 2. What is the time and space complexity of your approach?

You have an array of daily payment failure counts for the past 30 days. Find the longest contiguous subarray where failures stayed below a given threshold k. Explain your sliding window approach and walk through the algorithm step by step.

Given a list of payment events, each with a merchant ID and an amount, use a HashMap to return the top 3 merchants by total transaction volume. How would you handle ties? Write the complete solution.

Implement a function that detects duplicate transaction IDs within a 5-minute time window. Given an array of {id, timestamp} objects, return all IDs that appear more than once within any 5-minute rolling window. What data structure would you use and why?

Given a 2D matrix representing a payment heatmap (rows = hours, columns = days), find the submatrix with the maximum sum. The submatrix represents the peak payment activity window. Describe your approach — can you do better than O(n³)?

Design an in-memory rate limiter that allows at most N requests per user per minute. Given a stream of {userId, timestamp} requests, return true if the request should be allowed or false if it should be throttled. Implement using JavaScript.

What will the following code output and why? const obj = { x: 10 }; const fn = () => console.log(this.x); obj.fn = fn; obj.fn(); Now rewrite fn as a regular function. How does the output change and what is the reason?

Predict the output of this code: console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); Explain the event loop mechanism that determines this order.

Implement a debounce function from scratch in JavaScript. Then explain where you would use debounce vs throttle in a payment checkout flow — for example on a search input, a "Pay Now" button, and a scroll event handler.

Explain the reconciliation algorithm in React. How does React decide which DOM nodes to update when state changes? What is the role of the key prop and what happens when you use an array index as a key versus a stable unique ID?

Build a custom useFetch hook in React that accepts a URL, returns { data, loading, error }, handles component unmount (cleanup), and prevents state updates on an unmounted component. Show the complete implementation.

Implement a reusable PaymentForm component in React with fields for card number, expiry, and CVV. Add real-time validation using controlled components: card number must be 16 digits, expiry must be a future month, CVV 3–4 digits. No external libraries.

You need to implement optimistic UI for a "Add to Cart" button in a React e-commerce app. When the user clicks, the UI should update immediately, but revert if the API call fails. How would you implement this pattern without any state management library?

Implement Promise.allSettled from scratch without using the native method. Then explain the difference between Promise.all, Promise.allSettled, Promise.any, and Promise.race — give a concrete payment flow example for when you would use each.

A payment API call must retry up to 3 times on network failure, with exponential backoff (1s, 2s, 4s delays) between attempts. Implement a retryWithBackoff(fn, maxRetries) utility using Promises. Handle the case where all retries fail.

Design the frontend architecture for a PayU checkout SDK that can be embedded in any merchant website as a script tag. It must render a payment form in an iframe, handle cross-origin communication, support multiple payment methods (card, UPI, netbanking), and work across React, Vue, and plain HTML merchant sites.

You are building a multi-step payment flow: Cart → Address → Payment Method → OTP → Confirmation. Each step has its own data, validation, and API calls. How would you architect state management for this flow in React without Redux? Discuss trade-offs.

Design and implement a recursive category tree component in React for a merchant product catalogue. The tree can be N levels deep, each node can be expanded/collapsed independently, and the selected path must be highlighted. Clicking a leaf node should emit the full path (e.g. "Electronics > Phones > Android"). Optimise to avoid re-rendering siblings when one node is toggled.

A merchant reports that their checkout page built with your SDK scores 38 on Google Lighthouse. Walk through your systematic debugging process: which Core Web Vitals are likely failing, what tools you would use, and give five concrete optimisations specific to a payment checkout flow.

PayU wants to run A/B tests on the checkout button colour and payment method ordering to improve conversion rates. As the frontend engineer, how would you design the experimentation infrastructure: flag evaluation, consistent user bucketing, avoiding layout shift between variants, and measuring the right success metrics?

A React dashboard with 20 charts re-renders every time any filter changes, causing a 3-second lag. How do you optimize it?

A multi-step booking form (dates → guests → payment) loses all user input if they navigate back a step or refresh the page. How would you fix this without a backend round-trip on every keystroke?

Your React app initial load time is 8 seconds. Users complain it is too slow. Walk me through your optimization strategy.

What is React 19 use() hook and how does it change async data fetching compared to useEffect?

A drag-and-drop board with 500+ cards becomes laggy while dragging. What specific JavaScript/DOM techniques would you use to keep the drag interaction smooth?

What is the difference between useState and useRef in React? Give an example where using the wrong one would cause a bug.

What is a controlled component in React? Rewrite an uncontrolled input (using a ref) into a controlled one and explain the trade-off.