Mid JavaScript Interview Questions

Web APIs provide browser-based functionalities accessible to JavaScript.

Examples include:

• DOM API
• Fetch API
• Web Storage
• WebSockets
• Canvas API
• Service Workers

They enable dynamic, interactive, and offline-capable web applications.

The Fetch API is promise-based and easier to work with than XMLHttpRequest.

• Simpler syntax and chaining
• Returns Response objects
• Better error handling
• Supports streaming and CORS

Service workers run in the background, independent of web pages.

• Enable offline support
• Implement caching strategies
• Handle push notifications
• Provide background sync

They form the foundation of Progressive Web Apps (PWAs).

WebSockets provide full-duplex communication over a single TCP connection.

Use cases include:

• Real-time chat
• Live stock updates
• Gaming
• Live dashboards

• localStorage: Persistent key-value storage.
• sessionStorage: Data persists for session only.
• IndexedDB: Client-side NoSQL database for structured data.

requestAnimationFrame syncs animations with browser repaint cycles.

Improves smoothness and reduces CPU usage compared to timers.

• Minimize reflows and repaints
• Use document fragments
• Batch DOM updates
• Cache selectors
• Avoid layout thrashing

Debouncing: Trigger function after a delay of inactivity.

Throttling: Trigger function at fixed intervals.

Useful for scroll, resize, and search inputs.

Memory leaks occur when unused objects remain referenced.

• Dangling references
• Uncleared timers
• Unremoved event listeners
• Closures holding unnecessary data

Remove listeners, clear intervals, and nullify unused references.

Synchronous: Execution blocks until complete.

Asynchronous: Returns immediately, uses callbacks or promises.

Design patterns are reusable solutions to common problems.

• Module
• Singleton
• Observer
• Factory
• MVC

Module pattern encapsulates private variables using closures.

Exposes only public methods, preventing namespace pollution.

The observer pattern allows objects to subscribe to changes in another object.

Useful for events, data binding, and reactive programming.

Singleton: Only one instance allowed.

Factory: Creates objects without exposing creation logic.

Lazy loading delays loading non-critical resources until needed.

Used for images, scripts, and modules to improve load time.

Async iterators allow iteration over asynchronous data streams.

for-await-of simplifies consuming async sequences.

Web Workers run scripts in background threads.

Prevent blocking the main UI thread during heavy computations.

• Sanitize inputs to prevent XSS
• Use HTTPS
• Implement CSP
• Prevent CSRF

Capturing: Event flows parent ? child.

Bubbling: Event flows child ? parent.

• Minimize DOM operations
• Use event delegation
• Apply lazy loading
• Debounce/throttle events
• Prevent memory leaks
• Split code into modules