Expert JavaScript Interview Questions

Modern JS frameworks rely heavily on ES6+ features such as modules, arrow functions, template literals, destructuring, and spread/rest operators. These enhance readability, modularity, tree-shaking, and component data management.

State is managed using hooks (React useState/useReducer), global stores like Redux/MobX, Angular services with RxJS, or NgRx. Centralized state prevents prop drilling and ensures predictable UI updates across large apps.

Observables represent streams of values over time. RxJS operators like map, filter, and switchMap allow transformation, cancellation, and concurrency control. Angular uses Observables extensively for HTTP, forms, and event streams.

React uses fetch/axios with promises or async/await. Angular uses HttpClient with Observables and operators like catchError. Proper error handling, retries, and cancellation improve reliability and avoid memory leaks.

React uses lifecycle methods (componentDidMount, componentDidUpdate) and useEffect hook. Angular uses lifecycle hooks like ngOnInit, ngOnChanges, ngOnDestroy. They manage initialization, subscriptions, cleanup, and reactive updates.

Techniques include lazy loading, code splitting, memoization (useMemo), pure pipes, virtual DOM optimizations, OnPush change detection, and debouncing/throttling heavy events.

Angular DI injects services into components instead of creating them manually. This improves modularity, testability, and code reuse. Providers can be scoped globally or to specific components.

Controlled components manage form state in React. Uncontrolled components rely on the DOM for state. Controlled components provide predictable UI updates, validation, and easier debugging.

React Router maps URLs to components, supports nested routes and lazy loading. Angular Router uses modules, guards, resolvers, and lazy loading for scalable route management.

Reactive forms are model-driven using FormBuilder and validators. Template-driven forms rely on directives like ngModel. Reactive forms support dynamic controls and complex validation logic.

Use event delegation, debounce/throttle for high-frequency events, and rely on framework-specific synthetic event systems for performance and cross-browser consistency.

Angular supports one-way and two-way binding using property binding, event binding, and ngModel. React prefers one-way binding through state with explicit updates. Proper binding ensures correct UI rendering.

HOCs are functions that take a component and return an enhanced component. Used for cross-cutting concerns like authentication, logging, and conditional rendering.

Angular services store shared logic and data. When providedIn: root is used, the service becomes a singleton, shared across the entire application unless scoped locally.

Use IntersectionObserver for image lazy loading. Use React lazy()/Suspense or Angular lazy-loaded modules for code splitting and reducing initial bundle size.

Promises handle single async responses. Observables handle multiple values, support cancellation, retries, and operators for complex async logic. Observables are ideal for dynamic event-driven applications.

Unsubscribe from observables, remove event listeners, clear timers, use WeakMap for caching, and avoid retaining references in closures or global state.

Operators like map, filter, switchMap, mergeMap, debounceTime enable data transformation, cancellation, concurrency control, and clean async flows in Angular applications.

Use OnPush strategy, immutable data structures, trackBy in ngFor, and detach change detectors when needed. Minimizes unnecessary component re-renders.

Separate business logic from UI, use modules/services for reusability, implement centralized state, optimize async behavior, avoid direct DOM manipulation, and follow consistent folder structure.