Memento Design Pattern

Structural: Memento Pattern

---

Can you explain the memento design pattern?

View Answer:

Interview Response: We use the memento pattern to store and restore an object temporarily. The technology used to store the object's state gets determined by the needed persistence period, which can vary.

Code Example:

The objects participating in this pattern are:

Originator -- example code: Person

• implements interface to create and restore mementos of itself -- in example code: hydrate and dehydrate
• the object whose state is temporary being saved and restored

Memento -- example code: JSON representation of Person

• the internal state of the Originator object in some storage format

CareTaker -- In example code: CareTaker

• responsible for storing mementos
• just a repository; it does not make changes to mementos

let Person = function (name, street, city, state) {
  this.name = name;
  this.street = street;
  this.city = city;
  this.state = state;
};

Person.prototype = {
  hydrate: function () {
    let memento = JSON.stringify(this);
    return memento;
  },

  dehydrate: function (memento) {
    let m = JSON.parse(memento);
    this.name = m.name;
    this.street = m.street;
    this.city = m.city;
    this.state = m.state;
  },
};

let CareTaker = function () {
  this.mementos = {};

  (this.add = function (key, memento) {
    this.mementos[key] = memento;
  }),
    (this.get = function (key) {
      return this.mementos[key];
    });
};

function run() {
  var mike = new Person('Mike Foley', '1112 Main', 'Dallas', 'TX');
  var john = new Person('John Wang', '48th Street', 'San Jose', 'CA');
  var caretaker = new CareTaker();

  // save state

  caretaker.add(1, mike.hydrate());
  caretaker.add(2, john.hydrate());

  // mess up their names

  mike.name = 'King Kong';
  john.name = 'Superman';

  // restore original state

  mike.dehydrate(caretaker.get(1));
  john.dehydrate(caretaker.get(2));

  console.log(mike.name);
  console.log(john.name);
}

run();

/*

OUTPUT:

Mike Foley
John Wang

*/

---

The Memento pattern belongs to which pattern category?

View Answer:

Interview Response: The Memento pattern is a type of behavioral design pattern.

---

What is a suitable JavaScript use case for the Memento Pattern?

View Answer:

Interview Response: We can use the Memento pattern to create snapshots of an object's state to restore it to a previous state.

The Memento pattern allows you to create complete copies of an object's state, including private fields, and store them independently from the object. While most people remember this pattern because of the "undo" use case, it's also helpful when dealing with transactions (i.e., if you need to roll back an operation on an error).

We can also use this pattern when direct access to an object's fields/getters/setters violates its encapsulation. The Memento makes the object responsible for capturing a snapshot of its current state. Because no other object can read the snapshot, the original object's state data remains safe and secure.

---

What are some of the advantages of employing the Memento pattern?

View Answer:

Interview Response: Benefits of the Memento Pattern

• Without breaking the object's encapsulation, you can take snapshots of its state.
• You can simplify the originator's code by allowing the caretaker to keep track of the originator's state history.

---

What are some of the Memento pattern's drawbacks?

View Answer:

Interview Response: Drawbacks of the Memento Pattern.

• If clients frequently create mementos, the program may consume a large amount of RAM/memory.
• To be able to destroy outmoded keepsakes, caregivers should track the originator's lifecycle.
• Most dynamic programming languages, such as JavaScript, cannot guarantee that the Memento's state remains unchanged.

---