functional-state-machine.js

/**
 * STATE PATTERN
 *
 * The State object:
 *  - Determines the transition to the next state. 
 *  - Changes the current state in the state machine
 */

function trafficLight() {
  const State = Object.freeze({
    'GREEN': 'green',
    'YELLOW': 'yellow',
    'RED': 'red'
  })
  
  return {
    initialState: State.GREEN,
    states: {
    
      [State.GREEN]: async function green(next) {
        return await setTimeout(() => next(State.YELLOW), 2000)
      },
    
      [State.YELLOW]: async function yellow(next) {
        return await setTimeout(() => next(State.RED), 500)
      },
    
      [State.RED]: async function red(next) {
        return await setTimeout(() => next(State.GREEN), 2000)
      }
    
    }
  }
}

function bouncer () {
  const State = Object.freeze({
    'ONE': 'one',
    'DELAY': 'delay',
    'TWO': 'two'
  })
  
  return {
    initialState: State.ONE,
    states: {
    
      [State.ONE]: function one(next, counter = 0) {
        if (counter < 4) {
          next(State.ONE, counter += 1)
        } else {
          next(State.DELAY, State.TWO)
        }
      },
    
      [State.DELAY]: async function delay(next, state) {
        return await setTimeout(() => next(state), 2000)
      },
    
      [State.TWO]: function two(next, counter = 0) {
        if (counter < 4) {
          next(State.TWO, counter += 1)
        } else {
          next(State.DELAY, State.ONE)
        }
      }
    
    }
  }
}

function StateMachine({ initialState, states}) {
  let currentState = initialState;
  
  async function next(nextState, ...rest) {
    if (typeof nextState !== 'undefined') {
      currentState = nextState
      console.log(`state changed to ${currentState}...`)
      
      await states[currentState](next, ...rest)
    }
  }
  
  next(currentState)
}

StateMachine(trafficLight())
StateMachine(bouncer())

I provably should have mounting and dismounting logic in each state.