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.