Skip to main content

State Design Pattern

Structural: State Pattern

Can you explain the state design pattern?​

View Answer:
Interview Response: The State pattern provides state-specific logic to a limited set of objects in which each object represents a particular state. The State pattern is commonly used in JavaScript to convert massive switch-base state machines into objects.

Code Example:



This pattern's objects are as follows:

Context -- example code: TrafficLight

  • exposes an interface that supports clients of the service
  • keeps a reference to a state object that defines the current state.
  • Allows State objects to change their current state to another state.

State -- example code: Red, Yellow, Green

  • captures the state's values and associated behavior

let TrafficLight = function () {
  let count = 0;
  let currentState = new Red(this);

  this.change = function (state) {
    // limits number of changes
    if (count++ >= 10) return;
    currentState = state;
    currentState.go();
  };

  this.start = function () {
    currentState.go();
  };
};

let Red = function (light) {
  this.light = light;

  this.go = function () {
    console.log('Red --> for 1 minute');
    light.change(new Green(light));
  };
};

let Yellow = function (light) {
  this.light = light;

  this.go = function () {
    console.log('Yellow --> for 10 seconds');
    light.change(new Red(light));
  };
};

let Green = function (light) {
  this.light = light;

  this.go = function () {
    console.log('Green --> for 1 minute');
    light.change(new Yellow(light));
  };
};

function run() {
  let light = new TrafficLight();
  light.start();
}

run();

/*

OUTPUT:

Red --> for 1 minute
Green --> for 1 minute
Yellow --> for 10 seconds
Red --> for 1 minute
Green --> for 1 minute
Yellow --> for 10 seconds
Red --> for 1 minute
Green --> for 1 minute
Yellow --> for 10 seconds
Red --> for 1 minute
Green --> for 1 minute

*/

The State pattern belongs to which pattern category?​

View Answer:
Interview Response: The State pattern is a type of behavioral design pattern.

When should you utilize the JavaScript State Pattern?​

View Answer:
Interview Response: In a real-world application, the State pattern could be handy for introducing new states that we haven't yet considered, possibly more simply than a switch case. Each state is contained and has its own set of internal functions.

What are some of the advantages of employing the State pattern?​

View Answer:
Interview Response: Benefits of the State Pattern

  • Singular Responsibility Principle -- Separate the code related to each state into separate classes.
  • The Open/Closed Principle - Add new states without modifying existing state classes or the context.
  • Simplify the contextual code by removing bulky state machine conditionals.

What are some of the State pattern's drawbacks?​

View Answer:
Interview Response: Applying the pattern may be excessive if a state machine has only a few states or infrequently changes.