Implementing a state machine in javascript

For reasons beyond my understanding, and despite their relative ubuiquity, state machines are still largely disregarded by a huge slice of programmers.
Many problems can be modeled using a state machine, the most common one is the maintenance of a database table column which holds some kind of state. Many programmers don’t realize that they are in presence of a state machine and end up throwing bits of code accross the codebase to flip state whenever necessary. They are basically resourcing to a messy ad-hoc implementation of a state machine without realizing it. Personally I’ve been tearing my hair off because of this countless times.
Simply put, if you’re going to use ad-hoc code to flip states among three or more possible values, you are going to make mistakes and ultimately render you codebase unmanageable.

But what’s a sate machine anyway?

From wikipedia:
A finite-state machine (FSM) or finite-state automaton (plural: automata), or simply a state machine, is a mathematical model used to design computer programs and digital logic circuits. It is conceived as an abstract machine that can be in one of a finite number of states. The machine is in only one state at a time; the state it is in at any given time is called the current state. It can change from one state to another when initiated by a triggering event or condition, this is called a transition. A particular FSM is defined by a list of the possible states it can transition to from each state, and the triggering condition for each transition.

To show how harmless state machines are, I’m going to model myself with a state machine. More specifically I’ll use a state machine to model a day at work.

So, my average work day consists of writting software in front of a computer screen. When I get bored I make a pause for coffee, after a few minutes I go back to work. If somebody calls for a meeting I imediatly follow, regardless if I’m working or having a coffee. Once the meeting is over I go back to work.

Let’s put this into a diagram for clarity.

If you’re an electrical enginner like myself, you’ll notice the similarity between this diagram and a state diagram of a circuit with flip-flops. That is not a coincidence, sequential logic circuits are state machines.

On to the implementation, I’ll use javascript, but obviously this can be done in your favorite language. But first, let’s start by specifying the sate machine by writting down all the states and transitions among them.

states = [
	{
		'name':'working',
		'initial':true,
		'events':{
			'bored':'coffee',
			'call_for_meeting':'meeting',
		}
	},
	{
		'name':'coffee',
		'events':{
			'break_over':'working',
			'call_for_meeting':'meeting'
		}
	},
	{
		'name':'meeting',
		'events':{
			'meetings_over':'working'
		}
	},
];

This is pretty self-explanatory.
The implementation is straightforward too: a constructor sets up the state machine when provided with a state machine definition such as the example above. Aditionally we define two extra methods, one to handle events and other to report the current state. What could be simpler?

function StateMachine(states){
	this.states = states;
	this.indexes = {}; //just for convinience
	for( var i = 0; i< this.states.length; i++){
		this.indexes[this.states[i].name] = i;
		if (this.states[i].initial){
			this.currentState = this.states[i];
		}
	}
	this.consumeEvent = function(e){
		if(this.currentState.events[e]){
			this.currentState = this.states[this.indexes[this.currentState.events[e]]] ;
		}
	}
	this.getStatus = function(){
		return this.currentState.name;
	}
}

And that’s it! Let’s see it in action.

sm = new StateMachine(states);
sm.getStatus(); // will return 'working'
 
sm.consumeEvent('bored');
sm.getStatus(); // I went for coffee
 
sm.consumeEvent('call_for_meeting');
sm.getStatus(); //will return 'meeting'
 
sm.consumeEvent('bored'); //doesn't matter how boring a meeting can be...
sm.getStatus(); //will still return 'meeting'
 
sm.consumeEvent('meetings_over')
sm.getStatus(); // 'working'

In many scenarios you might want to add some extra features such as signaling, external persistence or hooks, but this is basically it.

Related Posts:

• View on flickriver userscript
• Linear algebra in javascript

Tags: finite state automaton, javascript, state machine