JavaScript & React quiz and interview questions

Front-end interviews love tricky JavaScript output questions — type coercion, closures in loops and the order of the event loop — plus React bugs like infinite re-renders and missing effect dependencies. Work through them below, junior to senior.

JavaScript & React: key concepts

== vs ===

=== compares value and type with no conversion. == converts types first, which leads to surprises like "0" == 0 being true.

var, let and const

var is function-scoped and shared across loop iterations. let and const are block-scoped, so each loop iteration gets its own binding.

The event loop

Synchronous code runs first, then microtasks (promise callbacks), then macrotasks (setTimeout).

References

Objects and arrays are assigned by reference, so const b = a points to the same array.

React state

Never call setState during render — it triggers another render, forever. Update state in event handlers or effects.

useEffect dependencies

No dependency array runs the effect after every render. [] runs it once. List every value the effect reads.

All 14 JavaScript & React questions with answers

Try each one first, then open the answer. Making a class test? Use the test maker.

1. juniorPredict the output

   What does this print?

   console.log(typeof null);

   • A. "null"
   • B. "object"
   • C. "undefined"
   • D. Error
   Show answer

   B. "object" — A long-standing JavaScript quirk: typeof null is "object". Check for null with === null.

2. juniorPredict the output

   What does this print?

   console.log(1 + "2", 1 - "2");

   • A. 3 -1
   • B. "12" -1
   • C. 12 -1
   • D. 12 NaN
   Show answer

   C. 12 -1 — + with a string concatenates: "12". - only works on numbers, so "2" is converted: 1 - 2 = -1. console.log prints 12 -1.

3. midPredict the output

   What does this print?

   for (var i = 0; i < 3; i++) {
     setTimeout(() => console.log(i), 0);
   }

   • A. 0 1 2
   • B. 3 3 3
   • C. 2 2 2
   • D. undefined ×3
   Show answer

   B. 3 3 3 — var is shared by all iterations, and the callbacks run after the loop has finished, when i is 3.

4. midPredict the output

   What does this print?

   for (let i = 0; i < 3; i++) {
     setTimeout(() => console.log(i), 0);
   }

   • A. 0 1 2
   • B. 3 3 3
   • C. 2 2 2
   • D. undefined ×3
   Show answer

   A. 0 1 2 — let creates a new binding for each iteration, so each callback remembers its own i.

5. midPredict the output

   In what order are the letters printed?

   console.log("A");
   setTimeout(() => console.log("B"), 0);
   Promise.resolve().then(() => console.log("C"));
   console.log("D");

   • A. A B C D
   • B. A D C B
   • C. A D B C
   • D. A C D B
   Show answer

   B. A D C B — Sync code first (A, D), then microtasks (the promise: C), then macrotasks (setTimeout: B).

6. juniorConcepts

   What is the difference between == and ===?

   • A. None
   • B. === compares value and type without conversion; == converts types first
   • C. == is faster
   • D. === only works on strings
   Show answer

   B. === compares value and type without conversion; == converts types first — Use === by default. With ==, "" == 0 and "0" == 0 are both true.

7. midFind the bug

   What happens when this component renders?

   function Counter() {
     const [count, setCount] = useState(0);
     setCount(count + 1);
     return <p>{count}</p>;
   }

   • A. Shows 1
   • B. Infinite re-render loop ("Too many re-renders")
   • C. Shows 0
   • D. Compile error
   Show answer

   B. Infinite re-render loop ("Too many re-renders") — Calling setCount during render schedules another render, which calls setCount again, forever. Update state in an event handler or effect.

8. midConcepts

   Why does React need a key on list items?

   • A. For styling
   • B. To identify items between renders so it updates the right elements
   • C. For SEO
   • D. To sort the list
   Show answer

   B. To identify items between renders so it updates the right elements — Stable keys (like an id) let React match items when the list changes. Using the array index breaks state when items are reordered or removed.

9. midFind the bug

   What's wrong with this effect?

   useEffect(() => {
     fetch("/api/user")
       .then(r => r.json())
       .then(setUser);
   });

   • A. fetch can't be used in effects
   • B. No dependency array, so it re-fetches after every render — and setUser causes another render
   • C. setUser must be awaited
   • D. Nothing
   Show answer

   B. No dependency array, so it re-fetches after every render — and setUser causes another render — Without a dependency array the effect runs after every render, and setUser triggers a render, so it loops. Add [] to run it once.

10. juniorPredict the output

    What does this print?

    console.log([1, 2, 3].map(x => x * 2));

    • A. [1, 2, 3]
    • B. [2, 4, 6]
    • C. 12
    • D. undefined
    Show answer

    B. [2, 4, 6] — map returns a new array with the function applied to each element.

More subjects

Need software for your business instead? I'm an AI automation & full-stack developer — see what I build.