In this article
JavaScript
What is a closure in JavaScript?
A closure is a function bundled together with references to its surrounding state, called its lexical environment, which lets the function reach variables of its outer scope. Mozilla Developer Network (MDN) says closures are created every time a function is created, at function creation time (MDN, November 2025). A common use is a function that keeps a private counter, a basic that coding interviews often probe.
Why it is asked: it tests whether you understand scope, not just syntax. For more depth, read the full JavaScript interview questions.
Why do handlers created in a loop with var all show the last value?
With var, every closure shares one function-scoped binding, so by the time a handler runs the loop has finished and the variable holds its last value. In MDN's help-text example, whichever field gets focus, the help text shows the last message. Declaring the variable with let or const inside the loop gives each iteration its own binding (MDN, November 2025).
Why it is asked: it is the classic closure trap, and the fix shows block scope.
How does the JavaScript event loop work?
The event loop is the mechanism that runs one job at a time from a queue, finishing each job before starting the next. MDN states that each job is processed completely before any other, and that the microtask queue is drained before the task queue is pulled (MDN, April 2026). A setTimeout callback goes on the task queue, while promise callbacks use the microtask queue (MDN microtask guide, October 2025).
Why it is asked: it explains why a long loop freezes a page.
In what order do a promise callback and a setTimeout callback run?
When both are queued from the same synchronous code, such as Promise.resolve().then(...) and setTimeout(..., 0), the promise callback runs first. A microtask is a short job, such as a promise callback, that runs before the next task, and a setTimeout callback is a task (MDN microtask guide, October 2025). So the sync console.log calls come first, then the promise callback, then the timer. A promise that settles later, for example after a fetch, queues its callback only when it settles.
Text description of the diagram
- Each job is processed completely before any other job.
- The microtask queue is drained before the task queue is pulled.
Why it is asked: it checks you can predict output, a favourite whiteboard question.
What is the difference between var, let and const?
var is function-scoped; let and const are block-scoped, so a variable declared inside braces does not leak out. const forbids reassigning the binding. Before its line runs, var reads as undefined, while let and const throw an error, because they can only be accessed after the declaration is reached (MDN let, September 2026). MDN's closure page uses exactly this difference to fix the loop problem (MDN, November 2025). Prefer const by default and let when you must reassign.
Why it is asked: it is the baseline check on modern JavaScript.
CSS and layout
How does CSS specificity decide which rule wins?
CSS specificity is the weight the browser uses to choose between competing declarations. It is written as three columns, ID, class and type, compared left to right, so one ID beats any number of classes. Classes, attributes and pseudo-classes score in the middle column; element types and pseudo-elements in the last. Origin and importance are compared first, and source order breaks ties (MDN, September 2026).
Why it is asked: it separates people who debug styles from people who add !important.
What are cascade layers and why use them?
A cascade layer is a named group of rules, declared with @layer, whose order is compared before specificity. MDN says specificity is not compared across layers, and that layers are the recommended way to override third-party CSS without raising specificity (MDN, September 2026). Put library styles in an early layer and your own after it.
Why it is asked: it shows you know current CSS, not only the 2015 version.
When do you use flexbox and when grid?
Use flexbox to lay items out along one axis, a row or a column, and let their sizes adapt; use grid when you control rows and columns together. A navigation bar fits flexbox; a page layout with a sidebar, header and content area fits grid. They combine well: a grid area can itself be a flex container.
Why it is asked: it tests layout judgement rather than memorised properties.
Knowing it is half the job. Saying it is the other half.
Interview Clozo is an AI interview copilot for real interview rounds: it hears the question and puts a strong answer on your screen, and you say it in your own words. See the features or how it works.
Start Free Trial →Browser performance
What are Core Web Vitals and what are the targets?
Core Web Vitals are three field metrics for page experience: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness and Cumulative Layout Shift (CLS) for visual stability. The "good" targets are 2.5 seconds or less, 200 milliseconds or less, and 0.1 or less, judged at the 75th percentile of page loads (web.dev, last updated October 2024).
Why it is asked: it shows you measure performance with the standard metrics.
How would you improve a slow Largest Contentful Paint?
Find what the largest element is, then shorten the path to it: serve it early in the HTML, compress and size the image, and avoid blocking it behind scripts or styles. Measure before and after in field data, because a lab result can differ from real users. Google's target for LCP is 2.5 seconds or less at the 75th percentile (web.dev, October 2024).
Why it is asked: it tests a measure-then-fix habit.
How does HTTP caching work, and how do you cache static files safely?
The Hypertext Transfer Protocol (HTTP) cache reuses a stored response while it is fresh, and Cache-Control: max-age sets how long that is. For files whose URL changes when the content changes, such as a hashed bundle, MDN recommends public, max-age=31536000, immutable; HTML documents usually use no-cache with a validator, so the browser revalidates and may get a 304 Not Modified (MDN, August 2026).
Why it is asked: a wrong cache header breaks releases, so it is a seniority check.
Accessibility
What is semantic HTML and why does it matter?
Semantic HTML is markup that uses elements for what they mean, such as button, nav and main, so browsers and screen readers get roles and keyboard behaviour for free. MDN's rule is to use native HTML where possible and Accessible Rich Internet Applications (ARIA) attributes only where no HTML equivalent exists (MDN ARIA basics, October 2026). It also helps search engines and maintainers.
Why it is asked: it shows accessibility is part of how you build, not an add-on.
When should you use ARIA?
Use ARIA only when native HTML cannot express the behaviour, such as a custom tab widget. MDN's example prefers <button> over <div role="button">, because the div still needs keyboard and click handling written by hand (MDN, October 2026). Test with real assistive technology.
Why it is asked: misused ARIA is a common source of broken pages.
What is WCAG and what changed in version 2.2?
The Web Content Accessibility Guidelines (WCAG) are the World Wide Web Consortium (W3C) standard for accessible web content, built on four principles: perceivable, operable, understandable and resilient to different browsers and assistive tools, with three conformance levels from lowest to highest: Level A, Level Double-A (AA) and Level Triple-A (AAA). Version 2.2 added criteria such as Focus Not Obscured (Minimum), Dragging Movements and Target Size (Minimum), and removed 4.1.1 Parsing (W3C, WCAG 2.2).
Why it is asked: legal and procurement requirements often cite a level of WCAG.
Security and networking
What is CORS and when does a preflight request happen?
Cross-Origin Resource Sharing (CORS) is an HTTP-header mechanism that lets a server say which other origins may read its responses in a browser. By default fetch follows the same-origin policy. The browser first sends an OPTIONS preflight when the request is not a simple one: a method other than GET, HEAD or POST, a header outside the CORS-safelisted set (such as Authorization or a custom header), or a Content-Type other than form data or plain text, for example application/json (MDN CORS guide, September 2026).
Why it is asked: nearly every frontend developer has met a CORS error.
How do you prevent cross-site scripting in a frontend?
Cross-site scripting (XSS) is an attack in which untrusted input runs as script in another user's page. MDN recommends two defences: output encoding and sanitisation, so that input cannot become executable, and a Content Security Policy as a backup that limits which scripts the browser may run. Avoid inserting untrusted input with innerHTML, the sink in MDN's own vulnerable example (MDN XSS guide, read October 2026).
Why it is asked: it tests whether you treat every input-to-HTML path as untrusted.
What is event delegation?
Event delegation is putting one event listener on a parent element and letting events from its many children bubble up to it, instead of attaching a listener to each child. MDN describes it as a practice for code that should run when the user interacts with any of a large number of children, and event.target identifies which child was hit (MDN event bubbling guide, October 2026).
Why it is asked: it checks you understand bubbling and efficient listeners.
Frameworks and design
When should you not use an Effect in React?
An Effect is code that synchronises a component with an external system, declared with the useEffect Hook. The React documentation says that when no external system is involved, such as updating state because props changed, you should not need an Effect; derive the value while rendering and handle user events in event handlers instead (React documentation, read October 2026).
Why it is asked: it tests whether you avoid unnecessary Effects, which the docs say make code harder to follow and slower. More cases are in React interview questions for experienced developers.
How would you structure state in a medium-sized frontend app?
Keep state as close as possible to where it is used, lift it up only when siblings must share it, and derive values instead of storing copies. Treat data from the server separately from interface state, since it has its own loading, error and staleness rules. Reach for a shared store only when passing props becomes the real pain.
Why it is asked: it reveals how you think about complexity, which senior rounds probe further in system design.
How do you answer "design a frontend feature" questions?
Clarify the users and the data first, sketch the components and where state lives, then cover loading and error states, accessibility, performance and testing. Say what you would measure. The shape matches system design answers: requirements, a simple design, then trade-offs.
Why it is asked: it tests structured thinking beyond syntax.
Follow-up questions
What are the most common frontend developer interview questions?
JavaScript fundamentals (closures, the event loop, scope), CSS layout and specificity, browser performance, accessibility and a framework question come up often. A coding round and a system-design round can follow, as described in interview loops.
How do I prepare for a frontend developer interview?
Build one small interface from scratch, then explain each decision aloud: markup, state, styles, accessibility and performance. Prepare your introduction (tell me about yourself) and a few questions for the team (questions to ask the interviewer); the behavioural interview guide covers the people side.
What coding exercise should I expect in a frontend interview?
Many frontend interview loops include a coding exercise on data structures and algorithms: arrays, strings, hash maps and sometimes trees such as the Document Object Model (DOM) of a page, in the browser or a shared editor; the coding interviews guide covers the general format. Ask the recruiter which rounds to expect, and keep pay questions for later (salary negotiation).
- Know the event loop and closures well enough to predict output.
- Explain CSS with specificity, layers and layout in plain terms.
- Quote Core Web Vitals targets and say how you would measure them.
- Use native HTML first; add ARIA only where HTML cannot do the job.
- Treat every input-to-HTML path as untrusted, and encode or sanitise it.
Sources
- Closures — MDN Web Docs, 4 Nov 2025
- JavaScript execution model — MDN Web Docs, 6 Apr 2026
- Using microtasks in JavaScript with queueMicrotask() — MDN Web Docs, 5 Oct 2025
- CSS specificity — MDN Web Docs, 22 Sep 2026
- Event bubbling — MDN Web Docs, 6 Oct 2026
- Cross-Origin Resource Sharing (CORS) — MDN Web Docs, 4 Sep 2026
- HTTP caching — MDN Web Docs, 14 Aug 2026
- WAI-ARIA basics — MDN Web Docs, 7 Oct 2026
- Web Vitals — Google web.dev, 31 Oct 2024
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C, 12 Dec 2024
- Cross-site scripting (XSS) — MDN Web Docs (date = read date), 26 Oct 2026
- let — MDN Web Docs, 4 Sep 2026
- You Might Not Need an Effect — React documentation (date = read date), 24 Oct 2026
