Official CTO blogs

Appearance

Frontend JavaScript Interview Questions ​

This article compiles the most important frontend JavaScript interview questions, organized by topic and difficulty. It is designed for roles focusing on modern UI engineering, browser behavior, rendering performance, and JavaScript fundamentals.

1. Core JavaScript Fundamentals ​

Frontend roles require strong understanding of JS internals.

Key Topics ​

  • Variables: let, const, var
  • Hoisting
  • Closures
  • The this keyword
  • Prototypal inheritance
  • Modules (ESM vs CommonJS)
  • Event loop basics (browser perspective)

Sample Questions ​

  1. What is hoisting? How does it apply to var, let, and const?
  2. What are closures? Give 3 real-world frontend use cases.
  3. What does this refer to inside an arrow function?
  4. Explain the difference between shallow copy and deep copy in JS.
  5. What is the prototype chain? How does JS lookup properties?

2. DOM & Browser APIs ​

Sample Questions ​

  1. What is event bubbling vs capturing? How do you stop propagation?
  2. What is the difference between DOMContentLoaded and load?
  3. What is the difference between innerHTML, textContent, and innerText?
  4. Why is direct DOM manipulation expensive?
  5. Explain how querySelector works.

3. Event Loop (Frontend Focus) ​

Frontend interviews often include tricky logs involving microtasks and macrotasks.

Sample Questions ​

  1. What are microtasks and macrotasks in the browser?
  2. Explain the output:
js
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
  1. What is queueMicrotask and when would you use it?
  2. Explain how browser rendering fits into the event loop.
  3. Why does long synchronous code freeze the UI?

4. CSS + Rendering + Performance ​

Even JS-heavy roles expect strong UI performance knowledge.

Sample Questions ​

  1. What triggers reflow vs repaint?
  2. Why is getBoundingClientRect() sometimes expensive?
  3. What is layout thrashing?
  4. How do you optimize animations in the browser?
  5. What is the difference between GPU and CPU rendering?
  6. Explain lazy loading. How does it work internally?

5. Async Programming ​

Sample Questions ​

  1. Explain callbacks vs promises vs async/await.
  2. Why is try/catch tricky inside async code?
  3. What is the difference between parallel and sequential promise execution?
  4. What is a race condition in JS and how do you avoid it?
  5. Explain Promise.all vs Promise.race vs Promise.allSettled.

6. Web Storage & APIs ​

Sample Questions ​

  1. Difference between localStorage, sessionStorage, and cookies.
  2. What are Web Workers? Why do we need them?
  3. Explain CORS in the context of frontend applications.
  4. How does the Fetch API differ from XHR?
  5. What is prefetching and prerendering?

7. Security for Frontend ​

Sample Questions ​

  1. What is XSS? How do you prevent it?
  2. What is CSRF? When does it affect frontend apps?
  3. Why is innerHTML dangerous?
  4. What is sandboxing?
  5. Explain Content Security Policy (CSP).

8. Framework-Specific Questions (React/Vue/Angular) ​

React ​

  1. How do Hooks work internally?
  2. What causes re-renders in React?
  3. What is reconciliation?
  4. Explain useEffect vs useLayoutEffect.
  5. What is memoization in React (useMemo, useCallback)?

Vue ​

  1. How does Vue's reactivity system track changes?
  2. What is a computed property?
  3. Difference between watchers and watchers with deep mode.

Angular ​

  1. What is change detection? How does it work?
  2. What is RxJS and why is it central in Angular?
  3. What are Angular zones?

9. Frontend Architecture & Patterns ​

Sample Questions ​

  1. What is a virtual DOM and why does it exist?
  2. What is hydration (SSR → CSR)?
  3. What are Web Components?
  4. Explain MVC vs MVVM vs Flux.
  5. What is tree shaking?
  6. What is code splitting and why is it important?

10. Debugging & Tooling ​

Sample Questions ​

  1. How do you debug memory leaks in the browser?
  2. What is a source map?
  3. How does the browser optimize JavaScript execution (JIT)?
  4. How does Chrome DevTools represent call stacks for async functions?
  5. What are breakpoints vs conditional breakpoints vs logpoints?

11. Coding Problems (Frontend-Oriented) ​

  • Implement debounce().
  • Implement throttle().
  • Create a mini event emitter.
  • Implement a virtualized list.
  • Build a mini router using hash/history API.
  • Write a function to flatten nested arrays.
  • Implement lazy loading for images.

12. Take-home Assignments ​

  • Build a simple React/Vue/Angular TODO app with persistence.
  • Build a lightweight UI library with reactive updates.
  • Implement infinite scroll with debouncing.
  • Build a web worker–based image processor.

Maintained by OfficialCTO — © 2025 Official CTO.