Build a Minimal State Machine Runner (States, Transitions, Guards)

Q: Build a Minimal State Machine Runner (States, Transitions, Guards)

**Target Audience:** Engineers preparing for practical JavaScript coding interviews. **Difficulty:** Hard > **How to read this doc:** all 3 real behaviors this question tests — correct transitions, a guard genuinely BLOCKING a transition when its condition fails, and an unhandled event leaving state unchanged — were verified directly through a real, sequential traffic-light state machine. ## 1. The problem, restated A state machine config declares, for each named state, which EVENTS it responds to and what TARGET state each leads to — optionally gated by a GUARD function. `send(event)` looks up the transition for the current state and given event; if one exists AND its guard (if any) genuinely passes, the machine moves to the new state; otherwise, the state stays exactly as it was. ## 2. Clarifying questions a strong candidate asks | Question | Why it matters | | :--- | :--- | | No matching transition for an event? | The real, standard convention: the machine stays in its CURRENT

The problem

Problem, as an interviewer would state it: "Build a minimal finite state machine runner: given a config of states and their allowed transitions, send(event) should move to the next state — but only if an optional GUARD function, checking real context data, allows it."

Examples:

Code

const machine = createMachine({ initial: "red", states: {...} });
machine.send("TIMER"); // transitions if a matching, allowed transition exists

Clarifying questions expected:

What should happen when send is called with an event that has NO matching transition from the current state?
Should a guard function receive the machine's own context data, to make a real, informed decision?
Does the machine need to support entry/exit actions (side effects run on entering/leaving a state), or just the pure transition logic?

Code / implementation expected: Yes — real, direct proof through a real, multi-step traffic-light sequence: correct transitions on valid events, a guard genuinely blocking one specific transition, and an unhandled event correctly leaving the state unchanged.

state-machine
system-design

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for practical JavaScript coding interviews. Difficulty: Hard

How to read this doc: all 3 real behaviors this question tests — correct transitions, a guard genuinely BLOCKING a transition when its condition fails, and an unhandled event leaving state unchanged — were verified directly through a real, sequential traffic-light state machine.

1. The problem, restated

A state machine config declares, for each named state, which EVENTS it responds to and what TARGET state each leads to — optionally gated by a GUARD function. send(event) looks up the transition for the current state and given event; if one exists AND its guard (if any) genuinely passes, the machine moves to the new state; otherwise, the state stays exactly as it was.

2. Clarifying questions a strong candidate asks

Question	Why it matters
No

The solution is hidden so you can try first

6 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof: a traffic-light state machine correctly transitions, a guard genuinely blocks one transition, and an unhandled event leaves state unchanged