Explain hoisting and the temporal dead zone.

Declarations are registered when a scope is created, before any of its code runs. What differs is the starting value: - var is hoisted and set to undefined, so reading it early gives undefined. - Function declarations are hoisted with their body, so you can call them above where they are written. - let, const and class are hoisted but left uninitialised. Reading them before the declaration line throws a ReferenceError. The stretch between the start of the scope and the declaration line is the temporal dead zone. console.log(a); // undefined console.log(b); // ReferenceError var a = 1; let b = 2; Function expressions follow their variable: var fn = function () {} is undefined until that line runs.

What is a closure? Give a practical use for one.

A closure is a function together with the scope it was created in. The function keeps access to the variables of that scope even after the outer function has returned. function createCounter() { let count = 0; // private: nothing outside can touch it return { increment: () => ++count, value: () => count, }; } const counter = createCounter(); counter.increment(); counter.value(); // 1 Practical uses: private state as above, function factories, and utilities such as debounce and memoize, which keep a timer or a cache between calls. The cost to mention: a closure keeps its captured variables alive for as long as the function is reachable, so a long-lived callback holding a large object is a memory leak.

What is the difference between ==, === and Object.is?

=== compares without converting types. == converts first, which gives results such as '1' == 1 and null == undefined being true. The one widely accepted use of == is value == null, which checks for both null and undefined. Object.is behaves like === with two differences: Object.is(NaN, NaN) is true, and Object.is(+0, -0) is false. All three compare objects by reference, so {} === {} is false. Worth adding in a React interview: React uses Object.is to decide whether state or a dependency changed, which is why mutating an object in place does not trigger a re-render.

Explain the event loop. In what order do a setTimeout, a promise callback and synchronous logs run?

JavaScript runs on one call stack. When the stack is empty, the event loop first runs every queued microtask (promise callbacks, queueMicrotask, MutationObserver), then takes one macrotask (a timer, an I/O callback, a UI event), and the browser may render in between. console.log('A'); setTimeout(() => console.log('B'), 0); Promise.resolve().then(() => console.log('C')); console.log('D'); // A, D, C, B Synchronous code finishes first (A, D). The promise callback is a microtask, so it runs before the timer, which is a macrotask, even with a 0 ms delay. With async functions, everything after an await is scheduled as a microtask. A common follow-up is a longer snippet mixing both; work through it queue by queue instead of guessing.

Paytm Frontend Interview Questions

Q: Write a polyfill for Array.prototype.reduce.

Array.prototype.myReduce = function (callback, initialValue) { let index = 0; let accumulator = initialValue; if (arguments.length = this.length) { throw new TypeError('Reduce of empty array with no initial value'); } accumulator = this[index++]; } for (; index < this.length; index++) { if (index in this) { accumulator = callback(accumulator, this[index], index, this); } } return accumulator; }; The details that separate answers: checking arguments.length instead of initialValue === undefined (passing undefined on purpose is valid), throwing on an empty array with no initial value, and skipping holes in sparse arrays. map and filter are the usual warm-ups. Both take the same (value, index, array) callback and an optional thisArg.

Broad fundamentals across JavaScript, React and CSS.

Paytm covers payments, commerce and financial services, with many separate web products and teams. Interview loops vary by team more than at some companies, but they are usually described as fundamentals-first.

Expect direct questions on JavaScript concepts, React basics and CSS, some coding, and a discussion of your current project.

Questions: 15, 5 with free answers
Interview rounds: 4
Last reviewed: October 2026

Paytm frontend interview process

The usual shape of the loop. A guide to what to prepare, not a promise of what you will get.

1
Technical round 1
JavaScript concepts, output-based questions and small coding problems.
2
Technical round 2
React, state management, CSS, and a small component or a feature to design.
3
Hiring manager
A deep dive into a project you owned.
4
HR
Role, team and logistics.

What interviewers tend to look for

Explaining a concept clearly with a short example.
Predicting the output of tricky snippets: hoisting, equality, the event loop.
CSS layout and specificity without looking things up.
Knowing your own project in depth, including what you would change.

Your Paytm mock interview

15 questions. Type an answer under each one and an AI reviewer scores it and tells you what you missed. Stuck on one? Ask for a hint. A free account gets 3 AI replies a day.

Your mock interview

0 of 15 answered

Answer a question and your score shows up here.

JavaScript

6 questions

Question 1 of 15JavaScript
Paytm interviewer
Explain hoisting and the temporal dead zone.
Your answer to question 1
Model answer
Declarations are registered when a scope is created, before any of its code runs. What differs is the starting value:
- var is hoisted and set to undefined, so reading it early gives undefined.
- Function declarations are hoisted with their body, so you can call them above where they are written.
- let, const and class are hoisted but left uninitialised. Reading them before the declaration line throws a ReferenceError.
The stretch between the start of the scope and the declaration line is the temporal dead zone.
```
console.log(a); // undefined
console.log(b); // ReferenceError
var a = 1;
let b = 2;
```
Function expressions follow their variable: var fn = function () {} is undefined until that line runs.
Question 2 of 15JavaScript
Paytm interviewer
What is a closure? Give a practical use for one.
Your answer to question 2
Model answer
A closure is a function together with the scope it was created in. The function keeps access to the variables of that scope even after the outer function has returned.
```
function createCounter() {
  let count = 0; // private: nothing outside can touch it
  return {
    increment: () => ++count,
    value: () => count,
  };
}

const counter = createCounter();
counter.increment();
counter.value(); // 1
```
Practical uses: private state as above, function factories, and utilities such as debounce and memoize, which keep a timer or a cache between calls.
The cost to mention: a closure keeps its captured variables alive for as long as the function is reachable, so a long-lived callback holding a large object is a memory leak.
Question 3 of 15JavaScript
Paytm interviewer
What is the difference between ==, === and Object.is?
Your answer to question 3
Question 4 of 15JavaScript
Paytm interviewer
Explain the event loop. In what order do a setTimeout, a promise callback and synchronous logs run?
Your answer to question 4
Model answer
JavaScript runs on one call stack. When the stack is empty, the event loop first runs every queued microtask (promise callbacks, queueMicrotask, MutationObserver), then takes one macrotask (a timer, an I/O callback, a UI event), and the browser may render in between.
```
console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

// A, D, C, B
```
Synchronous code finishes first (A, D). The promise callback is a microtask, so it runs before the timer, which is a macrotask, even with a 0 ms delay.
With async functions, everything after an await is scheduled as a microtask. A common follow-up is a longer snippet mixing both; work through it queue by queue instead of guessing.

Question 5 of 15JavaScript

Paytm interviewer

Write a polyfill for Array.prototype.reduce.

Model answer

Array.prototype.myReduce = function (callback, initialValue) {
  let index = 0;
  let accumulator = initialValue;

  if (arguments.length < 2) {
    // No initial value: use the first element that exists.
    while (index < this.length && !(index in this)) index++;
    if (index >= this.length) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    accumulator = this[index++];
  }

  for (; index < this.length; index++) {
    if (index in this) {
      accumulator = callback(accumulator, this[index], index, this);
    }
  }
  return accumulator;
};

The details that separate answers: checking arguments.length instead of initialValue === undefined (passing undefined on purpose is valid), throwing on an empty array with no initial value, and skipping holes in sparse arrays.

map and filter are the usual warm-ups. Both take the same (value, index, array) callback and an optional thisArg.

Question 6 of 15JavaScript
Paytm interviewer
How do ES modules differ from CommonJS, and why does tree shaking depend on ES modules?
Your answer to question 6

TypeScript

1 question

Question 7 of 15TypeScript
Paytm interviewer
What is the difference between a type alias and an interface?
Your answer to question 7
Model answer
Both can describe the shape of an object, and for that job they are close to interchangeable. The differences:
- An interface can be declared more than once and the declarations merge. That is how you add a field to Window or to a library's types.
- An interface extends others with extends. A type combines with &.
- A type can name anything: unions, tuples, primitives, mapped types and conditional types. An interface can only describe an object or function shape.
```
type Status = 'idle' | 'loading' | 'error'; // only a type can do this

interface User {
  id: string;
  name: string;
}

interface Admin extends User {
  permissions: string[];
}
```
A sensible rule to state: use either for object shapes, use type when you need a union or a computed type, and stay consistent within a codebase.

React

3 questions

Question 8 of 15React
Paytm interviewer
How does React decide what to update in the DOM? Why do list items need keys?
Your answer to question 8
Model answer
Rendering calls your components and produces a tree of elements. React compares that tree with the previous one (reconciliation) and then applies only the differences to the DOM, in a separate commit step.
Two rules keep the comparison fast:
- A different element type at the same position (a div becoming a section, or Login becoming Dashboard) means React throws that subtree away and builds a new one. Its state is lost.
- The same type at the same position means React keeps the instance and its state and updates the props.
In a list, position is not enough, because items move. A key tells React which item is which between renders. With the array index as the key, inserting at the top makes every item look changed, and state such as a typed input value ends up attached to the wrong row. Use a stable id from the data.
A useful trick follows from the same rule: changing a component's key on purpose resets its state.
Question 9 of 15React
Paytm interviewer
What is the difference between a controlled and an uncontrolled component?
Your answer to question 9
Model answer
In a controlled input, React state holds the value. You pass value and onChange, and every keystroke goes through state. That makes validation, formatting and conditional UI easy.
In an uncontrolled input, the DOM holds the value. You give it a defaultValue and read the result on submit, through a ref or FormData.
```
// Controlled
<input value={email} onChange={(e) => setEmail(e.target.value)} />

// Uncontrolled
<form
  onSubmit={(event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    save(data.get('email'));
  }}
>
  <input name="email" defaultValue="" />
</form>
```
Uncontrolled inputs re-render less, which is why form libraries such as React Hook Form use them, and React 19 form actions work the same way. A file input is always uncontrolled.
The warning to recognise: an input whose value goes from undefined to a string has switched from uncontrolled to controlled. Start it with an empty string.
Question 10 of 15React
Paytm interviewer
How do you decide where state should live, and when would you add a state management library?
Your answer to question 10
Model answer
Sort the state by kind first, because each kind has a natural home:
- Local UI state (is this menu open): useState or useReducer in the component.
- State shared by a few siblings: lift it to their nearest common parent.
- App-wide client state that changes rarely (theme, auth): Context.
- Server state, meaning data fetched from an API: a cache library such as TanStack Query, SWR or RTK Query, or the framework's own data layer. It handles caching, deduplication, retries and refetching.
- State that should survive a refresh or be shareable (filters, page number, selected tab): the URL.
Most of what teams once put in a global store was server state. With that handled by a cache, the remaining shared client state is often small.
Reach for Redux Toolkit or Zustand when many distant components read and write the same client state, when updates need to be traceable, or when Context re-renders become a measured problem.

CSS

2 questions

Question 11 of 15CSS
Paytm interviewer
How does the browser decide which CSS rule wins?
Your answer to question 11
Model answer
When several declarations target the same property on the same element, the cascade checks, in order:
- Origin and importance: !important declarations beat normal ones.
- Cascade layers: for normal declarations, a later @layer beats an earlier one, and styles outside any layer beat all layers.
- Specificity.
- Source order: the last one written wins.
Specificity is compared as three numbers: ids, then classes, attributes and pseudo-classes, then element names and pseudo-elements. #nav .link is (1,1,0) and beats .menu .item .link at (0,3,0), because ids are compared first. An inline style attribute beats any selector.
Useful details: :where() always has zero specificity, while :is() and :not() take the specificity of their most specific argument.
In practice, keep specificity low and flat by styling with single classes, and use @layer to order resets, components and utilities instead of fighting with !important.
Question 12 of 15CSS
Paytm interviewer
How many ways can you centre an element horizontally and vertically?
Your answer to question 12
Model answer
```
/* 1. Grid: the shortest */
.parent {
  display: grid;
  place-items: center;
}

/* 2. Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. Absolute positioning, size unknown */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 4. Absolute positioning with auto margins, size known */
.child {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}
```
Interviewers usually want you to explain one of them. In the third, top and left move the child's corner to the middle of the parent, and the transform shifts it back by half of its own size, because percentages in translate refer to the element itself.
For horizontal centring only: margin-inline: auto on a block with a width, or text-align: center for inline content.

Browser, performance and system design

2 questions

Question 13 of 15Browser, performance and system design
Paytm interviewer
Compare cookies, localStorage and sessionStorage. Where should an auth token be stored?
Your answer to question 13
Model answer
- Cookies: about 4 KB each, sent to the server with every request to their domain. They can have an expiry and security flags.
- localStorage: around 5 MB per origin, kept until cleared, shared by all tabs. Never sent to the server. The API is synchronous.
- sessionStorage: the same API, limited to one tab and cleared when it closes.
- IndexedDB: a larger, asynchronous database for structured data, used for offline apps.
For a session or auth token, the safest common choice is a cookie with three flags:
- HttpOnly: JavaScript cannot read it, so a script injected through XSS cannot steal it.
- Secure: sent over HTTPS only.
- SameSite=Lax or Strict: not sent on most cross-site requests, which blocks most CSRF.
Anything in localStorage can be read by any script running on the page, including a compromised dependency. That is why long-lived tokens do not belong there. If a design does keep a token in JavaScript, keep it in memory and make it short-lived, with the refresh token in an HttpOnly cookie.
Question 14 of 15Browser, performance and system design
Paytm interviewer
What is the difference between async and defer on a script tag? What are preload and prefetch?
Your answer to question 14
Model answer
- A plain script stops the HTML parser while the file downloads and runs.
- async downloads in parallel and runs as soon as the file arrives, pausing the parser at that moment. Order is not guaranteed. Use it for independent scripts such as analytics.
- defer downloads in parallel and runs after the document has been parsed, in the order the scripts appear, just before DOMContentLoaded. Use it for application code.
- type="module" scripts are deferred by default.
Resource hints tell the browser about things it has not discovered yet:
- preload: this page needs the file soon, so fetch it now at high priority. Used for a font, or a hero image referenced from CSS.
- prefetch: a later navigation will probably need this, so fetch it when idle.
- preconnect: open the connection to another origin early.
- fetchpriority="high" on an image raises its priority, which helps LCP.
Preloading too much is a common mistake. Everything marked urgent competes with what really is.

Machine coding

1 question

Question 15 of 15Machine coding
Paytm interviewer
Build a pagination component.
Your answer to question 15
Model answer
Props: page, totalPages and onChange. The interesting part is deciding which page numbers to show when there are many.
```
function getPages(current, total, siblings = 1) {
  const pages = [];
  const start = Math.max(2, current - siblings);
  const end = Math.min(total - 1, current + siblings);

  pages.push(1);
  if (start > 2) pages.push('...');
  for (let p = start; p <= end; p++) pages.push(p);
  if (end < total - 1) pages.push('...');
  if (total > 1) pages.push(total);

  return pages;
}

getPages(6, 20); // [1, '...', 5, 6, 7, '...', 20]
getPages(1, 5); // [1, 2, '...', 5]
```
- The first and last page are always shown, with the current page and its neighbours in between.
- Previous is disabled on page 1 and Next on the last page.
- Wrap it in a nav with an aria-label, and mark the current page with aria-current="page".
- It is a controlled component. It does not fetch anything itself.
Follow-ups: keeping the page in the URL so that it survives a refresh and can be shared, cancelling the previous request when the page changes quickly, a page size selector, and when to use a cursor with a Load more button instead.
Practise this in the editor: Pagination

Practise for Paytm

Reading answers is the easy half. These problems run in the browser against real tests.

What interviewers tend to look for

Your Paytm mock interview

Your mock interview

JavaScript

Explain hoisting and the temporal dead zone.

What is a closure? Give a practical use for one.

What is the difference between ==, === and Object.is?

Explain the event loop. In what order do a setTimeout, a promise callback and synchronous logs run?

Write a polyfill for Array.prototype.reduce.

How do ES modules differ from CommonJS, and why does tree shaking depend on ES modules?

TypeScript

What is the difference between a type alias and an interface?

React

How does React decide what to update in the DOM? Why do list items need keys?

What is the difference between a controlled and an uncontrolled component?

How do you decide where state should live, and when would you add a state management library?

CSS

How does the browser decide which CSS rule wins?

How many ways can you centre an element horizontally and vertically?

Browser, performance and system design

Compare cookies, localStorage and sessionStorage. Where should an auth token be stored?

What is the difference between async and defer on a script tag? What are preload and prefetch?

Machine coding

Build a pagination component.

Practise for Paytm

Other company guides