State Pattern

Introduction

The State Pattern is a behavioral design pattern that allows an object to change its behavior based on its internal state. This pattern is particularly useful when an object needs to perform different operations depending on the context or state it's in. By encapsulating each state into a separate class, the State Pattern promotes loose coupling and makes the code more maintainable.

Concept

The core idea behind the State Pattern is to define a set of states that an object can be in, and encapsulate the behavior associated with each state within its own class. The context (the object whose behavior changes) holds a reference to one of these state objects at any given time. When the context's internal state changes, it transitions to a new state object, thereby altering its behavior.

Key Components

1. Context: This is the class that maintains a reference to a State object and delegates requests to it.
2. State: This is an interface or abstract class that defines the interface for all concrete states.
3. Concrete States: These are classes that implement the State interface and define the behavior associated with each state.

Examples

Let's illustrate the State Pattern through a practical example: A traffic light system. The traffic light can be in one of three states: Red, Yellow, or Green. Each state has its own behavior (e.g., what happens next).

Step 1: Define the Context Class

The TrafficLight class will act as the context and maintain a reference to the current state.

1class TrafficLight {
2  constructor() {
3      this.state = new RedState(this);
4  }
5 
6  setState(state) {
7      this.state = state;
8  }
9 
10  request() {
11      this.state.handle();
12  }
13}

Step 2: Define the State Interface

The State interface will define the methods that all concrete states must implement.

1class State {
2  handle() {
3      throw new Error('handle method must be implemented');
4  }
5}

Step 3: Implement Concrete States

Each state (Red, Yellow, Green) will be a class that implements the State interface.

1class RedState extends State {
2  constructor(light) {
3      super();
4      this.light = light;
5  }
6 
7  handle() {
8      console.log('Traffic Light is Red. Changing to Green.');
9      this.light.setState(new GreenState(this.light));
10  }
11}
12 
13class YellowState extends State {
14  constructor(light) {
15      super();
16      this.light = light;
17  }
18 
19  handle() {
20      console.log('Traffic Light is Yellow. Changing to Red.');
21      this.light.setState(new RedState(this.light));
22  }
23}
24 
25class GreenState extends State {
26  constructor(light) {
27      super();
28      this.light = light;
29  }
30 
31  handle() {
32      console.log('Traffic Light is Green. Changing to Yellow.');
33      this.light.setState(new YellowState(this.light));
34  }
35}

Step 4: Use the Traffic Light System

Now, let's create a traffic light and simulate its behavior.

1const trafficLight = new TrafficLight();
2 
3trafficLight.request(); // Output: Traffic Light is Red. Changing to Green.
4trafficLight.request(); // Output: Traffic Light is Green. Changing to Yellow.
5trafficLight.request(); // Output: Traffic Light is Yellow. Changing to Red.

What's Next?

In the next section, we will explore another behavioral pattern called the Strategy Pattern. The Strategy Pattern allows you to define a family of algorithms, encapsulate each one, and make them interchangeable. This makes it easier to switch between different algorithms at runtime.

Stay tuned for more insights into design patterns and how they can help you write better code!