State

State is a behavioral design pattern that lets an object alter its behavior when its internal state changes. It appears as if the object changed its class.

The State design pattern is a behavioral design pattern that allows an object to alter its behavior when its internal state changes.

This pattern is particularly useful when an object's behavior depends on its state, and the behavior needs to change dynamically as the state changes.

In JavaScript, you can implement the State pattern using objects and closures to encapsulate the states and their respective behaviors.

Sure, here's a simple example of the State design pattern in JavaScript:

// Context class
class TrafficLight {
  constructor() {
    this.currentState = new RedLight(this);
  }

  // Method to change the state
  changeState(newState) { this.currentState = newState; }

  // Method to request action from the current state
  requestAction() { return this.currentState.action(); }
}

// State interface
class TrafficLightState {
  constructor(light) {
    this.light = light;
  }

  action() { throw new Error("This method must be overridden"); }
}

// Concrete state classes
class RedLight extends TrafficLightState {
  action() { return "Stop"; }
}

class YellowLight extends TrafficLightState {
  action() { return "Prepare to stop"; }
}

class GreenLight extends TrafficLightState {
  action() { return "Go"; }
}

// Example usage
const trafficLight = new TrafficLight();

console.log(trafficLight.requestAction()); // Output: "Stop"

trafficLight.changeState(new GreenLight());
console.log(trafficLight.requestAction()); // Output: "Go"

trafficLight.changeState(new YellowLight());
console.log(trafficLight.requestAction()); // Output: "Prepare to stop"

In this example:

• The TrafficLight class represents the context of the state machine.

• It maintains a reference to the current state and provides methods to change the state and request actions from the current state.

• The TrafficLightState class is an interface for concrete state classes to implement.

• Concrete state classes (RedLight, YellowLight, GreenLight) represent different states of the traffic light.

• Each concrete state class provides its implementation of the action() method.

• The example demonstrates how the traffic light changes its state and performs actions accordingly.

This example illustrates the State design pattern where the behavior of an object changes based on its internal state.