50+ Frontend Developer Interview Questions 2025: JavaScript, React, Angular & TypeScript

Frontend interviews test more than just code—they evaluate problem-solving approach, communication skills, and whether you'd be a good colleague. Talented developers fail because they prepared for the wrong things, while average developers succeed because they understood what interviewers actually look for.

This guide covers everything from JavaScript fundamentals to framework-specific patterns, giving you a complete roadmap for understanding how frontend interviews work and how to demonstrate that you're the developer they need.

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

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 aren't designed to find the "best" developer. They're designed to find someone who can do the job, communicate effectively, and won't be a nightmare to work with. Technical skills matter, but they're just part of the equation.

Interviewers evaluate four key areas:

Technical competence - Can you write working code? Do you understand the fundamentals? This is table stakes.

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?

Cultural fit - Are you someone the team wants to work with? Do you handle feedback well? Are you curious and willing to learn?

The technical portion tests hard skills. Everything else tests whether you'd be a good colleague. Both matter equally.

What happens during the phone screen?

The phone screen (30-45 minutes) is usually with a recruiter or hiring manager. They're checking basic qualifications, salary expectations, and whether you can hold a conversation. Don't underestimate this—candidates get eliminated here for being arrogant or dismissive.

What is tested in the technical phone screen?

The technical phone screen (45-60 minutes) involves a developer asking you coding questions, usually shared via a collaborative editor. Expect JavaScript fundamentals, maybe a simple algorithm, and questions about your experience. This is where JavaScript closure questions frequently appear.

What should you expect from a take-home assignment?

Not all companies do take-home assignments (2-4 hours), but it's increasingly common. You'll build a small application or component. They're evaluating code quality, attention to detail, and whether you follow instructions. Don't over-engineer it, but don't submit sloppy code either.

How does the on-site interview loop work?

The on-site/virtual loop (3-5 hours) includes multiple interviews covering different areas: coding, system design, behavioral questions, and often a "bar raiser" or culture interview. This is the marathon—pace yourself.

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 simply a function that remembers the variables from its outer scope, even after that outer scope has finished executing. That one sentence takes most developers months to truly internalize.

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?

"Explain the JavaScript event loop" is practically a guaranteed interview question. Most candidates give a mediocre answer because they've memorized an explanation without truly understanding it.

Here's what matters: JavaScript is single-threaded, but it handles asynchronous operations through an event loop that manages a call stack, task queues, and microtask queues. The order of execution isn't always intuitive.

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

If you can't explain why 3 prints before 2 (microtasks vs macrotasks), you'll struggle in interviews. The event loop affects everything from React's batched updates to how you handle API responses.

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" - historical bug
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

In 2025, TypeScript isn't a nice-to-have—it's expected. Most production frontend codebases use TypeScript, and interviewers want to see that you can work with types effectively.

When do you use type vs interface?

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

The short answer: use interface for object shapes that might be extended, use type for unions, intersections, and complex type transformations. But the real answer is more nuanced.

// Interface - extendable, great for objects
interface User {
  id: number;
  name: string;
}
 
interface Admin extends User {
  permissions: string[];
}
 
// Type - more flexible, better for complex types
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];
}
 
// Real-world: typed API wrapper
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);
  return response.json();
}

Understanding generics shows you can write reusable, type-safe code—exactly what teams need for maintainable applications.

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

React remains the most popular frontend framework, and React interviews have their own patterns. Companies want developers who understand React's mental model, not just its API.

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.

// Common mistake: missing dependency
useEffect(() => {
  fetchUser(userId); // userId should be in dependency array
}, []); // This only runs once, even if userId changes
 
// Correct
useEffect(() => {
  fetchUser(userId);
}, [userId]); // Runs when userId changes

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 positions go beyond hooks into architecture questions. How do you handle complex state? When do you reach for Context vs external state management? How do you structure large applications?

// 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>
 
// Render props pattern
<DataFetcher url="/api/users">
  {({ data, loading, error }) => (
    loading ? <Spinner /> : <UserList users={data} />
  )}
</DataFetcher>

Understanding these patterns shows architectural thinking—exactly what companies need for senior roles.

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

What React 19 features should you know for interviews?

Staying current matters. React 19 introduced significant changes, and interviewers may ask about them to gauge whether you keep up with the ecosystem.

Key React 19 features to know:

• React Compiler (automatic memoization)
• Actions and form handling
• use hook for promises and context
• Document metadata support
• Improved error handling

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 uses Redux, but state management questions are common. Even if the company uses something else (Zustand, Jotai, MobX), Redux knowledge demonstrates you understand the flux pattern and immutable state concepts.

// Understanding the Redux flow
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

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

Angular Questions

Angular dominates in enterprise environments—banks, insurance companies, large corporations. If you're targeting these employers, Angular knowledge is essential. Angular interviews tend to be more structured, often testing specific framework knowledge.

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, // Only check on input changes
  template: `<div>{{ user.name }}</div>`
})
export class UserComponent {
  @Input() user: User;
}

Understanding when and why Angular re-renders components is crucial for building performant applications. Interviewers want to see you can optimize real applications, not just recite documentation.

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?

Angular and RxJS are inseparable. If you're interviewing for Angular positions, you need solid RxJS knowledge—operators, subjects, subscription management, and common patterns.

// Common pattern: search with debounce
this.searchInput.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.searchService.search(term))
).subscribe(results => this.results = 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?

Angular has evolved significantly. Modern Angular emphasizes standalone components, signals for reactivity, and improved developer experience. Knowing these features shows you're current.

// Standalone component (no NgModule needed)
@Component({
  standalone: true,
  imports: [CommonModule],
  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 - New features, migration strategies, and what interviewers ask about modern Angular.

What are common Angular interview mistakes to avoid?

Candidates lose offers by making preventable mistakes—both in interviews and in take-home assignments. Knowing what not to do is as important as knowing what to do.

Deep dive: Top 5 Angular Interview Mistakes - The mistakes that cost candidates offers, and how to avoid them.

What advanced Angular topics are tested in senior interviews?

Senior Angular positions probe deeper: dependency injection internals, custom decorators, library development, and performance optimization.

Deep dive: Angular Advanced Interview Guide - Topics for senior and lead Angular developer interviews.

Vue.js Questions

Vue has carved out a strong niche, particularly in startups and mid-size companies. If you're targeting Vue positions, you need to understand both the Options API and the modern Composition API.

What is the difference between Composition API and Options API?

The Composition API (Vue 3) represents a fundamental shift in how Vue applications are structured. Interviewers want to see you understand both approaches and can articulate when each is appropriate.

// Options API - familiar, good for simple components
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
 
// Composition API - better for complex logic, reusability
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 questions often catch candidates off guard. They prepare extensively for JavaScript but forget that styling is half of frontend development. Modern CSS interviews go beyond basic selectors.

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: one-dimensional layout */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
/* Grid: two-dimensional layout */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

Interviewers often give you a mockup and ask you to describe your layout approach. Can you identify when Flexbox is appropriate vs Grid? Do you understand the main axis vs cross axis concepts?

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 isn't optional anymore—it's a legal requirement for many companies and a moral imperative for all. Expect questions about semantic HTML, ARIA attributes, and keyboard navigation.

<!-- Bad: div soup -->
<div class="button" onclick="submit()">Submit</div>
 
<!-- Good: semantic HTML -->
<button type="submit">Submit</button>
 
<!-- When you need ARIA -->
<div role="alert" aria-live="polite">
  Form submitted successfully
</div>

Understanding accessibility shows maturity as a developer. It's not about memorizing ARIA attributes—it's about building inclusive applications.

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

Behavioral Questions

After hundreds of interviews, patterns emerge. These soft skills separate successful candidates from those who only focus on technical knowledge.

What do successful candidates do differently?

The interviewer can't read your mind. Successful candidates narrate their thought process: "I'm considering two approaches here... The first would be... but I think the second is better because..."

They also ask clarifying questions—this isn't a weakness, it's a strength. "Should this handle edge case X?" "What's the expected behavior when Y happens?" "Can I assume Z?"

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?

The best candidates ask thoughtful questions about the codebase, the team's challenges, and the technical decisions the company has made. This curiosity signals someone who'll grow and contribute.

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