How to Hire a Frontend Developer (JavaScript)

• aRelying solely on server-side rendering without client optimizations
• bLoading all resources synchronously during startup
• cEmbedding all components into one large bundle
• dImplementing dynamic imports for lazy loading and code splittingCorrect

Explanation: Dynamic imports facilitate lazy loading and effective code splitting, which reduces the initial bundle size and improves load times.

Why it matters: Tests whether the candidate can cut initial payload using dynamic import(), which is a language feature independent of any framework.

• aUsing Chrome DevTools to take heap snapshots and analyze memory allocationCorrect
• bConstantly restarting the application to clear leaks
• cRelying solely on console logs for memory-related data
• dUsing alert pop-ups to monitor memory usage in real-time

Explanation: Chrome DevTools provides advanced profiling tools such as heap snapshots which are essential for identifying and resolving memory leaks in production applications.

Why it matters: Checks hands-on skill with profiling tools for long-running pages.

• aDisable the button synchronously on first click and re-enable only after a terminal success or failure responseCorrect
• bWrap the handler in setTimeout(..., 0) so the second click is dropped
• cSwitch fetch to XMLHttpRequest so the browser coalesces requests
• dRemove await so both clicks share one in-flight promise without guarding the button

Explanation: Guarding the control until the request settles stops duplicate submits. A 0-delay timeout does not serialize clicks. XHR does not coalesce. Dropping await still fires two requests.

Why it matters: Evaluates reasoning about async races and user-facing side effects.

• a3 3 3Correct
• b0 1 2
• c0 0 0
• dundefined undefined undefined

Explanation: var is function-scoped; timeouts run after the loop with i === 3. let would log 0 1 2.

Why it matters: Confirms solid understanding of scope, closures and the event loop.

• aRejected; remaining mapper promises still run but all() rejects on the first rejectionCorrect
• bAlways fulfilled with mixed values and errors in the array
• cCancelled; Node aborts the other mapper functions immediately
• dSettled only after a microtask where rejections become undefined

Explanation: Promise.all fail-fast rejects. Other async mappers already started keep running. It does not pack errors unless allSettled is used.

Why it matters: Tests understanding of fail-fast promise behaviour that affects error handling in real features.

• aBundle all components in a single file
• bRely solely on server-side rendering without client-side splitting
• cUse synchronous script loading in the HTML
• dUse dynamic import() with React.lazy for on-demand loadingCorrect

Explanation: Dynamic import with React.lazy allows code-splitting at the component level, ensuring that only needed code is loaded, thereby reducing the initial bundle size and load times in high-traffic SPAs.

Why it matters: Tests ability to cut initial payload on a high-traffic application using dynamic import().

• aConvert all asynchronous code to synchronous code
• bImplement global error handling using process.on('unhandledRejection') along with detailed loggingCorrect
• cIgnore promise rejections and assume errors will be caught later
• dWrap every async function with a try-catch block indiscriminately

Explanation: Global error handling with process.on('unhandledRejection') provides a centralized way to catch and log unhandled promise rejections, which is crucial for debugging complex asynchronous flows in large applications.

Why it matters: Evaluates a systematic approach to async failures. The bank answer uses the Node.js API; in the browser the equivalent is the window 'unhandledrejection' event, so ask the candidate to map the idea to the client.

• aEmploying a global mutable state without strict structure
• bRelying on custom event emitters with decentralized state management
• cDirectly manipulating the DOM for each state change
• dUtilizing Redux (or a Flux-based architecture) with middleware for logging and state inspectionCorrect

Explanation: Redux and similar Flux-based architectures enforce predictable state updates and, combined with middleware for logging, greatly simplify tracking and debugging state changes in complex applications.

Why it matters: Assesses state-architecture judgement for large, real-time interfaces.

• aUse inline scripts for dynamic content generation
• bRely solely on client-side input validation
• cImplement a strict Content Security Policy (CSP) with appropriate 'script-src' directives and use sanitization libraries for user inputsCorrect
• dDisable all JavaScript execution on client browsers

Explanation: A strict CSP combined with input sanitization is essential to prevent injection of malicious scripts, thereby effectively mitigating XSS and related vulnerabilities in modern web applications.

Why it matters: Verifies practical knowledge of layered defence against injection attacks.

• aThe JS promise rejects (opaque to the page); the request may still hit the networkCorrect
• bThe body is readable because GET is always CORS-safe
• cThe browser strips cookies but returns JSON to JS
• dNode-style http is used so CORS does not apply in the browser

Explanation: Cross-origin reads need CORS. The engine hides the body from JS. GET is not exempt. This is browser fetch, not Node http.

Why it matters: Checks precise understanding of the browser's cross-origin security model, which is often misunderstood.