Finite-state automatons (or state machines for short) are a mathematical construct commonly used to describe the behavior of a system. You probably already saw a few represented by diagrams like this one:

In this article, we’ll see how to create a state machine in JavaScript, a new way to write expressive and explicit code.

Let’s start by creating two types mapping two usual concepts:

type State = Promise<Transition>;
type Transition = () => State;

States lead to transitions, and transitions lead to states, and this already sounds like an automaton. However, what’s interesting is the asynchronous nature of these types. Therefore, states are promises to transitions, and may take time to resolve. For instance, a state might resolve on a user interaction.

#Animations in the frontend

I recently came across this problem: how do I create a type-writer effect in Svelte? I wanted the thing to be robust and maintainable, so I decided to use a state machine to solve it.

Here is the the state diagram of the system:

#Make it interactive!

Tamagotchi