📘 Memento Pattern: State Snapshots

🎯 Introduction

Welcome to this exciting tutorial on the Memento Pattern! 🎉 In this guide, we’ll explore how to capture and restore object states like a time machine for your code.

You’ll discover how the Memento Pattern can transform your TypeScript applications by providing undo/redo functionality, checkpoints, and state history. Whether you’re building text editors 📝, games 🎮, or complex applications 🌐, understanding the Memento Pattern is essential for managing state changes gracefully.

By the end of this tutorial, you’ll feel confident implementing state snapshots in your own projects! Let’s dive in! 🏊‍♂️

📚 Understanding Memento Pattern

🤔 What is the Memento Pattern?

The Memento Pattern is like taking a photograph 📸 of your application’s state at a specific moment. Think of it as creating save points in a video game 🎮 that let you return to a previous state whenever you need.

In TypeScript terms, the Memento Pattern allows you to capture an object’s internal state without violating encapsulation, enabling you to restore the object to this state later. This means you can:

✨ Implement undo/redo functionality
🚀 Create checkpoints in complex operations
🛡️ Recover from errors by restoring previous states

💡 Why Use the Memento Pattern?

Here’s why developers love the Memento Pattern:

State History 🔒: Keep track of object state changes over time
Encapsulation 💻: Preserve object boundaries while saving state
Recovery Mechanism 📖: Easily restore to previous states
Debugging Power 🔧: Trace through state changes to find issues

Real-world example: Imagine building a drawing app 🎨. With the Memento Pattern, users can undo their brush strokes and return to any previous version of their artwork!

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly example:

// 👋 Hello, Memento Pattern!
interface Memento {
  getState(): string;
}

// 🎨 Creating a simple text editor
class TextEditor {
  private content: string = "";
  
  // ✏️ Type some text
  type(text: string): void {
    this.content += text;
    console.log(`📝 Current content: "${this.content}"`);
  }
  
  // 📸 Save current state
  save(): Memento {
    return new TextMemento(this.content);
  }
  
  // 🔄 Restore from memento
  restore(memento: Memento): void {
    this.content = memento.getState();
    console.log(`↩️ Restored to: "${this.content}"`);
  }
}

// 💾 Memento implementation
class TextMemento implements Memento {
  constructor(private state: string) {}
  
  getState(): string {
    return this.state;
  }
}

💡 Explanation: Notice how the TextMemento stores the state privately and provides a clean interface to retrieve it. The TextEditor can save and restore its state without exposing its internals!

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: Caretaker manages mementos
class History {
  private mementos: Memento[] = [];
  private currentIndex: number = -1;
  
  // 📥 Add new state
  push(memento: Memento): void {
    this.currentIndex++;
    this.mementos = this.mementos.slice(0, this.currentIndex);
    this.mementos.push(memento);
    console.log(`💾 Saved state #${this.currentIndex}`);
  }
  
  // ↩️ Undo operation
  undo(): Memento | null {
    if (this.currentIndex > 0) {
      this.currentIndex--;
      return this.mementos[this.currentIndex];
    }
    return null;
  }
  
  // ↪️ Redo operation
  redo(): Memento | null {
    if (this.currentIndex < this.mementos.length - 1) {
      this.currentIndex++;
      return this.mementos[this.currentIndex];
    }
    return null;
  }
}

💡 Practical Examples

🛒 Example 1: Shopping Cart with History

Let’s build something real:

// 🛍️ Product type
interface Product {
  id: string;
  name: string;
  price: number;
  emoji: string;
}

// 💾 Cart state memento
interface CartMemento {
  getItems(): Product[];
  getTimestamp(): Date;
}

class CartSnapshot implements CartMemento {
  private items: Product[];
  private timestamp: Date;
  
  constructor(items: Product[]) {
    this.items = [...items]; // 🎯 Deep copy!
    this.timestamp = new Date();
  }
  
  getItems(): Product[] {
    return [...this.items]; // 🛡️ Return copy
  }
  
  getTimestamp(): Date {
    return this.timestamp;
  }
}

// 🛒 Shopping cart with history
class ShoppingCart {
  private items: Product[] = [];
  private history: CartSnapshot[] = [];
  
  // ➕ Add item
  addItem(product: Product): void {
    this.saveSnapshot();
    this.items.push(product);
    console.log(`✅ Added ${product.emoji} ${product.name}`);
  }
  
  // ➖ Remove item
  removeItem(productId: string): void {
    this.saveSnapshot();
    const index = this.items.findIndex(item => item.id === productId);
    if (index > -1) {
      const removed = this.items.splice(index, 1)[0];
      console.log(`🗑️ Removed ${removed.emoji} ${removed.name}`);
    }
  }
  
  // 📸 Save current state
  private saveSnapshot(): void {
    this.history.push(new CartSnapshot(this.items));
  }
  
  // ↩️ Undo last action
  undo(): void {
    if (this.history.length > 0) {
      const snapshot = this.history.pop()!;
      this.items = snapshot.getItems();
      console.log(`↩️ Restored cart to ${snapshot.getTimestamp().toLocaleTimeString()}`);
    }
  }
  
  // 📋 Show cart
  showCart(): void {
    console.log("🛒 Current Cart:");
    this.items.forEach(item => {
      console.log(`  ${item.emoji} ${item.name} - $${item.price}`);
    });
    console.log(`💰 Total: $${this.getTotal()}`);
  }
  
  // 💰 Calculate total
  private getTotal(): number {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }
}

// 🎮 Let's use it!
const cart = new ShoppingCart();
cart.addItem({ id: "1", name: "TypeScript Book", price: 29.99, emoji: "📘" });
cart.addItem({ id: "2", name: "Coffee", price: 4.99, emoji: "☕" });
cart.showCart();
cart.removeItem("2");
cart.showCart();
cart.undo(); // Magic! ✨
cart.showCart();

🎯 Try it yourself: Add a redo method and a maximum history limit!

🎮 Example 2: Game State Manager

Let’s make it fun:

// 🎮 Game character state
interface GameState {
  health: number;
  mana: number;
  position: { x: number; y: number };
  inventory: string[];
  level: number;
}

// 💾 Game memento with metadata
class GameSnapshot {
  private state: GameState;
  private saveTime: Date;
  private saveName: string;
  
  constructor(state: GameState, name: string) {
    this.state = JSON.parse(JSON.stringify(state)); // Deep clone
    this.saveTime = new Date();
    this.saveName = name;
  }
  
  getState(): GameState {
    return JSON.parse(JSON.stringify(this.state));
  }
  
  getInfo(): string {
    return `💾 ${this.saveName} - ${this.saveTime.toLocaleString()}`;
  }
}

// 🏰 Game with save system
class RPGGame {
  private state: GameState = {
    health: 100,
    mana: 50,
    position: { x: 0, y: 0 },
    inventory: ["🗡️ Sword", "🛡️ Shield"],
    level: 1
  };
  
  private saves: Map<string, GameSnapshot> = new Map();
  private autosaves: GameSnapshot[] = [];
  private maxAutosaves = 3;
  
  // 🎯 Player actions
  takeDamage(amount: number): void {
    this.autosave();
    this.state.health = Math.max(0, this.state.health - amount);
    console.log(`💔 Took ${amount} damage! Health: ${this.state.health}`);
    
    if (this.state.health === 0) {
      console.log("☠️ Game Over! Use loadGame() to restore a save.");
    }
  }
  
  // 🎯 Move character
  move(x: number, y: number): void {
    this.state.position = { x, y };
    console.log(`🚶 Moved to (${x}, ${y})`);
  }
  
  // 🎒 Add item to inventory
  collectItem(item: string): void {
    this.autosave();
    this.state.inventory.push(item);
    console.log(`✨ Collected ${item}!`);
  }
  
  // 📈 Level up
  levelUp(): void {
    this.state.level++;
    this.state.health = 100;
    this.state.mana += 20;
    console.log(`🎉 Level ${this.state.level}! Full health restored!`);
  }
  
  // 💾 Manual save
  saveGame(saveName: string): void {
    this.saves.set(saveName, new GameSnapshot(this.state, saveName));
    console.log(`💾 Game saved as "${saveName}"`);
  }
  
  // 📂 Load save
  loadGame(saveName: string): void {
    const save = this.saves.get(saveName);
    if (save) {
      this.state = save.getState();
      console.log(`📂 Loaded save: ${save.getInfo()}`);
      this.showStatus();
    } else {
      console.log(`❌ Save "${saveName}" not found!`);
    }
  }
  
  // 🔄 Autosave
  private autosave(): void {
    this.autosaves.push(new GameSnapshot(this.state, "Autosave"));
    if (this.autosaves.length > this.maxAutosaves) {
      this.autosaves.shift();
    }
  }
  
  // 📊 Show game status
  showStatus(): void {
    console.log("🎮 Game Status:");
    console.log(`  ❤️ Health: ${this.state.health}/100`);
    console.log(`  💙 Mana: ${this.state.mana}`);
    console.log(`  📍 Position: (${this.state.position.x}, ${this.state.position.y})`);
    console.log(`  🎒 Inventory: ${this.state.inventory.join(", ")}`);
    console.log(`  ⭐ Level: ${this.state.level}`);
  }
  
  // 📋 List saves
  listSaves(): void {
    console.log("💾 Available Saves:");
    this.saves.forEach((save, name) => {
      console.log(`  ${save.getInfo()}`);
    });
  }
}

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Typed Memento with Generics

When you’re ready to level up, try this advanced pattern:

// 🎯 Generic memento interface
interface TypedMemento<T> {
  getState(): T;
  getMetadata(): MementoMetadata;
}

interface MementoMetadata {
  timestamp: Date;
  version: string;
  description?: string;
}

// 🪄 Advanced memento implementation
class VersionedMemento<T> implements TypedMemento<T> {
  private state: T;
  private metadata: MementoMetadata;
  
  constructor(state: T, description?: string) {
    this.state = this.deepClone(state);
    this.metadata = {
      timestamp: new Date(),
      version: "1.0.0",
      description
    };
  }
  
  getState(): T {
    return this.deepClone(this.state);
  }
  
  getMetadata(): MementoMetadata {
    return { ...this.metadata };
  }
  
  private deepClone(obj: T): T {
    return JSON.parse(JSON.stringify(obj));
  }
}

// 🚀 Advanced state manager
class StateManager<T> {
  private current: T;
  private history: TypedMemento<T>[] = [];
  private future: TypedMemento<T>[] = [];
  
  constructor(initialState: T) {
    this.current = initialState;
  }
  
  // 📸 Save with description
  checkpoint(description?: string): void {
    this.future = []; // Clear redo stack
    this.history.push(new VersionedMemento(this.current, description));
    console.log(`📸 Checkpoint created: ${description || "No description"}`);
  }
  
  // ↩️ Undo with info
  undo(): boolean {
    const memento = this.history.pop();
    if (memento) {
      this.future.push(new VersionedMemento(this.current));
      this.current = memento.getState();
      console.log(`↩️ Restored: ${memento.getMetadata().description}`);
      return true;
    }
    return false;
  }
  
  // ↪️ Redo with info
  redo(): boolean {
    const memento = this.future.pop();
    if (memento) {
      this.history.push(new VersionedMemento(this.current));
      this.current = memento.getState();
      console.log(`↪️ Redone: ${memento.getMetadata().description}`);
      return true;
    }
    return false;
  }
  
  // 🎯 Get current state
  getState(): T {
    return this.current;
  }
  
  // 📊 History info
  getHistoryInfo(): void {
    console.log(`📊 History: ${this.history.length} states`);
    console.log(`📊 Future: ${this.future.length} states`);
  }
}

🏗️ Advanced Topic 2: Differential Memento

For the brave developers:

// 🚀 Store only differences for efficiency
interface DiffMemento<T> {
  applyForward(state: T): T;
  applyBackward(state: T): T;
}

class DifferentialMemento<T extends object> implements DiffMemento<T> {
  private forwardDiff: Partial<T>;
  private backwardDiff: Partial<T>;
  
  constructor(oldState: T, newState: T) {
    this.forwardDiff = this.calculateDiff(oldState, newState);
    this.backwardDiff = this.calculateDiff(newState, oldState);
  }
  
  applyForward(state: T): T {
    return { ...state, ...this.forwardDiff };
  }
  
  applyBackward(state: T): T {
    return { ...state, ...this.backwardDiff };
  }
  
  private calculateDiff(from: T, to: T): Partial<T> {
    const diff: Partial<T> = {};
    for (const key in to) {
      if (from[key] !== to[key]) {
        diff[key] = to[key];
      }
    }
    return diff;
  }
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Shallow Copy Trap

// ❌ Wrong way - shallow copy shares references!
class BadMemento {
  constructor(private state: any[]) {}
  
  getState(): any[] {
    return this.state; // 💥 Same reference!
  }
}

// ✅ Correct way - deep copy for safety!
class GoodMemento {
  private state: any[];
  
  constructor(state: any[]) {
    this.state = JSON.parse(JSON.stringify(state)); // 🛡️ Deep copy
  }
  
  getState(): any[] {
    return JSON.parse(JSON.stringify(this.state)); // ✅ Return copy
  }
}

🤯 Pitfall 2: Memory Leaks

// ❌ Dangerous - unlimited history!
class MemoryLeaker {
  private history: any[] = [];
  
  save(state: any): void {
    this.history.push(state); // 💥 Grows forever!
  }
}

// ✅ Safe - limited history!
class MemoryFriendly {
  private history: any[] = [];
  private maxHistory = 50;
  
  save(state: any): void {
    this.history.push(state);
    if (this.history.length > this.maxHistory) {
      this.history.shift(); // ✅ Remove oldest
    }
  }
}

🛠️ Best Practices

🎯 Encapsulation First: Never expose internal state directly
📝 Deep Copy Always: Prevent accidental state mutations
🛡️ Limit History Size: Avoid memory issues in long-running apps
🎨 Metadata Matters: Store context with your mementos
✨ Immutability Rules: Treat saved states as read-only

🧪 Hands-On Exercise

🎯 Challenge: Build a Drawing App with Undo/Redo

Create a type-safe drawing application:

📋 Requirements:

✅ Support drawing shapes (circles, rectangles, lines)
🏷️ Each shape has position, size, and color
👤 Unlimited undo/redo functionality
📅 Save named snapshots
🎨 Each shape needs an emoji identifier!

🚀 Bonus Points:

Add shape grouping
Implement selective undo
Create a timeline view

💡 Solution

🔍 Click to see solution

// 🎯 Our type-safe drawing system!
interface Shape {
  id: string;
  type: "circle" | "rectangle" | "line";
  position: { x: number; y: number };
  size: { width: number; height: number };
  color: string;
  emoji: string;
}

interface CanvasMemento {
  getShapes(): Shape[];
  getDescription(): string;
}

class CanvasSnapshot implements CanvasMemento {
  private shapes: Shape[];
  private description: string;
  
  constructor(shapes: Shape[], description: string) {
    this.shapes = JSON.parse(JSON.stringify(shapes));
    this.description = description;
  }
  
  getShapes(): Shape[] {
    return JSON.parse(JSON.stringify(this.shapes));
  }
  
  getDescription(): string {
    return this.description;
  }
}

class DrawingCanvas {
  private shapes: Shape[] = [];
  private history: CanvasSnapshot[] = [];
  private currentIndex: number = -1;
  
  // 🎨 Add shape
  addShape(type: Shape["type"], x: number, y: number): void {
    this.saveState("Add " + type);
    
    const shape: Shape = {
      id: Date.now().toString(),
      type,
      position: { x, y },
      size: { width: 50, height: 50 },
      color: this.getRandomColor(),
      emoji: this.getShapeEmoji(type)
    };
    
    this.shapes.push(shape);
    console.log(`✅ Added ${shape.emoji} ${type} at (${x}, ${y})`);
  }
  
  // 🗑️ Remove shape
  removeShape(id: string): void {
    const shape = this.shapes.find(s => s.id === id);
    if (shape) {
      this.saveState(`Remove ${shape.type}`);
      this.shapes = this.shapes.filter(s => s.id !== id);
      console.log(`🗑️ Removed ${shape.emoji} ${shape.type}`);
    }
  }
  
  // 💾 Save current state
  private saveState(description: string): void {
    // Remove any states after current index
    this.history = this.history.slice(0, this.currentIndex + 1);
    
    // Add new state
    this.history.push(new CanvasSnapshot(this.shapes, description));
    this.currentIndex++;
    
    console.log(`💾 Saved: ${description}`);
  }
  
  // ↩️ Undo
  undo(): void {
    if (this.currentIndex > 0) {
      this.currentIndex--;
      const snapshot = this.history[this.currentIndex];
      this.shapes = snapshot.getShapes();
      console.log(`↩️ Undo: ${this.history[this.currentIndex + 1].getDescription()}`);
    } else {
      console.log("⚠️ Nothing to undo!");
    }
  }
  
  // ↪️ Redo
  redo(): void {
    if (this.currentIndex < this.history.length - 1) {
      this.currentIndex++;
      const snapshot = this.history[this.currentIndex];
      this.shapes = snapshot.getShapes();
      console.log(`↪️ Redo: ${snapshot.getDescription()}`);
    } else {
      console.log("⚠️ Nothing to redo!");
    }
  }
  
  // 📊 Show canvas
  showCanvas(): void {
    console.log("🎨 Canvas:");
    this.shapes.forEach(shape => {
      console.log(`  ${shape.emoji} ${shape.type} at (${shape.position.x}, ${shape.position.y})`);
    });
    console.log(`📊 Total shapes: ${this.shapes.length}`);
    console.log(`📚 History: ${this.currentIndex + 1}/${this.history.length}`);
  }
  
  // 🎲 Helper methods
  private getRandomColor(): string {
    const colors = ["red", "blue", "green", "yellow", "purple"];
    return colors[Math.floor(Math.random() * colors.length)];
  }
  
  private getShapeEmoji(type: Shape["type"]): string {
    const emojis = { circle: "⭕", rectangle: "🟦", line: "📏" };
    return emojis[type];
  }
}

// 🎮 Test it out!
const canvas = new DrawingCanvas();
canvas.addShape("circle", 10, 10);
canvas.addShape("rectangle", 50, 50);
canvas.addShape("line", 100, 100);
canvas.showCanvas();
canvas.undo();
canvas.showCanvas();
canvas.redo();
canvas.showCanvas();

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Create state snapshots with confidence 💪
✅ Implement undo/redo functionality like a pro 🛡️
✅ Manage state history efficiently 🎯
✅ Avoid common memory issues 🐛
✅ Build time-travel features with TypeScript! 🚀

Remember: The Memento Pattern is your time machine for state management. Use it wisely! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Memento Pattern!

Here’s what to do next:

💻 Practice with the drawing app exercise
🏗️ Add undo/redo to your current project
📚 Move on to our next tutorial: Observer Pattern
🌟 Share your time-traveling creations!

Remember: Every great app deserves a good undo button. Keep coding, keep learning, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn