📘 State Pattern: Behavioral States

🎯 Introduction

Ever played a video game where your character can walk, run, jump, or swim? 🎮 Each of these is a different state, and your character behaves differently in each one. That’s exactly what the State Pattern is all about – managing objects that change their behavior based on their internal state!

The State Pattern is like a chameleon 🦎 that changes its behavior based on its environment. Instead of having massive if-else statements checking conditions everywhere, we elegantly encapsulate each state’s behavior in its own class. Let’s dive in and make your code more flexible and maintainable! 💪

📚 Understanding State Pattern

The State Pattern allows an object to alter its behavior when its internal state changes. Think of it like a traffic light 🚦:

Red state: Cars stop, pedestrians can walk
Yellow state: Cars prepare to stop, pedestrians wait
Green state: Cars go, pedestrians must wait

Each state has its own set of behaviors, and the light transitions between states based on specific rules. Here’s the beauty: instead of one massive class handling all possible states, we create separate classes for each state! 🎨

Core Components:

Context: The main object whose behavior changes (the traffic light itself)
State Interface: Defines methods all states must implement
Concrete States: Individual state implementations (Red, Yellow, Green)
State Transitions: Rules for moving between states

🔧 Basic Syntax and Usage

Let’s start with a simple example – a music player that can be in different states! 🎵

// 🎯 State interface
interface PlayerState {
  play(): void;
  pause(): void;
  stop(): void;
}

// 🎮 Context class
class MusicPlayer {
  private state: PlayerState;
  
  constructor() {
    // 🏁 Start in stopped state
    this.state = new StoppedState(this);
  }
  
  setState(state: PlayerState): void {
    this.state = state;
  }
  
  // 🎵 Delegate actions to current state
  play(): void {
    this.state.play();
  }
  
  pause(): void {
    this.state.pause();
  }
  
  stop(): void {
    this.state.stop();
  }
}

// 🛑 Stopped state
class StoppedState implements PlayerState {
  constructor(private player: MusicPlayer) {}
  
  play(): void {
    console.log("▶️ Starting playback!");
    this.player.setState(new PlayingState(this.player));
  }
  
  pause(): void {
    console.log("⚠️ Can't pause - already stopped!");
  }
  
  stop(): void {
    console.log("🛑 Already stopped!");
  }
}

// 🎵 Playing state
class PlayingState implements PlayerState {
  constructor(private player: MusicPlayer) {}
  
  play(): void {
    console.log("🎵 Already playing!");
  }
  
  pause(): void {
    console.log("⏸️ Pausing playback!");
    this.player.setState(new PausedState(this.player));
  }
  
  stop(): void {
    console.log("⏹️ Stopping playback!");
    this.player.setState(new StoppedState(this.player));
  }
}

// ⏸️ Paused state
class PausedState implements PlayerState {
  constructor(private player: MusicPlayer) {}
  
  play(): void {
    console.log("▶️ Resuming playback!");
    this.player.setState(new PlayingState(this.player));
  }
  
  pause(): void {
    console.log("⏸️ Already paused!");
  }
  
  stop(): void {
    console.log("⏹️ Stopping from pause!");
    this.player.setState(new StoppedState(this.player));
  }
}

// 🎪 Let's use it!
const player = new MusicPlayer();
player.play();   // ▶️ Starting playback!
player.pause();  // ⏸️ Pausing playback!
player.play();   // ▶️ Resuming playback!
player.stop();   // ⏹️ Stopping playback!

💡 Practical Examples

Example 1: Smart Door Lock 🚪

Let’s build a smart door lock system that can be locked, unlocked, or in alarm mode!

// 🔐 Door lock states
interface DoorState {
  lock(): void;
  unlock(pin: string): void;
  alarm(): void;
}

class SmartDoor {
  private state: DoorState;
  private correctPin = "1234";
  private attempts = 0;
  
  constructor() {
    this.state = new LockedState(this);
  }
  
  setState(state: DoorState): void {
    this.state = state;
  }
  
  getPin(): string {
    return this.correctPin;
  }
  
  incrementAttempts(): void {
    this.attempts++;
  }
  
  resetAttempts(): void {
    this.attempts = 0;
  }
  
  getAttempts(): number {
    return this.attempts;
  }
  
  // 🎯 Public methods
  lock(): void {
    this.state.lock();
  }
  
  unlock(pin: string): void {
    this.state.unlock(pin);
  }
  
  alarm(): void {
    this.state.alarm();
  }
}

// 🔒 Locked state
class LockedState implements DoorState {
  constructor(private door: SmartDoor) {}
  
  lock(): void {
    console.log("🔒 Door is already locked!");
  }
  
  unlock(pin: string): void {
    if (pin === this.door.getPin()) {
      console.log("✅ Correct PIN! Door unlocked! 🔓");
      this.door.resetAttempts();
      this.door.setState(new UnlockedState(this.door));
    } else {
      this.door.incrementAttempts();
      console.log(`❌ Wrong PIN! Attempt ${this.door.getAttempts()}/3`);
      
      if (this.door.getAttempts() >= 3) {
        console.log("🚨 Too many attempts! ALARM!");
        this.door.setState(new AlarmState(this.door));
      }
    }
  }
  
  alarm(): void {
    console.log("🚨 Triggering alarm!");
    this.door.setState(new AlarmState(this.door));
  }
}

// 🔓 Unlocked state
class UnlockedState implements DoorState {
  constructor(private door: SmartDoor) {}
  
  lock(): void {
    console.log("🔒 Locking door!");
    this.door.setState(new LockedState(this.door));
  }
  
  unlock(pin: string): void {
    console.log("🔓 Door is already unlocked!");
  }
  
  alarm(): void {
    console.log("🚨 Triggering alarm!");
    this.door.setState(new AlarmState(this.door));
  }
}

// 🚨 Alarm state
class AlarmState implements DoorState {
  constructor(private door: SmartDoor) {}
  
  lock(): void {
    console.log("⚠️ Cannot lock - alarm is active!");
  }
  
  unlock(pin: string): void {
    if (pin === this.door.getPin()) {
      console.log("✅ Alarm disabled! Door unlocked! 🔓");
      this.door.resetAttempts();
      this.door.setState(new UnlockedState(this.door));
    } else {
      console.log("❌ Wrong PIN! Alarm still active! 🚨");
    }
  }
  
  alarm(): void {
    console.log("🚨 Alarm is already active!");
  }
}

// 🎮 Let's test our smart door!
const door = new SmartDoor();
door.unlock("0000");  // ❌ Wrong PIN! Attempt 1/3
door.unlock("1111");  // ❌ Wrong PIN! Attempt 2/3
door.unlock("2222");  // ❌ Wrong PIN! Attempt 3/3
                      // 🚨 Too many attempts! ALARM!
door.lock();          // ⚠️ Cannot lock - alarm is active!
door.unlock("1234");  // ✅ Alarm disabled! Door unlocked! 🔓
door.lock();          // 🔒 Locking door!

Example 2: Vending Machine 🥤

Let’s create a vending machine with different states!

// 🥤 Vending machine states
interface VendingState {
  insertCoin(): void;
  selectProduct(): void;
  dispense(): void;
  refund(): void;
}

class VendingMachine {
  private state: VendingState;
  private balance = 0;
  private productPrice = 2.50;
  
  constructor() {
    this.state = new IdleState(this);
  }
  
  setState(state: VendingState): void {
    this.state = state;
  }
  
  addBalance(amount: number): void {
    this.balance += amount;
    console.log(`💰 Balance: $${this.balance.toFixed(2)}`);
  }
  
  getBalance(): number {
    return this.balance;
  }
  
  getProductPrice(): number {
    return this.productPrice;
  }
  
  resetBalance(): void {
    this.balance = 0;
  }
  
  // 🎯 Public methods
  insertCoin(): void {
    this.state.insertCoin();
  }
  
  selectProduct(): void {
    this.state.selectProduct();
  }
  
  dispense(): void {
    this.state.dispense();
  }
  
  refund(): void {
    this.state.refund();
  }
}

// 🔄 Idle state
class IdleState implements VendingState {
  constructor(private machine: VendingMachine) {}
  
  insertCoin(): void {
    console.log("🪙 Coin inserted!");
    this.machine.addBalance(1.00);
    this.machine.setState(new HasMoneyState(this.machine));
  }
  
  selectProduct(): void {
    console.log("❌ Please insert money first!");
  }
  
  dispense(): void {
    console.log("❌ Please insert money and select a product!");
  }
  
  refund(): void {
    console.log("💸 Nothing to refund!");
  }
}

// 💰 Has money state
class HasMoneyState implements VendingState {
  constructor(private machine: VendingMachine) {}
  
  insertCoin(): void {
    console.log("🪙 Another coin inserted!");
    this.machine.addBalance(1.00);
  }
  
  selectProduct(): void {
    if (this.machine.getBalance() >= this.machine.getProductPrice()) {
      console.log("✅ Product selected! Dispensing...");
      this.machine.setState(new DispensingState(this.machine));
      this.machine.dispense();
    } else {
      const needed = this.machine.getProductPrice() - this.machine.getBalance();
      console.log(`❌ Not enough money! Need $${needed.toFixed(2)} more`);
    }
  }
  
  dispense(): void {
    console.log("❌ Please select a product first!");
  }
  
  refund(): void {
    console.log(`💸 Refunding $${this.machine.getBalance().toFixed(2)}`);
    this.machine.resetBalance();
    this.machine.setState(new IdleState(this.machine));
  }
}

// 📦 Dispensing state
class DispensingState implements VendingState {
  constructor(private machine: VendingMachine) {}
  
  insertCoin(): void {
    console.log("⏳ Please wait... dispensing product!");
  }
  
  selectProduct(): void {
    console.log("⏳ Already dispensing a product!");
  }
  
  dispense(): void {
    console.log("🥤 Here's your drink! Enjoy! 🎉");
    const change = this.machine.getBalance() - this.machine.getProductPrice();
    if (change > 0) {
      console.log(`💰 Your change: $${change.toFixed(2)}`);
    }
    this.machine.resetBalance();
    this.machine.setState(new IdleState(this.machine));
  }
  
  refund(): void {
    console.log("⏳ Cannot refund while dispensing!");
  }
}

// 🎮 Let's buy a drink!
const vendingMachine = new VendingMachine();
vendingMachine.selectProduct();  // ❌ Please insert money first!
vendingMachine.insertCoin();      // 🪙 Coin inserted! 💰 Balance: $1.00
vendingMachine.insertCoin();      // 🪙 Another coin inserted! 💰 Balance: $2.00
vendingMachine.selectProduct();   // ❌ Not enough money! Need $0.50 more
vendingMachine.insertCoin();      // 🪙 Another coin inserted! 💰 Balance: $3.00
vendingMachine.selectProduct();   // ✅ Product selected! Dispensing...
                                  // 🥤 Here's your drink! Enjoy! 🎉
                                  // 💰 Your change: $0.50

🚀 Advanced Concepts

State with Context Data 📊

Sometimes states need to carry data between transitions:

// 🎮 Game character with stats
interface CharacterState {
  move(): void;
  attack(): void;
  takeDamage(damage: number): void;
  heal(): void;
}

class GameCharacter {
  private state: CharacterState;
  private health = 100;
  private maxHealth = 100;
  
  constructor(public name: string) {
    this.state = new HealthyState(this);
  }
  
  setState(state: CharacterState): void {
    this.state = state;
  }
  
  getHealth(): number {
    return this.health;
  }
  
  setHealth(health: number): void {
    this.health = Math.max(0, Math.min(health, this.maxHealth));
    console.log(`❤️ ${this.name}'s health: ${this.health}/${this.maxHealth}`);
    
    // 🔄 Auto-transition based on health
    if (this.health === 0) {
      this.setState(new DefeatedState(this));
    } else if (this.health <= 30) {
      this.setState(new CriticalState(this));
    } else if (this.health <= 60) {
      this.setState(new InjuredState(this));
    } else {
      this.setState(new HealthyState(this));
    }
  }
  
  // 🎯 Actions
  move(): void { this.state.move(); }
  attack(): void { this.state.attack(); }
  takeDamage(damage: number): void { this.state.takeDamage(damage); }
  heal(): void { this.state.heal(); }
}

// 💪 Healthy state
class HealthyState implements CharacterState {
  constructor(private character: GameCharacter) {}
  
  move(): void {
    console.log(`🏃 ${this.character.name} moves swiftly!`);
  }
  
  attack(): void {
    console.log(`⚔️ ${this.character.name} attacks with full power!`);
  }
  
  takeDamage(damage: number): void {
    console.log(`💥 ${this.character.name} takes ${damage} damage!`);
    this.character.setHealth(this.character.getHealth() - damage);
  }
  
  heal(): void {
    console.log(`✨ ${this.character.name} heals!`);
    this.character.setHealth(this.character.getHealth() + 30);
  }
}

// 🤕 Injured state
class InjuredState implements CharacterState {
  constructor(private character: GameCharacter) {}
  
  move(): void {
    console.log(`🚶 ${this.character.name} limps slowly...`);
  }
  
  attack(): void {
    console.log(`🗡️ ${this.character.name} attacks weakly`);
  }
  
  takeDamage(damage: number): void {
    console.log(`💥 ${this.character.name} takes ${damage} damage! Ouch!`);
    this.character.setHealth(this.character.getHealth() - damage);
  }
  
  heal(): void {
    console.log(`💊 ${this.character.name} desperately heals!`);
    this.character.setHealth(this.character.getHealth() + 30);
  }
}

// 🆘 Critical state
class CriticalState implements CharacterState {
  constructor(private character: GameCharacter) {}
  
  move(): void {
    console.log(`🐌 ${this.character.name} can barely move!`);
  }
  
  attack(): void {
    console.log(`😰 ${this.character.name} is too weak to attack!`);
  }
  
  takeDamage(damage: number): void {
    console.log(`💥 ${this.character.name} takes ${damage} critical damage!`);
    this.character.setHealth(this.character.getHealth() - damage);
  }
  
  heal(): void {
    console.log(`💉 ${this.character.name} uses emergency healing!`);
    this.character.setHealth(this.character.getHealth() + 40);
  }
}

// 💀 Defeated state
class DefeatedState implements CharacterState {
  constructor(private character: GameCharacter) {}
  
  move(): void {
    console.log(`☠️ ${this.character.name} cannot move... defeated!`);
  }
  
  attack(): void {
    console.log(`☠️ ${this.character.name} cannot attack... defeated!`);
  }
  
  takeDamage(damage: number): void {
    console.log(`☠️ ${this.character.name} is already defeated!`);
  }
  
  heal(): void {
    console.log(`🔮 ${this.character.name} is revived!`);
    this.character.setHealth(50);
  }
}

// 🎮 Epic battle!
const hero = new GameCharacter("Hero");
hero.attack();        // ⚔️ Hero attacks with full power!
hero.takeDamage(50);  // 💥 Hero takes 50 damage! ❤️ Hero's health: 50/100
hero.move();          // 🚶 Hero limps slowly...
hero.takeDamage(30);  // 💥 Hero takes 30 damage! Ouch! ❤️ Hero's health: 20/100
hero.attack();        // 😰 Hero is too weak to attack!
hero.heal();          // 💉 Hero uses emergency healing! ❤️ Hero's health: 60/100
hero.move();          // 🚶 Hero limps slowly...

Async State Transitions 🔄

Real-world applications often need async operations:

// 📡 Connection states with async operations
interface ConnectionState {
  connect(): Promise<void>;
  disconnect(): Promise<void>;
  sendData(data: string): Promise<void>;
}

class NetworkConnection {
  private state: ConnectionState;
  
  constructor() {
    this.state = new DisconnectedState(this);
  }
  
  setState(state: ConnectionState): void {
    this.state = state;
  }
  
  // 🎯 Public async methods
  async connect(): Promise<void> {
    await this.state.connect();
  }
  
  async disconnect(): Promise<void> {
    await this.state.disconnect();
  }
  
  async sendData(data: string): Promise<void> {
    await this.state.sendData(data);
  }
}

// 🔌 Disconnected state
class DisconnectedState implements ConnectionState {
  constructor(private connection: NetworkConnection) {}
  
  async connect(): Promise<void> {
    console.log("🔄 Connecting...");
    this.connection.setState(new ConnectingState(this.connection));
    
    // 🎲 Simulate connection attempt
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    const success = Math.random() > 0.3;
    if (success) {
      console.log("✅ Connected successfully!");
      this.connection.setState(new ConnectedState(this.connection));
    } else {
      console.log("❌ Connection failed!");
      this.connection.setState(new DisconnectedState(this.connection));
    }
  }
  
  async disconnect(): Promise<void> {
    console.log("🔌 Already disconnected!");
  }
  
  async sendData(data: string): Promise<void> {
    console.log("❌ Cannot send data - not connected!");
  }
}

// 🔄 Connecting state
class ConnectingState implements ConnectionState {
  constructor(private connection: NetworkConnection) {}
  
  async connect(): Promise<void> {
    console.log("⏳ Already connecting... please wait!");
  }
  
  async disconnect(): Promise<void> {
    console.log("🛑 Cancelling connection attempt!");
    this.connection.setState(new DisconnectedState(this.connection));
  }
  
  async sendData(data: string): Promise<void> {
    console.log("⏳ Cannot send data - still connecting!");
  }
}

// ✅ Connected state
class ConnectedState implements ConnectionState {
  constructor(private connection: NetworkConnection) {}
  
  async connect(): Promise<void> {
    console.log("📡 Already connected!");
  }
  
  async disconnect(): Promise<void> {
    console.log("🔌 Disconnecting...");
    await new Promise(resolve => setTimeout(resolve, 500));
    console.log("👋 Disconnected!");
    this.connection.setState(new DisconnectedState(this.connection));
  }
  
  async sendData(data: string): Promise<void> {
    console.log(`📤 Sending: "${data}"`);
    await new Promise(resolve => setTimeout(resolve, 300));
    console.log("✅ Data sent successfully!");
  }
}

// 🎮 Let's test async states!
const network = new NetworkConnection();
(async () => {
  await network.sendData("Hello");     // ❌ Cannot send data - not connected!
  await network.connect();             // 🔄 Connecting... ✅ Connected successfully!
  await network.sendData("Hello!");    // 📤 Sending: "Hello!" ✅ Data sent successfully!
  await network.disconnect();          // 🔌 Disconnecting... 👋 Disconnected!
})();

⚠️ Common Pitfalls and Solutions

❌ Wrong: State logic in context

// ❌ BAD: Context knows too much about states
class BadPlayer {
  private state: string = "stopped";
  
  play(): void {
    if (this.state === "stopped") {
      console.log("Playing...");
      this.state = "playing";
    } else if (this.state === "paused") {
      console.log("Resuming...");
      this.state = "playing";
    } else {
      console.log("Already playing!");
    }
  }
  
  // 😱 This gets messy fast!
}

✅ Correct: Encapsulated state behavior

// ✅ GOOD: States handle their own logic
class GoodPlayer {
  private state: PlayerState;
  
  constructor() {
    this.state = new StoppedState(this);
  }
  
  setState(state: PlayerState): void {
    this.state = state;
  }
  
  play(): void {
    this.state.play(); // 🎯 Delegate to state!
  }
}

❌ Wrong: Forgetting state transitions

// ❌ BAD: State doesn't transition
class BrokenState implements PlayerState {
  play(): void {
    console.log("Playing!");
    // 😱 Forgot to change state!
  }
  
  pause(): void {
    console.log("Can't pause!");
  }
  
  stop(): void {
    console.log("Can't stop!");
  }
}

✅ Correct: Proper state transitions

// ✅ GOOD: States transition properly
class WorkingState implements PlayerState {
  constructor(private player: MusicPlayer) {}
  
  play(): void {
    console.log("▶️ Playing!");
    this.player.setState(new PlayingState(this.player)); // 🎯 Transition!
  }
  
  pause(): void {
    console.log("⚠️ Can't pause from this state");
  }
  
  stop(): void {
    console.log("⏹️ Stopping!");
    this.player.setState(new StoppedState(this.player)); // 🎯 Transition!
  }
}

🛠️ Best Practices

1. Keep States Focused 🎯

Each state should have a single responsibility and clear transitions.

2. Use Type Safety 💪

Leverage TypeScript’s type system to ensure all states implement required methods.

3. Document State Transitions 📝

Create clear documentation or diagrams showing how states transition.

4. Consider State History 📚

Sometimes you need to track previous states for undo/redo functionality.

5. Test State Transitions 🧪

Write tests that verify all possible state transitions work correctly.

// 🏆 Best practice example
abstract class BaseState implements PlayerState {
  constructor(protected player: MusicPlayer) {}
  
  // 🎯 Default implementations
  play(): void {
    this.logInvalidAction("play");
  }
  
  pause(): void {
    this.logInvalidAction("pause");
  }
  
  stop(): void {
    this.logInvalidAction("stop");
  }
  
  protected logInvalidAction(action: string): void {
    console.log(`⚠️ Cannot ${action} from ${this.constructor.name}`);
  }
  
  // 🔄 Helper for transitions
  protected transitionTo(StateClass: new (player: MusicPlayer) => PlayerState): void {
    this.player.setState(new StateClass(this.player));
  }
}

// 🎵 Now states are cleaner!
class BetterPlayingState extends BaseState {
  pause(): void {
    console.log("⏸️ Pausing!");
    this.transitionTo(PausedState);
  }
  
  stop(): void {
    console.log("⏹️ Stopping!");
    this.transitionTo(StoppedState);
  }
}

🧪 Hands-On Exercise

Create a traffic light system with proper state management! 🚦

Requirements:

Three states: Red, Yellow, Green
Proper transitions: Red → Green → Yellow → Red
Timer-based automatic transitions
Manual override for emergencies

Your challenge:

// 🎯 Your task: Implement a traffic light system!
interface TrafficLightState {
  // What methods should go here? 🤔
}

class TrafficLight {
  // Implement the context! 💪
}

// Implement the states! 🚦

💡 Click here for the solution!

// 🚦 Traffic light implementation
interface TrafficLightState {
  enter(): void;
  exit(): void;
  next(): void;
  emergency(): void;
}

class TrafficLight {
  private state: TrafficLightState;
  private timer?: NodeJS.Timeout;
  
  constructor() {
    this.state = new RedLight(this);
    this.state.enter();
  }
  
  setState(state: TrafficLightState): void {
    this.state.exit();
    this.state = state;
    this.state.enter();
  }
  
  setTimer(callback: () => void, duration: number): void {
    this.clearTimer();
    this.timer = setTimeout(callback, duration);
  }
  
  clearTimer(): void {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = undefined;
    }
  }
  
  // 🎯 Public methods
  next(): void {
    this.state.next();
  }
  
  emergency(): void {
    this.state.emergency();
  }
}

// 🔴 Red light state
class RedLight implements TrafficLightState {
  constructor(private light: TrafficLight) {}
  
  enter(): void {
    console.log("🔴 RED - Stop! Cars must wait");
    this.light.setTimer(() => this.next(), 3000);
  }
  
  exit(): void {
    console.log("Leaving red state...");
  }
  
  next(): void {
    this.light.setState(new GreenLight(this.light));
  }
  
  emergency(): void {
    console.log("🚨 Emergency! Staying RED for safety!");
    this.light.clearTimer();
  }
}

// 🟢 Green light state
class GreenLight implements TrafficLightState {
  constructor(private light: TrafficLight) {}
  
  enter(): void {
    console.log("🟢 GREEN - Go! Cars can proceed");
    this.light.setTimer(() => this.next(), 3000);
  }
  
  exit(): void {
    console.log("Leaving green state...");
  }
  
  next(): void {
    this.light.setState(new YellowLight(this.light));
  }
  
  emergency(): void {
    console.log("🚨 Emergency! Switching to YELLOW!");
    this.light.setState(new YellowLight(this.light));
  }
}

// 🟡 Yellow light state
class YellowLight implements TrafficLightState {
  constructor(private light: TrafficLight) {}
  
  enter(): void {
    console.log("🟡 YELLOW - Caution! Prepare to stop");
    this.light.setTimer(() => this.next(), 1000);
  }
  
  exit(): void {
    console.log("Leaving yellow state...");
  }
  
  next(): void {
    this.light.setState(new RedLight(this.light));
  }
  
  emergency(): void {
    console.log("🚨 Emergency! Going to RED!");
    this.light.setState(new RedLight(this.light));
  }
}

// 🎮 Test the traffic light!
const trafficLight = new TrafficLight();
// 🔴 RED - Stop! Cars must wait
// ... auto transitions happen with timers

// Manual control
trafficLight.next();      // Forces next state
trafficLight.emergency(); // Emergency override!

Great job! You’ve implemented a fully functional traffic light system! 🎉

🎓 Key Takeaways

You’ve mastered the State Pattern! Here’s what you learned:

🎯 State Pattern encapsulates behavior based on object state
🔄 States handle their own transitions keeping logic organized
💪 TypeScript interfaces ensure all states implement required methods
🎨 Clean separation of concerns makes code maintainable
🚀 Async states are possible for real-world applications

The State Pattern transforms complex conditional logic into elegant, maintainable code. No more massive switch statements or if-else chains! 🎉

🤝 Next Steps

Congratulations on mastering the State Pattern! 🏆 You’ve added a powerful tool to your TypeScript toolkit.

Ready for more patterns? Check out:

📘 Strategy Pattern - Choose algorithms at runtime
📘 Command Pattern - Encapsulate requests as objects
📘 Observer Pattern - Subscribe to state changes

Keep practicing with real projects – maybe build a game character system or a workflow engine! The possibilities are endless! 💪

Remember: Great code isn’t just about making it work; it’s about making it elegant, maintainable, and fun to work with! Happy coding! 🚀✨

📘 State Pattern: Behavioral States

Prerequisites

What you'll learn

📘 State Pattern: Behavioral States

🎯 Introduction

📚 Understanding State Pattern

Core Components:

🔧 Basic Syntax and Usage

💡 Practical Examples

Example 1: Smart Door Lock 🚪

Example 2: Vending Machine 🥤

🚀 Advanced Concepts

State with Context Data 📊

Async State Transitions 🔄

⚠️ Common Pitfalls and Solutions

❌ Wrong: State logic in context

✅ Correct: Encapsulated state behavior

❌ Wrong: Forgetting state transitions

✅ Correct: Proper state transitions

🛠️ Best Practices

1. Keep States Focused 🎯

2. Use Type Safety 💪

3. Document State Transitions 📝

4. Consider State History 📚

5. Test State Transitions 🧪

🧪 Hands-On Exercise

🎓 Key Takeaways

🤝 Next Steps

More typescript Tutorials

📘 Observer Pattern: Event Subscription

📘 State Pattern: Behavioral States

📘 Strategy Pattern: Algorithm Selection

Tutorial Info