JavaScript Design Patterns - Behavioral - Memento

#programming #javascript #beginners

The memento pattern allows capture and externalizes an object’s internal state so that the object can be restored to this state later.

In the example below, we are creating a simple way to store values and restore a snapshot when needed.

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

const originator = {
  store: function (val) {
    return new Memento(val);
  },
  restore: function (memento) {
    return memento.value;
  },
};

class Keeper {
  constructor() {
    this.values = [];
  }

  addMemento(memento) {
    this.values.push(memento);
  }

  removeMemento(index) {
    this.values.splice(index, 1);
  }

  getMemento(index) {
    return this.values[index];
  }

  toString() {
    return `[ ${this.values
      .reduce((acc, cur) => {
        acc.push(cur.value);
        return acc;
      }, [])
      .join(', ')} ]`;
  }
}

export { originator, Keeper };

A complete example is here: https://stackblitz.com/edit/vitejs-vite-7mnwye?file=main.js

👉 Use this pattern when you want to produce snapshots of the object’s state to restore a previous state of the object.

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Hashnode: https://nhannguyen.hashnode.dev/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo