29 Frontend Developer Interview Questions

Frontend interviews can test code, browser knowledge, product judgment, problem solving, and communication. The mix varies by company and seniority, so use the role description and recruiter guidance as the source of truth.

This guide provides 29 answered questions across JavaScript, TypeScript, React, Angular, Vue, CSS, accessibility, and interview behavior. Use it as a diagnostic map, then go deeper only where the target role requires it.

Table of Contents

1. Interview Structure Questions
2. JavaScript Fundamentals Questions
3. TypeScript Questions
4. React Questions
5. Angular Questions
6. Vue.js Questions
7. CSS Questions
8. Behavioral Questions
9. Practice Questions
10. Quick Reference
11. Related Articles
12. Frequently Asked Questions
13. Official Sources

Interview Structure Questions

These questions help you understand how frontend interviews are structured and what interviewers evaluate.

What do frontend interviews actually test?

Frontend interviews are selection processes designed around a specific role. A useful answer separates evidence about technical competence from problem-solving and collaboration signals instead of guessing the interviewer's personality preferences.

Interviewers evaluate four key areas:

Technical competence - Can you write, test, debug, and explain code at the level the role requires?

Problem-solving approach - How do you break down problems? Do you ask clarifying questions? Can you adapt when your first approach doesn't work?

Communication skills - Can you explain your thinking? Do you listen to hints? Would you be effective in code reviews and team discussions?

Collaboration evidence - Can you handle feedback, surface trade-offs, and work productively with people who have different perspectives?

The weighting is company-specific. Ask how each stage is assessed and demonstrate observable behavior rather than trying to perform an undefined idea of "culture fit."

What happens during the phone screen?

A first screen may be with a recruiter or hiring manager and may cover role scope, experience, logistics, compensation, and motivation. Confirm the participants, duration, format, and whether any technical exercise is included; there is no universal template.

What is tested in the technical phone screen?

A technical screen may use discussion, debugging, pair programming, a collaborative editor, or a small design exercise. Prepare to clarify requirements and explain tests and trade-offs rather than assuming it will be an algorithm round. JavaScript closure questions are one useful fundamentals exercise.

What should you expect from a take-home assignment?

A take-home assignment may ask for a component or small application. Before starting, clarify the expected time box, permitted tools, review criteria, accessibility requirements, and whether you will discuss the solution later. State assumptions and prioritize a working, tested core over unrequested scope.

How does the on-site interview loop work?

An on-site or virtual loop can combine coding, debugging, frontend design, project discussion, and behavioral interviews. Request the schedule and format in advance, and treat each stage as a fresh assessment rather than relying on a fixed duration or a universal "bar raiser" model.

What is the team fit interview?

The team fit interview is sometimes separate, sometimes part of the loop. You'll meet potential teammates. Be genuine and ask thoughtful questions about their work.

JavaScript Fundamentals Questions

Every frontend interview starts with JavaScript. Even if the role is "React Developer" or "Angular Engineer," you'll face fundamental JavaScript questions because frameworks come and go, but JavaScript remains.

What are closures and how does scope work?

If there's one JavaScript concept you must master, it's closures. They appear in almost every interview, and they're foundational to how modern JavaScript works—including React Hooks.

A closure is a function together with access to the lexical environment in which it was created. The captured binding can remain reachable after the surrounding function returns; closures capture bindings, not frozen copies of values.

function createCounter() {
  let count = 0;
  return function() {
    count += 1;
    return count;
  };
}
 
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

The inner function "closes over" the count variable. Even though createCounter has finished executing, the returned function still has access to count.

Interviewers love closure questions because they reveal deep understanding. Can you explain why this matters? Can you identify bugs caused by closure issues? Can you use closures intentionally to solve problems?

Deep dive: JavaScript Closures Interview Guide - Everything you need to know about closures, with common interview questions and detailed explanations.

How does the JavaScript event loop work?

The event loop is a common way to test whether you can reason about ordering and responsiveness rather than merely recite API names.

For a browser answer, distinguish the JavaScript execution stack from the HTML event loop, its task queues, and the microtask queue. Hosts can run work outside the current JavaScript agent; the event loop chooses a runnable task, runs it, and performs microtask checkpoints at defined points.

console.log('1');
 
setTimeout(() => console.log('2'), 0);
 
Promise.resolve().then(() => console.log('3'));
 
console.log('4');
 
// Output: 1, 4, 3, 2

Here, the promise reaction is a microtask and runs before the timer task after the current script completes. "Macrotask" is common teaching shorthand, but the HTML specification uses tasks and task queues. Also discuss starvation, rendering opportunities, cancellation, and error propagation.

Deep dive: JavaScript Event Loop Interview Guide - Comprehensive coverage of async JavaScript, including visual explanations and tricky interview scenarios.

What are the most common JavaScript gotcha questions?

Every interviewer has their favorite "gotcha" questions. These aren't meant to trick you—they test whether you understand JavaScript's quirks and edge cases.

console.log(typeof null);           // "object" by the ECMAScript specification
console.log(0.1 + 0.2 === 0.3);     // false - floating point
console.log([] == ![]);             // true - type coercion madness

You don't need to memorize every quirk, but you should understand type coercion, the difference between == and ===, and how this binding works in different contexts.

Deep dive: JavaScript Tricky Questions Interview Guide - The most common gotcha questions with clear explanations of why JavaScript behaves the way it does.

TypeScript Questions

TypeScript appears in many frontend roles, but the job description should determine how deeply you prepare. Strong answers understand both the type system and its boundary: TypeScript erases types and does not validate network, storage, or user input at runtime.

When do you use type vs interface?

One of the most common TypeScript interview questions: "When do you use type vs interface?"

Both can name object shapes and participate in extension or intersection. A useful distinction is that an interface can be reopened through declaration merging, while a type alias cannot; aliases can also directly name unions, tuples, primitives, and mapped or conditional types. Prefer a consistent local convention unless a feature requires one form.

// Interface can be extended and declaration-merged
interface User {
  id: number;
  name: string;
}
 
interface Admin extends User {
  permissions: string[];
}
 
// A type alias can directly name a union or other type expression
type Status = 'pending' | 'active' | 'disabled';
type ApiResponse<T> = { data: T; error: null } | { data: null; error: string };

What interviewers really want to know: do you understand both options well enough to make informed decisions? Can you explain your choice?

Deep dive: TypeScript Type vs Interface Interview Guide - When to use each, with real-world examples and common interview scenarios.

How do generics work in TypeScript?

If you want to stand out in TypeScript interviews, master generics. Most candidates have surface-level knowledge; few can write complex generic types from scratch.

// Basic generic
function identity<T>(arg: T): T {
  return arg;
}
 
// More advanced: constrained generic with keyof
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
 
// Boundary-safe wrapper: parsing produces unknown, then a validator narrows it
async function fetchData<T>(
  url: string,
  parse: (value: unknown) => T,
): Promise<T> {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const value: unknown = await response.json();
  return parse(value);
}

Generics express relationships between types. They do not make unvalidated runtime data safe, so an interview answer should identify the trust boundary rather than casting response.json() to T.

Deep dive: TypeScript Generics Interview Guide - From basic concepts to advanced patterns like conditional types and mapped types.

What are common TypeScript gotchas and how does type narrowing work?

TypeScript has its own set of tricky questions, usually involving type narrowing, structural typing, or the any vs unknown distinction.

// Why doesn't this work?
function processValue(value: string | number) {
  return value.toUpperCase(); // Error!
}
 
// You need type narrowing
function processValue(value: string | number) {
  if (typeof value === 'string') {
    return value.toUpperCase(); // Now TypeScript knows it's a string
  }
  return value.toFixed(2);
}

Deep dive: TypeScript Tricky Questions Interview Guide - The questions that separate TypeScript beginners from professionals.

React Questions

For React roles, interviewers may probe the rendering model, state ownership, Effects, accessibility, data loading, testing, and framework boundaries. Prepare for the stack named in the job rather than relying on a popularity ranking.

What are the most common React Hooks questions?

If you're interviewing for a React position, you'll face hooks questions. The basics (useState, useEffect) are expected knowledge. What sets candidates apart is understanding when to use each hook and common pitfalls.

useEffect(() => {
  const controller = new AbortController();
 
  async function loadUser() {
    const user = await fetchUser(userId, { signal: controller.signal });
    setUser(user);
  }
 
  loadUser().catch(error => {
    if (error.name !== 'AbortError') reportError(error);
  });
 
  return () => controller.abort();
}, [userId]);

Interviewers often ask about the rules of hooks, custom hooks, and performance optimization with useMemo and useCallback. But here's what they're really testing: do you understand why these hooks exist? Can you identify when they're unnecessary?

Deep dive: React Hooks Interview Guide - Comprehensive coverage of all hooks with practical examples and common interview questions.

What advanced React patterns are tested in senior interviews?

Senior React interviews go beyond pattern names. Be ready to explain state ownership, server-state caching, URL state, rendering boundaries, error and loading states, accessibility, security, observability, and how the chosen framework affects routing and data loading.

// Compound components pattern
<Select value={selected} onChange={setSelected}>
  <Select.Option value="a">Option A</Select.Option>
  <Select.Option value="b">Option B</Select.Option>
</Select>
 
// The public API should also define focus, keyboard, and labeling behavior.

A compound component can provide a useful API, but the pattern name is not the architecture. Explain ownership, invariants, rendering cost, accessibility behavior, and what happens during partial failure.

Deep dive: React Advanced Interview Guide - Patterns, performance optimization, and architecture questions for senior roles.

What React 19 and React 19.2 features should you know?

The current React documentation is for React 19.2. Separate features introduced in React 19 from later 19.2 additions and from React Compiler, which reached its own stable 1.0 release.

Key areas to know:

• React 19: Actions and form APIs, use, useOptimistic, ref as a prop, document metadata and asset handling, and root error callbacks
• React 19.2: <Activity>, useEffectEvent, cacheSignal, performance tracks, and server-rendering improvements
• React Compiler 1.0: a separate build-time optimizing compiler with automatic memoization; it also supports older React versions with the documented runtime configuration

Do not list the compiler as though it were introduced by React 19 itself, and check patch-level security advisories before choosing a production version.

Deep dive: React 19 Interview Guide - Everything new in React 19 and how to discuss it in interviews.

What Redux and state management questions are commonly asked?

Not every React app needs a client state library. First classify local UI state, shared client state, server cache, form state, and URL state. If Redux is warranted, Redux Toolkit is the standard way to write Redux logic and RTK Query can cover data fetching and caching.

import { createSlice } from '@reduxjs/toolkit';
 
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment(state) {
      state.value += 1;
    },
  },
});

Deep dive: Redux Interview Guide - From basic concepts to advanced patterns like middleware and Redux Toolkit.

Angular Questions

For Angular roles, prepare for the version and architecture used by the target team. As of September 2026, Angular 22 is in active support and Angular 21 is in LTS; older codebases may legitimately use earlier patterns, but answers should distinguish legacy compatibility from current defaults.

How does Angular change detection work?

Angular's change detection is a favorite interview topic because it reveals whether you understand how Angular actually works under the hood.

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div>{{ user.name }}</div>`
})
export class UserComponent {
  @Input() user: User;
}

OnPush is the default strategy from Angular 22. It does not mean "only on input changes": bound inputs, events in the subtree, signals read by the template, AsyncPipe, markForCheck, and other notifications can schedule checking. Mutating an input object without changing its reference remains a common source of stale views. Profile before optimizing.

Deep dive: Angular Change Detection Interview Guide - How change detection works, optimization strategies, and common interview questions.

What RxJS questions are asked in Angular interviews?

RxJS remains important in many Angular applications, especially for streams, forms, routers, and HTTP composition. Signals cover a different reactive model, so know when interop is appropriate instead of claiming every Angular design requires RxJS.

// Common pattern: search with debounce
this.searchInput.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.searchService.search(term)),
  takeUntilDestroyed()
).subscribe(results => this.results.set(results));

Many candidates know basic operators but struggle with error handling, higher-order observables, and memory leak prevention. These are exactly the topics interviewers probe.

Deep dive: Angular RxJS Interview Guide - From fundamentals to advanced patterns, with real-world examples.

What modern Angular features should you know?

Modern Angular uses standalone components by default. Angular 22 is active, while Angular 21 is LTS; current interview topics include signals, zoneless change detection, OnPush, Signal Forms, Vitest, Angular Aria, SSR/hydration, and migrations with ng update. Verify feature stability against the version in the target codebase.

// Standalone and OnPush are defaults in newly generated Angular 22 code.
@Component({
  template: `<div>{{ count() }}</div>`
})
export class CounterComponent {
  count = signal(0); // Signals for fine-grained reactivity
 
  increment() {
    this.count.update(c => c + 1);
  }
}

Deep dive: Angular 21 Interview Guide - Angular 21 LTS, the Angular 22 transition, migration strategies, and modern interview topics.

What are common Angular interview mistakes to avoid?

Common mistakes include reciting obsolete defaults, confusing signals with Observables, mutating inputs while expecting OnPush notifications, ignoring subscription lifecycles, and recommending a migration without version, test, or rollback constraints.

Deep dive: Top 5 Angular Interview Mistakes - Preventable technical and communication mistakes, with safer alternatives.

What advanced Angular topics are tested in senior interviews?

Senior Angular positions probe deeper: change-detection notifications, dependency-injection scope, reactive interop, rendering cost, and migration trade-offs.

Deep dive: Angular Change Detection Interview Guide - Runtime behavior, OnPush, zoneless notifications, and performance diagnosis.

Vue.js Questions

For Vue roles, understand the Options API and Composition API, component communication, reactivity, routing, state management, testing, and accessibility. Do not infer the expected API style from company size; inspect the role and codebase.

What is the difference between Composition API and Options API?

Both APIs are supported in Vue 3 and share the same underlying system. Composition API can group logic by concern, improve reuse through composables, and work well with type inference; Options API can remain clear and effective. Choose based on team conventions and component complexity, not a universal "better" label.

// Options API
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
 
// Composition API
import { ref } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}

How does Vue reactivity work?

Vue's reactivity system is elegant but has nuances. Understanding how Vue tracks dependencies and triggers updates is essential for debugging and optimization.

import { ref, reactive, computed } from 'vue';
 
const count = ref(0);           // Primitive reactivity
const user = reactive({         // Object reactivity
  name: 'John',
  age: 30
});
const doubleCount = computed(() => count.value * 2);

Deep dive: Vue.js Interview Guide - Comprehensive coverage from fundamentals to advanced topics like Pinia state management and Vue Router.

CSS Questions

CSS is part of frontend correctness, accessibility, performance, and maintainability. Prepare to explain layout and cascade behavior from first principles, then show how you would verify the result across content, viewport, zoom, and user preferences.

When do you use Flexbox vs Grid?

Layout is fundamental. You should be able to build common layouts (header/sidebar/content, card grids, centered modals) using Flexbox and Grid without looking up documentation.

/* Flexbox: distribute and align items along a primary axis */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
/* Grid: define rows and columns for an explicit layout */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

Both systems can affect two dimensions. Flexbox is often convenient when content drives a row or column and alignment along a primary axis matters; Grid is often convenient when rows and columns must coordinate. Explain intrinsic sizing, overflow, source order, writing modes, responsive behavior, and why visual reordering must not break keyboard or reading order.

Deep dive: CSS Flexbox and Grid Interview Guide - Master both layout systems with visual examples and common interview scenarios.

What accessibility questions are asked in frontend interviews?

Accessibility is a product-quality requirement and may also be governed by contracts or regional law. Interview answers should start with semantic HTML, then cover keyboard operation, focus, names and descriptions, contrast, zoom/reflow, motion preferences, and testing against the applicable WCAG target.

<!-- Bad: div soup -->
<div class="button" onclick="submit()">Submit</div>
 
<!-- Good: semantic HTML -->
<button type="submit">Submit</button>
 
<!-- A polite status message; role="alert" would be assertive -->
<p role="status">
  Form submitted successfully
</p>

Prefer native elements because they provide semantics and interaction behavior. ARIA can fill a genuine semantic gap, but it does not add keyboard behavior automatically, and incorrect ARIA can make an interface less accessible.

Deep dive: HTML5 Accessibility Interview Guide - Semantic HTML, ARIA, screen readers, and building inclusive applications.

Behavioral Questions

Behavioral stages ask for evidence about how you work. Prepare concise examples with context, your actions, trade-offs, results, and what you learned; avoid claiming that one communication style guarantees success.

What do successful candidates do differently?

Make important reasoning observable: "I'm considering two approaches here... The first would be... but I prefer the second because..." Pause often enough for collaboration rather than narrating every keystroke.

Ask clarifying questions that change the solution: "Should this handle edge case X?" "What's the expected behavior when Y happens?" "Can I assume Z?" Then record the agreed assumptions.

How should you handle questions you don't know?

"I haven't used that library, but based on similar tools I've used, I'd expect it works like..." is a far better answer than confidently making things up. Admitting what you don't know while showing how you'd approach learning it demonstrates maturity.

How should you respond to interviewer hints?

When an interviewer gives you a hint, take it. Don't defend your original approach out of pride. Adaptability matters more than being right the first time.

What questions should you ask the interviewer?

Ask questions that help you evaluate the role: current technical constraints, how decisions are made, accessibility and quality expectations, ownership boundaries, incident learning, and what success looks like after several months.

Practice Questions

Test yourself on these fundamental questions. If you can't answer them confidently, review the relevant deep-dive articles.

JavaScript:

1. Explain closures and give an example of their practical use
2. What's the difference between the call stack and the task queue?
3. How does this binding work in arrow functions vs regular functions?

TypeScript: 4. When would you use unknown instead of any? 5. Write a generic function that works with any array type 6. Explain the difference between type and interface

React: 7. What are the rules of hooks? 8. When would you use useCallback vs useMemo? 9. How do you prevent unnecessary re-renders?

Angular: 10. Explain OnPush change detection strategy 11. What's the difference between Subject and BehaviorSubject? 12. How do you prevent memory leaks with RxJS subscriptions?

CSS: 13. When would you use Flexbox vs Grid? 14. Explain CSS specificity with examples 15. How do you create a responsive layout without media queries?

Quick Reference

Related Articles

• JavaScript Closures Interview Guide - Deep dive into closures and scope
• JavaScript Event Loop Interview Guide - Async JavaScript explained
• TypeScript Generics Interview Guide - From basics to advanced patterns
• React Hooks Interview Guide - All hooks with practical examples
• Angular Change Detection Interview Guide - How Angular updates the view
• CSS Flexbox and Grid Interview Guide - Master both layout systems

Frequently Asked Questions

What topics are covered in a frontend developer interview?

The scope depends on the role, but common areas are JavaScript and TypeScript, semantic HTML, CSS, browser APIs, accessibility, performance, testing, security, a relevant framework, and frontend system design.

How long should I prepare for a frontend developer interview?

There is no reliable universal duration. Start with the job description and a timed diagnostic interview, then build a gap-based plan that includes fundamentals, role-specific practice, project evidence, and mock interviews.

What JavaScript concepts are most important for frontend interviews?

Prioritize lexical scope and closures, the event loop, promises and cancellation, modules, prototypes, coercion, DOM and browser APIs, error handling, and the ability to reason about unfamiliar code.

Should I learn React or Angular for frontend interviews?

Learn the framework named in the target role and understand its rendering, state, data-flow, accessibility, testing, and performance model. Depth in the relevant stack matters more than unsupported claims about which framework dominates a market.

How important is TypeScript for frontend developer roles?

TypeScript is common in frontend roles but is not universal. For TypeScript jobs, know inference, narrowing, generics, utility types, strictness, and why compile-time types do not validate API or user input at runtime.

What CSS topics should I prepare for frontend interviews?

Study the cascade, layers and specificity, the box and formatting models, Flexbox, Grid, positioning, responsive and container queries, custom properties, reduced-motion preferences, and accessible visual states.

Official Sources

• ECMAScript language specification
• HTML event loops
• TypeScript Handbook
• React documentation
• React 19.2 release
• React Compiler 1.0 release
• Redux Toolkit documentation
• Angular release status
• Angular change-detection guidance
• Vue Composition API FAQ
• MDN CSS reference
• Web Content Accessibility Guidelines (WCAG) 2.2
• WAI-ARIA Authoring Practices Guide