I'll Be Backend
Principles · TypeScript

Abstraction: hide the data structure

Change how a class stores its data without touching the code that uses it.

12 steps4 chapters~4 min at 1.25×#oop#abstraction#data structure#private fields
The lesson plays right here. Pause anywhere, step back, or jump to a step below. Watch the TypeScript video on YouTube Code on GitHub

Watch the narrated video

Every step

Problem

Steps 1–3

Refactor

Steps 4–8

Payoff

Steps 9–10

Recap

Steps 11–12

The code: before and after

Before

class Warehouse {
  public stock = new Map<string, number>();
}

class Receiving {
  receive(w: Warehouse, sku: string, qty: number): void {
    w.stock.set(sku, (w.stock.get(sku) ?? 0) + qty);
  }
}

class Picking {
  pick(w: Warehouse, sku: string, qty: number): void {
    const have = w.stock.get(sku) ?? 0;
    if (have >= qty) {
      w.stock.set(sku, have - qty);
    }
  }
}

class Report {
  line(w: Warehouse, sku: string): string {
    const left = w.stock.get(sku) ?? 0;
    return `${sku}: ${left}`;
  }
}

function shop(): string[] {
  const w = new Warehouse();
  const lines: string[] = [];
  new Receiving().receive(w, "TEA-1", 20);
  new Receiving().receive(w, "TEA-1", 10);
  new Picking().pick(w, "TEA-1", 15);
  lines.push(new Report().line(w, "TEA-1")); // TEA-1: 15
  return lines;
}

After

class Warehouse {
  readonly #stock = new Map<string, number[]>();

  receive(sku: string, qty: number): void {
    const queue = this.#stock.get(sku) ?? [];
    this.#stock.set(sku, [...queue, qty]);
  }

  pick(sku: string, qty: number): boolean {
    if (this.quantity(sku) < qty) {
      return false;
    }
    const queue = this.#stock.get(sku) ?? [];
    while (qty > 0) {
      const used = Math.min(queue[0], qty);
      queue[0] -= used;
      if (queue[0] === 0) {
        queue.shift();
      }
      qty -= used;
    }
    return true;
  }

  quantity(sku: string): number {
    const queue = this.#stock.get(sku) ?? [];
    return queue.reduce((sum, n) => sum + n, 0);
  }

  deliveries(sku: string): readonly number[] {
    return [...(this.#stock.get(sku) ?? [])];
  }
}

class Receiving {
  receive(w: Warehouse, sku: string, qty: number): void {
    w.receive(sku, qty);
  }
}

class Picking {
  pick(w: Warehouse, sku: string, qty: number): void {
    w.pick(sku, qty);
  }
}

class Report {
  line(w: Warehouse, sku: string): string {
    const left = w.quantity(sku);
    return `${sku}: ${left}`;
  }
}

function shop(): string[] {
  const w = new Warehouse();
  const lines: string[] = [];
  new Receiving().receive(w, "TEA-1", 20);
  new Receiving().receive(w, "TEA-1", 10);
  new Picking().pick(w, "TEA-1", 15);
  lines.push(new Report().line(w, "TEA-1")); // TEA-1: 15
  lines.push(w.deliveries("TEA-1").join(", ")); // 5, 10
  return lines;
}

Transcript, step by step

Problem

Step 1: A shop's warehouse stock Before

A small shop's warehouse keeps its stock in a public map, from product code to quantity. Receiving adds a delivery to the map, Picking takes items out when there are enough, and Report builds a line with what's left. Two deliveries of tea come in, 20 and then 10, and after 15 are picked, the report line says 15.

Step 2: Oldest delivery first Code smell

The tea goes stale, so picking must take the oldest delivery first, and ops need the stock kept per delivery. The quick way turns each value in the map into an array of delivery quantities, used as a queue. Receiving now appends to the array, and Picking sums it, then takes from the front in a loop. Report sums the queue too, and the run still says 15.

Step 3: Every caller knows the map Code smell

Every caller works on the map directly, so each one depends on how the warehouse stores its stock. Receiving uses the map here, Picking here, and the report here. One change to the storage meant rewriting three classes that only wanted to receive, pick and count. The sum over the queue now exists twice, written with reduce in Picking and with a loop in Report. And when the stock moves to a database next year, all three get rewritten again.

Refactor

Step 4: Refactor first Back it out

Let's take the queue out again. We'll refactor first, so that the warehouse owns its stock, and then we'll change the storage in one place.

Step 5: Receive moves in Move Method

First, the read and the set move into Warehouse, as a method called receive. Receiving now calls receive on the warehouse, and it no longer touches the map.

Step 6: Pick moves in Move Method

The check and the set move in next, as pick, which returns true when there was enough stock. Picking calls pick on the warehouse, and the run still says 15.

Step 7: Quantity moves in Move Method

The lookup moves in last, as quantity, which returns zero for a product the warehouse has never seen. Report asks the warehouse for the quantity, and then builds its line.

Step 8: Make the map private Encapsulate Collection

No caller touches the map any more, so it becomes a private field with a hash mark, and both the compiler and the runtime stop code outside Warehouse from reaching it. That's abstraction, where callers use what the warehouse does, receive, pick and quantity, and never see how it stores the stock. Encapsulation hides a single field, and abstraction goes one step further, because it hides how a whole collection is stored.

Payoff

Step 9: Keep stock per delivery Substitute Algorithm

Now the change request comes back, and this time it stays inside Warehouse. The private map now holds an array of deliveries per product, and receive appends to it. Quantity sums the queue, and pick checks the quantity, then takes from the oldest delivery first. Each method keeps its signature and gets a new body, and that move is called Substitute Algorithm. Receiving, Picking and Report didn't change, and the shop function gains one line that lists the deliveries.

Step 10: One class knows the storage Payoff

The map calls are gone from the callers, so Receiving calls receive here, Picking calls pick here, and Report calls quantity here. The sum over the queue is written once, in quantity, and pick reuses it for its check. The 15 picked came out of the oldest delivery of 20, so 5 of that one are left, next to the newer 10. The three callers depend only on receive, pick and quantity, so changing how Warehouse stores the stock stayed inside Warehouse.

Recap

Step 11: Where we started, where we ended Before / after

On the left, the stock is a public map, and Receiving, Picking and Report each call map methods on it. On the right, the map is private and holds a queue per product, behind receive, pick and quantity. A caller like Picking makes one call, and the warehouse decides which delivery the items come from.

Step 12: When to reach for it Takeaways

Reach for it when several classes read or change one collection, and the way it's stored may change. Skip it when one short function owns the map and nothing outside reads it, because methods around it add lines and hide nothing. You'll spot the need by get, set or push on another object's collection, or by the same lookup copied into several classes. The built-in Map works this way too, because you call set and get, and it never shows you how it stores the entries.