Question 1

What is the event loop in JavaScript?

Accepted Answer

The event loop is JavaScript's concurrency model. It continuously checks the call stack and the callback queue. When the call stack is empty, it pushes the first callback from the queue onto the stack. This is how JavaScript handles asynchronous operations like setTimeout, Promises, and I/O despite being single-threaded.

Question 2

What is a closure in JavaScript?

Accepted Answer

A closure is a function that retains access to its outer (lexical) scope even after the outer function has finished executing. Closures are used for data encapsulation, memoization, partial application, and module patterns.

Question 3

What is the difference between flexbox and CSS Grid?

Accepted Answer

Flexbox is a one-dimensional layout system best for arranging items in a row or column. CSS Grid is a two-dimensional system for creating complex layouts with both rows and columns simultaneously. Use Flexbox for component-level layout and Grid for page-level layout.

Question 4

What are React hooks?

Accepted Answer

React hooks are functions introduced in React 16.8 that let you use state and lifecycle features in functional components. Core hooks include useState (local state), useEffect (side effects), useContext (context consumption), useRef (mutable refs), useMemo and useCallback (performance optimizations).

Question 5

What is the difference between == and === in JavaScript?

Accepted Answer

== performs abstract equality comparison with type coercion (e.g., '5' == 5 is true). === performs strict equality comparison with no coercion (e.g., '5' === 5 is false). Always prefer === to avoid unexpected type coercion bugs.

Question 6

How does virtual DOM work in React?

Accepted Answer

React keeps a lightweight in-memory copy of the real DOM called the virtual DOM. On state/prop changes, React creates a new virtual DOM tree, diffs it with the previous one (reconciliation), and applies only the minimal set of real DOM changes (commit phase). This batching makes React updates efficient.

Question 7

What is debounce and throttle in JavaScript?

Accepted Answer

Debounce delays execution until after a specified time has passed since the last invocation — ideal for search inputs. Throttle limits execution to once per specified interval regardless of how many times it's called — ideal for scroll/resize handlers.

Question 8

What is the difference between WebSocket and Server-Sent Events (SSE)?

Accepted Answer

WebSockets provide full-duplex (bidirectional) communication over a persistent TCP connection — suitable for chat, gaming, collaborative editing. SSE is a one-way server-to-client push over HTTP — suitable for live feeds, notifications, and dashboards. SSE is simpler to implement and auto-reconnects; WebSockets have lower latency for two-way data.

Question 9

What is the frontend interview roadmap for 2025?

Accepted Answer

The frontend interview roadmap for 2025 covers: (1) JavaScript fundamentals — closures, event loop, prototypes, async/await, polyfills; (2) React — hooks, virtual DOM, reconciliation, performance optimisation; (3) HTML & CSS — flexbox, grid, specificity, accessibility; (4) Frontend System Design — HLD/LLD, performance, caching, WebSockets; (5) Machine coding — build real UI components like autocomplete, infinite scroll, nested comments. UI Sheet provides a structured sheet covering all these topics with progress tracking.

Question 10

How should I prepare for a UI developer interview?

Accepted Answer

To prepare for a UI developer interview: (1) Master JavaScript concepts — event loop, closures, promises, this binding; (2) Practice React hooks, component lifecycle, and state management; (3) Revise CSS layout systems — flexbox and Grid; (4) Study frontend system design — build scalable UIs; (5) Solve machine coding problems — implement real components from scratch; (6) Practice JS output questions to sharpen your understanding of coercion and async. UI Sheet is a free structured platform with 100+ curated questions across all these areas.

Question 11

What topics are covered in frontend system design interviews?

Accepted Answer

Frontend system design interviews cover: component architecture, performance optimisation (lazy loading, code splitting, virtual lists), communication protocols (WebSockets, SSE, HTTP/2), caching strategies (HTTP cache, service workers), accessibility (ARIA, keyboard navigation), core web vitals, and designing real systems like Google Docs, YouTube, Twitter Feed, Netflix, and Chat applications.

Question 12

What are the most important JavaScript polyfills to know for interviews?

Accepted Answer

The most important JavaScript polyfills for interviews are: Array.prototype.map, filter, reduce, flat, flatMap; Function.prototype.bind, call, apply; Promise.all, Promise.race, Promise.allSettled; debounce and throttle; deep clone; EventEmitter; LRU Cache; and React hook polyfills like useState and useEffect. These are commonly asked at Google, Meta, Amazon, and Flipkart frontend interviews.

Master Frontend Interviews

Must Revise Questions

Browse by Topic

HTML & CSS

JavaScript Theory

JS Output Questions

JS Coding & Polyfills

JS Machine Coding

React Theory

React Machine Coding

Frontend System Design