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.