Memento Pattern

import CodeBlock from '@/components/mdx/CodeBlock'
import Tip from '@/components/mdx/Tip'
import Terminal from '@/components/mdx/Terminal'
import OutputBlock from '@/components/mdx/OutputBlock'

export const meta = { title: 'Memento Pattern', description: 'Allowing an object to restore its previous state without revealing its internal structure.', lastUpdated: '2026-05-15', readTime: '10 min read', order: 25 }

# Memento Pattern

## Introduction

In the realm of software design, patterns provide solutions to common problems encountered during development. One such pattern is the **Memento Pattern**, which allows an object to restore its previous state without revealing its internal structure. This pattern is particularly useful in scenarios where you need to maintain a history of states and revert back to any specific state when required.

## Concept

The Memento Pattern involves three main components:

1. **Originator**: The object that knows how to create a memento containing its current state.
2. **Memento**: A passive data structure that stores the internal state of the originator. It should not expose this information to other objects.
3. **Caretaker**: An object that is responsible for keeping track of multiple mementos and managing their lifecycle.

The key idea behind the Memento Pattern is to encapsulate the state of an object within a separate object (memento) and provide methods to save and restore this state without exposing the internal details of the originator.

## Examples

Let's illustrate the Memento Pattern with a practical example. Suppose we have a simple text editor application that allows users to edit text and undo their changes. We'll use the Memento Pattern to implement this functionality.

### Step 1: Define the Originator

The `TextEditor` class will act as the originator. It will be responsible for creating mementos of its current state and restoring from a memento.

```javascript
class TextEditor {
    constructor() {
        this.content = '';
    }

    // Method to create a memento
    save() {
        return new Memento(this.content);
    }

    // Method to restore from a memento
    restore(memento) {
        this.content = memento.getContent();
    }

    // Method to edit the content
    edit(text) {
        this.content += text;
    }

    // Method to display the current content
    showContent() {
        console.log(this.content);
    }
}

Step 2: Define the Memento

The Memento class will store the state of the TextEditor.

class Memento {
    constructor(content) {
        this.content = content;
    }

    // Method to get the stored content
    getContent() {
        return this.content;
    }
}

Step 3: Define the Caretaker

The History class will act as the caretaker, managing a list of mementos.

class History {
    constructor() {
        this.mementos = [];
    }

    // Method to add a memento to history
    push(memento) {
        this.mementos.push(memento);
    }

    // Method to get the last memento from history
    pop() {
        return this.mementos.pop();
    }
}

Step 4: Implementing the Application

Now, let's put everything together and see how we can use these classes to implement a simple text editor with undo functionality.

const editor = new TextEditor();
const history = new History();

// Initial content
editor.edit('Hello');
editor.showContent(); // Output: Hello

// Save current state
history.push(editor.save());

// Edit more
editor.edit(', World!');
editor.showContent(); // Output: Hello, World!

// Undo last action
editor.restore(history.pop());
editor.showContent(); // Output: Hello

Explanation

1. Originator (TextEditor): The TextEditor class has methods to edit content and create/restore mementos.
2. Memento (Memento): The Memento class stores the content of the text editor at a specific point in time.
3. Caretaker (History): The History class manages a list of mementos, allowing us to save and revert states.

By using the Memento Pattern, we can easily implement undo functionality without exposing the internal state of the text editor to other parts of the application.

What's Next?

In the next section, we will explore another behavioral pattern called the Observer Pattern. The Observer Pattern is used to create a subscription mechanism to allow multiple objects to listen for specific events and update themselves accordingly. Stay tuned!