JavaScript find-the-bug interview questions

Question 1

latestMessage() should return the newest message in the chat. Why is the preview always empty?

function latestMessage(messages) {
  if (messages.length === 0) return null;
  const last = messages[messages.length];
  return last.text;
}

Accepted Answer

Line 3 (Off-by-one): Arrays are zero-indexed, so the last element is at `length - 1`. `messages[messages.length]` is undefined, and reading `.text` on it throws a TypeError.

Question 2

formatStock() renders the stock badge on product cards. What does a sold-out product show?

function formatStock(count) {
  if (!count) return "Stock unknown";
  if (count < 5) return `Only ${count} left`;
  return "In stock";
}

formatStock(0); // expected a "Sold out" badge

Accepted Answer

Line 2 (Wrong edge case): `!count` is true for 0 as well as for null and undefined, so a sold-out product shows "Stock unknown" instead of being treated as zero stock.

Question 3

trackScrollDepth() runs on every client-side route change in a single-page app. What goes wrong after a few minutes of browsing?

export function trackScrollDepth(pageId) {
  let maxDepth = 0;
  window.addEventListener("scroll", () => {
    const depth = (window.scrollY + window.innerHeight) / document.body.scrollHeight;
    maxDepth = Math.max(maxDepth, depth);
  });
  return () => sendBeacon("/analytics", { pageId, maxDepth });
}

Accepted Answer

Line 3 (Resource leak): A new scroll listener is added on every navigation and never removed. Old listeners keep running (and keep their closures alive), so each scroll does more and more work and memory grows for the whole session.

Question 4

topScores() should return the three highest scores. What does it return for [100, 25, 9, 1000]?

function topScores(scores) {
  return [...scores].sort().reverse().slice(0, 3);
}

Accepted Answer

Line 2 (Wrong API usage): Without a comparator, sort() converts values to strings and sorts them lexicographically: [100, 1000, 25, 9]. Reversed, that gives [9, 25, 1000], and 100 is dropped.

Question 5

This runs in the browser when the user clicks "Pay". What's the problem?

const STRIPE_SECRET_KEY = "sk_live_51Hx9EXAMPLEf3kL0rEmIpSuM";

export async function createCharge(amountCents, token) {
  const res = await fetch("https://api.stripe.com/v1/charges", {
    method: "POST",
    headers: { Authorization: `Bearer ${STRIPE_SECRET_KEY}` },
    body: new URLSearchParams({ amount: amountCents, currency: "usd", source: token }),
  });
  return res.json();
}

Accepted Answer

Line 1 (Leaked secret): Everything shipped to the browser is public. Anyone can read the live secret key from the bundle or the network tab and use it to issue refunds, read customers, or create charges. Secret keys belong on the server; the browser should call your own endpoint.

JavaScript find-the-bug interview questions

JavaScript gotchas interviewers love

5 JavaScript spot-the-bug questions

Getting the last element

Falsy zero in a stock label

Scroll listener per page view

Sorting numbers with sort()

Secret key in front-end code

Attempts distribution