JavaScript interview questions covering error propagation, timers, browser rendering, performance, code splitting, tree shaking, browser observers, routing, SSR, CSR and hydration.
Open a question for the full answer, code and interview guidance.
A synchronous exception is thrown while ordinary JavaScript code is executing and can be caught by a surrounding synchronous try/catch. A Promise rejection represents failure of an asynchronous Promise operation and must be handled through await inside try/catch or with a rejection handler such as catch.
An unhandled Promise rejection occurs when a Promise rejects and the application does not attach an appropriate rejection handler within the runtime's handling rules. In browsers and server runtimes this can produce warnings, diagnostic events, or process-level consequences depending on the environment.
setTimeout schedules a callback to run once after at least the specified delay. setInterval repeatedly schedules a callback at approximately the specified interval until it is canceled.
A zero-millisecond timeout means the callback becomes eligible to run after the minimum scheduling delay; it does not interrupt currently executing JavaScript. The callback is placed into the runtime's task scheduling mechanism and must wait for the current call stack and relevant microtasks to finish.
requestAnimationFrame asks the browser to run a callback before a future repaint. It is designed for visual updates and animation work because the browser can coordinate callbacks with its rendering cycle.
At a high level, the browser parses HTML and CSS, builds structures needed for rendering, calculates layout, paints visual content, and composites layers for display. JavaScript can trigger changes that require some of these stages to run again.
Layout, historically called reflow in many discussions, calculates the size and position of elements when geometry may have changed. Paint determines how visual parts such as text, borders, backgrounds, and shadows should be drawn.
Layout thrashing occurs when JavaScript repeatedly alternates DOM writes that invalidate layout with reads that require up-to-date layout information. The browser may be forced to perform synchronous layout calculations many times.
Both attributes allow an external classic script to be downloaded without blocking HTML parsing in the normal way. An async script executes as soon as it is available, so execution order relative to other async scripts is not guaranteed.
Code splitting divides an application bundle into smaller pieces that can be loaded when required instead of sending all JavaScript during the initial page load. This can reduce initial download, parsing, and execution costs.
Tree shaking is a build-time optimization that removes code determined to be unused from the final bundle. It works best with statically analyzable ES module imports and exports.
Minification reduces JavaScript file size by removing unnecessary whitespace and comments and by applying safe code transformations such as shortening local identifiers where appropriate.
A source map maps generated or transformed JavaScript back to the original source files and locations. It is useful when code has been bundled, transpiled, or minified.
Transpilation converts source code from one JavaScript form into another, often to support environments that do not understand newer syntax directly. Tools such as Babel can transform selected modern language features according to configured browser targets.
A polyfill supplies an implementation of a web or JavaScript API that is missing from a target environment. It differs from transpilation, which primarily rewrites syntax.
Feature detection checks whether the runtime supports a required capability before using it. It is generally more reliable than guessing capabilities from the browser's user-agent string.
IntersectionObserver asynchronously reports when a target element enters or leaves the intersection of a root viewport or ancestor. It is commonly used for lazy loading, visibility tracking, and triggering work when content approaches the viewport.
MutationObserver watches a DOM subtree for configured changes such as child additions/removals, attribute changes, or text mutations. The observer receives mutation records asynchronously.
ResizeObserver reports changes to the dimensions of observed elements. It allows components to respond to their actual rendered size rather than relying only on global window resize events.
The History API allows browser applications to interact with session history. pushState adds a history entry without performing a full page navigation, while replaceState replaces the current entry.
window.location represents the current document URL and can be used to navigate, reload, or inspect URL components. Assigning a new location normally causes browser navigation and document loading.
Client-side routing maps URL paths to application views without requiring a complete document reload for every navigation. It is common in single-page applications.
Client-side rendering sends enough HTML and JavaScript for the browser to build or update much of the user interface after scripts execute. Server-side rendering generates HTML on the server for the request and sends that rendered markup to the browser.
Hydration is the process in which client-side JavaScript attaches application behavior and event handling to HTML that was already rendered on the server. This allows users to receive initial markup quickly while still gaining rich client-side interactivity.
Start by measuring rather than guessing. Use browser performance tools, network traces, runtime profiling, real-user monitoring, and application telemetry to identify whether the bottleneck is network transfer, JavaScript execution, rendering, API latency, memory growth, or another dependency.