Part 1 Frontend foundations

1 The frontend interview

1.1 Jane’s interview

1.2 The interview process

1.3 The funneling approach to web development fundamentals

1.4 Walking through React fundamentals

1.5 AI-powered tools and trends in frontend interviews

1.6 Frontend interview tools

1.7 Summary

2 HTML and CSS essentials

2.1 The importance of semantic HTML

2.2 Separating content from presentation

2.3 Leveraging HTML APIs in React development

2.4 Working with HTML forms

2.5 Summary

3 JavaScript and TypeScript deep dive

3.1 JavaScript execution and scope

3.2 Functional programming and functionality

3.3 Asynchronous behavior in JavaScript

3.4 Memory management and code architecture

3.5 Jane’s JavaScript interview skill assessment

3.6 The rising significance of TypeScript

3.7 Type system—type annotations, type inference, and type safety

3.8 Functions, classes, and advanced types

3.9 Type safety and tools

3.10 Jane’s TypeScript interview skill assessment

3.11 TypeScript: Current trends and future outlook

3.12 Summary

4 React core principles and patterns

4.1 Declarative UI: The React way

4.2 Data flow and state management

4.3 Built-in hooks and custom hooks

4.4 React component lifecycle and patterns

4.5 Debugging and enhancing application performance

4.6 Summary

5 React libraries and toolchain

5.1 React routing and mega-frameworks

5.2 Scalable UI patterns: styling, rendering, and data access

5.3 Globalization: i18n, l10n, and white labeling

5.4 React toolchain

5.5 Summary

Part 2 Beyond the frontend

6 Foundations of distributed system design

6.1 Architectural paradigms

6.2 Distributed computing fundamentals

6.3 Load distribution and balancing

6.4 Caching strategies

6.5 Data replication, sharding, and partitioning

6.6 Communication, observability, and monitoring

6.7 Summary

7 Microservices architecture demystified

Appendixes

Appendix A: Quick reference

A.1 HTML APIs and related libraries

A.2 The TC39 process

A.3 JSX best practices

A.3.1 Understanding JSX Transpilation

A.3.2 Best Practices for JSX

A.4 Essential React Hooks and the use API

A.4.1 React Hook learning list

A.4.2 Custom Hooks: best practices

A.4.3 The use API

A.4.4 Comparison between the use API and Hooks

A.5 React’s component lifecycle

A.5.1 React class component lifecycle

A.5.2 React functional component lifecycle

A.6 Handling runtime errors

A.6.1 Error boundaries

A.6.2 Global error hooks

A.7 React resources for Angular and Vue developers

Overview

3 JavaScript and TypeScript deep dive

This chapter pivots from HTML/CSS to the twin pillars of modern front-end work: JavaScript and TypeScript. It frames interview readiness as a progression from fundamentals to applied skills to advanced judgment, emphasizing clear mental models, precise debugging, and the ability to reason about real code. Alongside high-level guidance, the material weaves in practical exercises and probing follow-ups to reinforce core concepts, reflecting the expectations placed on candidates for both frontend and full‑stack roles. The overarching message: strong JavaScript foundations plus growing TypeScript fluency are now baseline requirements for building scalable, maintainable applications—and for excelling in technical interviews.

On the JavaScript side, the chapter deepens mastery of execution and scope (hoisting, the temporal dead zone, closures, and this), type coercion and equality, and robust error handling. It connects closures to real-world patterns and pitfalls, including memory retention in long-lived callbacks, then shows how to prevent leaks with disciplined cleanup and design. Functional programming receives thorough treatment—pure functions, immutability, map/filter/reduce, currying, higher‑order functions, iterators/generators, and meta‑programming with symbols, Proxy, and Reflect—culminating in composable pipelines that can interoperate cleanly with class-based modules. Asynchronous behavior is demystified through the event loop, microtasks versus macrotasks, promises and async/await, and patterns like event delegation with their trade-offs. Finally, the chapter ties performance and maintainability to memory management and modular architecture, highlighting modern ES module practices, tree‑shaking, and code splitting, and illustrates applied skills with a timer UI that showcases closures, immutable state updates, and thoughtful cleanup.

The TypeScript sections explain why adoption has surged—compile‑time safety, powerful tooling, and self‑documenting code—and then dive into the type system: annotations and inference, structural typing, unions and intersections, literal and enum types, generics with constraints and keyof, utility types, and disciplined narrowing with never. It contrasts any and unknown to balance flexibility with safety, and shows how declaration files and ecosystem typings bridge JavaScript libraries into typed projects, reinforced by an exercise augmenting the global window object for a third‑party API and an alternative using community‑maintained types. Tooling and configuration guidance covers strictness, interop, and build workflows at scale, while the trends section spotlights emerging native TypeScript execution in runtimes and a proposal for erasable type syntax in JavaScript. The takeaway is clear: pairing deep JavaScript expertise with TypeScript‑driven design and an awareness of the evolving platform equips candidates to solve practical problems and communicate senior‑level trade‑offs in interviews.

Event delegation pattern illustrated

Code syntax for ES Modules, CommonJS, AMD, UMD, and IIFE

Timer user interface after starting a 21-second countdown

Weekly npm downloads of TypeScript as of June 1, 2025: 88.5 million

TypeScript type error when assigning an incorrect value type to setIsRunning.

Summary

Be prepared to explain how JavaScript manages execution contexts and scope (global, function, block), and how the scope chain controls variable access.
Demonstrate a solid grasp of functional programming concepts such as pure functions, immutability, and higher-order functions to write cleaner, more maintainable code.
Clearly articulate how the event loop, promises, and async/await enable non-blocking, event-driven programming in JavaScript.
Show understanding of garbage collection, memory leak prevention, and best practices for organizing modular code.
Highlight the advantages of TypeScript’s static typing, early error detection, and enhanced developer experience, which drive its widespread adoption.
Discuss advanced TypeScript features—including interfaces, generics, and type guards—and how they contribute to safer, more maintainable code.
Stay updated on TypeScript’s evolving ecosystem, growing native runtime support, and upcoming proposals such as optional type annotations for JavaScript.

FAQ

What’s the difference between var hoisting and let/const with the Temporal Dead Zone (TDZ)?

Variables declared with var are hoisted and initialized to undefined, so reading them before their declaration yields undefined. Variables declared with let or const are hoisted but not initialized; they live in the Temporal Dead Zone from the start of their scope until the declaration line. Accessing them in the TDZ throws a ReferenceError. This behavior is defined by ES6 and does not depend on strict mode.

How do closures make variables (like a counter) persist across function calls?

A closure forms when an inner function references variables from its outer lexical scope. Even after the outer function returns, the inner function retains a live reference to those variables, so state (like count) persists across calls. The garbage collector can reclaim that memory only when nothing references the inner function (and its captured environment) anymore.

How can closures in event listeners cause memory leaks, and how do you prevent them?

If a listener’s closure captures large objects, keeping the listener registered keeps those objects alive. Prevent leaks by not eagerly capturing large data in closures, passing function references directly (instead of invoking a factory immediately), removing listeners when no longer needed (removeEventListener), and clearing references in the handler when appropriate. Tie cleanup to lifecycle hooks in frameworks.

What is a pure function, and how do map/filter/reduce support functional programming?

A pure function always returns the same output for the same input and causes no side effects (no external state reads/writes). Array methods like map, filter, and reduce encourage immutable, side‑effect‑free transformations by returning new data structures and leaving the original unmodified, improving predictability, testability, and maintainability.

What is currying, and how do higher‑order functions help composition?

Currying transforms a multi‑argument function f(a, b) into a sequence f(a)(b), enabling partial application and specialized helpers (for example, pre‑filling one argument). Higher‑order functions accept or return functions, making it easy to compose behaviors (e.g., adding logging or metrics) and build reusable pipelines.

What is event delegation, and when can’t you use it?

Event delegation attaches one listener to a common ancestor and uses event bubbling to handle events from child elements (via event.target checks). It reduces listeners, simplifies code, and works with dynamically added nodes. It does not work for non‑bubbling events like focus, blur, mouseenter, mouseleave, scroll, and resize. Watch out for deep DOMs, stopPropagation, and extra filtering overhead.

What are ES modules, and why prefer them over older systems (CommonJS, AMD, IIFE)?

ES modules (import/export) are the standardized, native module system with module‑scoped code, asynchronous loading, and features like top‑level await and dynamic import() for code splitting. Their static structure enables tree‑shaking. Enable with <script type="module"> in browsers and "type": "module" (or .mjs) in Node.js. They’re cleaner, more analyzable, and better supported than legacy patterns.

Why are more companies adopting TypeScript?

TypeScript’s static typing catches errors earlier, reduces runtime bugs, and improves refactoring safety. Its tooling (autocompletion, navigation, inline docs) boosts productivity. Types act as living documentation that scales across teams. Strong ecosystem support (including DefinitelyTyped) and first‑class integration with modern frameworks make it a practical choice for large, maintainable apps.

What’s the difference between the any and unknown types in TypeScript?

any disables type checking: you can do anything with it, which can hide bugs. unknown is a safer top type: you can assign anything to it, but you must narrow or assert its type before using it. Prefer unknown for untrusted data (e.g., API responses) and use type guards or schema validation to safely operate on values.

What are generics in TypeScript, and how do constraints like extends and keyof help?

Generics add type parameters (e.g., <T>) to functions, classes, and components to preserve type relationships without resorting to any. Constraints refine which types are allowed: extends enforces required structure (e.g., T extends { id: number }), and keyof ensures keys are valid property names of a type (e.g., K extends keyof T). Defaults (e.g., <T = string>) improve ergonomics. These features enable flexible, reusable, and type‑safe APIs.

A.3.1 Understanding JSX Transpilation

A.3.2 Best Practices for JSX

A.4.1 React Hook learning list

A.4.2 Custom Hooks: best practices

A.4.3 The use API

A.4.4 Comparison between the use API and Hooks

A.5.1 React class component lifecycle

A.5.2 React functional component lifecycle

A.6.1 Error boundaries

A.6.2 Global error hooks

Event delegation pattern illustrated

Code syntax for ES Modules, CommonJS, AMD, UMD, and IIFE

Timer user interface after starting a 21-second countdown

Weekly npm downloads of TypeScript as of June 1, 2025: 88.5 million

TypeScript type error when assigning an incorrect value type to setIsRunning.

pro $24.99 per month

lite $19.99 per month

team

pro

team

pro

team