Why JavaScript Questions Reveal More Than Any Resume Line

const nums = [10, 9, 1, 25];

console.log(nums.sort());
// [ 1, 10, 25, 9 ]  - default sort compares as strings

console.log(nums.sort((a, b) => a - b));
// [ 1, 9, 10, 25 ]  - numeric comparator

console.log(nums);
// [ 1, 9, 10, 25 ]  - sort changed the original array

const sortedCopy = [...nums].sort((a, b) => b - a);
// or nums.toSorted((a, b) => b - a) in newer engines

Level 1: "It returns 1, 9, 10, 25."
-> Has not hit this in real code.

Level 2: "It sorts as strings, so 10 comes before 9.
          You pass (a, b) => a - b."
-> Has used sort with numbers.

Level 3: Level 2 plus "and sort mutates the array,
          so I copy it first if the original is used
          elsewhere, like React state."
-> Has debugged a real bug caused by mutation.

One question, three clearly different candidates.

// One listener for the whole list, including items added later
const list = document.querySelector("#todo-list");

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (!item || !list.contains(item)) return;

  if (event.target.matches(".delete-btn")) {
    item.remove();
  } else {
    item.classList.toggle("done");
  }
});

// Spoken:
// "Clicks bubble up from the button to the li to the ul.
// I listen once on the ul and use closest() to find the
// li that was clicked. New items work automatically,
// and I avoid a thousand separate listeners."

async function loadOrders(showSpinner, render, showError) {
  showSpinner(true);
  try {
    const res = await fetch("/api/orders");
    if (!res.ok) throw new Error("HTTP " + res.status);
    const orders = await res.json();
    render(orders);
  } catch (err) {
    showError("Could not load orders. Please retry.");
    console.error(err);
  } finally {
    showSpinner(false); // runs on success AND failure
  }
}

// The detail that reveals experience: finally.
// Without it, a failed request leaves the spinner
// spinning forever.

Q: What is the difference between map and forEach?

A: map returns a new array and forEach does not.

(Correct. But it sounds read, not lived.
The interviewer still has no evidence.)

Q: What is the difference between map and forEach?

A: map returns a new array of transformed values;
forEach just runs a function and returns undefined.

I use map for things like turning API results into
the shape my components need:

  const cards = products.map((p) => ({
    id: p.id,
    title: p.name,
    price: "Rs " + p.price.toFixed(2)
  }));

One mistake I made early was using curly braces in
the arrow function without return, which gave me an
array of undefined.

KEYWORD TO QUESTION

For each keyword on your resume, write the question
an interviewer would most likely ask:

ES6+           -> ______________________
DOM            -> ______________________
Async / fetch  -> ______________________
Array methods  -> ______________________
Closures       -> ______________________
Local storage  -> ______________________

Now answer each one aloud in under 60 seconds.
If you cannot, the keyword needs practice or removal.

EVIDENCE BANK

Keyword: ______________
Where I used it (project + feature):
  ________________________________
A bug or surprise it caused:
  ________________________________
How I fixed or handled it:
  ________________________________
One-sentence evidence line:
  ________________________________

Fill one card per keyword. Read them the morning
of the interview, not the night before.

DEPTH LADDER (test yourself)

Pick one topic, then answer each rung aloud:

Rung 1: What does it do?
Rung 2: Why does it behave that way?
Rung 3: Where have I used it?
Rung 4: What can go wrong?
Rung 5: How would I explain it to a junior?

Example topic: event delegation
1. One listener on a parent handles child events
2. Events bubble from target up to ancestors
3. Todo list delete buttons
4. Clicks on nested elements: use closest()
5. "Like one receptionist handling a whole floor"