Drills

1
2
3
4
5
6
7
8
9
10const bike = {
  make: 'Brompton',
  gears: 6,
  accessories: ['bell', 'front bag', 'lights'],
  frame: { material: 'steel' },
};

console.log(bike.make);
console.log(bike.accessories.length, 'accessories');
console.log(bike.frame.material);

1
2
3
4
5
6
7
8
9
10
11
12const original = { make: 'Brompton', frame: { material: 'steel' } };

// Spread copies one level, so frame would still be shared:
const shallow = { ...original };
shallow.frame.material = 'aluminium';
console.log('after shallow edit, original is:', original.frame.material);

// structuredClone copies all the way down.
const original2 = { make: 'Brompton', frame: { material: 'steel' } };
const deep = structuredClone(original2);
deep.frame.material = 'titanium';
console.log('after deep edit, original is:', original2.frame.material);

1
2
3
4
5
6
7
8
9const tally = {
  label: 'seats booked',
  count: 0,
  tick() { this.count++; return this; },
  reset() { this.count = 0; return this; },
  report() { console.log(this.label + ':', this.count); return this; },
};

tally.tick().tick().reset().tick().report();

1
2
3
4
5
6
7
8
9
10
11const record = {
  plate: 'LAG-441-XA',
  seatsLeft: 9,
  ready: true,
  describe() { return this.plate; },
};

for (const [key, value] of Object.entries(record)) {
  if (typeof value === 'function') continue;
  console.log(key, '=', value);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14const room = {
  name: 'Jibowu park',
  report() { return this?.name ?? 'no owner'; },
};

const loose = room.report;
const other = { name: 'Utako park', report: room.report };

console.log('1:', room.report());                  // Jibowu park
console.log('2:', other.report());                 // Utako park
console.log('3:', loose());                        // no owner
console.log('4:', [1].map(() => room.report())[0]); // wrap the call
console.log('4b:', [1].map(loose.bind(room))[0]);  // or bind it
console.log('5:', room.report.call({ name: 'park' }));  // park

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const park = {
  name: 'Okafor',
  buses: ['LAG-441-XA', 'ABJ-772-KM'],

  // A method needs its own `this`, so it must be a regular function.
  label() { return 'made at ' + this.name; },

  // A callback wants to borrow the method's `this`, so it must be an arrow.
  listing() {
    return this.buses.map(p => p + ' @ ' + this.name);
  },
};

console.log(park.label());
console.log(park.listing());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26function makeAccount(owner, opening) {
  if (opening < 0) throw new RangeError('Opening balance cannot be negative.');
  let balance = opening;

  return {
    owner,
    balance() { return balance; },
    deposit(n) {
      if (n <= 0) throw new RangeError('Deposit must be positive.');
      balance += n;
      return this;
    },
    withdraw(n) {
      if (n > balance) throw new RangeError('Balance is only ' + balance + '.');
      balance -= n;
      return this;
    },
  };
}

const acct = makeAccount('LAG-441-XA', 100);
acct.deposit(50).withdraw(30);
console.log('balance:', acct.balance());
console.log('own keys:', Object.keys(acct));
console.log('acct.balance is a function, not a number:', typeof acct.balance);
try { acct.withdraw(1000); } catch (err) { console.log('refused:', err.message); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22const ROWS = ['A', 'B', 'C', 'D'];

function makeSeat({ row, number, tier = 'luxury' }) {
  if (!ROWS.includes(row)) {
    throw new RangeError(`Row "${row}" does not exist. Rows are ${ROWS.join(', ')}.`);
  }
  if (!Number.isInteger(number) || number < 1 || number > 20) {
    throw new RangeError(`Seat number must be a whole number 1 to 20, got ${number}.`);
  }

  return {
    row,
    number,
    tier,
    get label() { return this.row + this.number; },
  };
}

console.log(makeSeat({ row: 'D', number: 12 }).label);
console.log(makeSeat({ row: 'A', number: 1, tier: 'economy' }));
try { makeSeat({ row: 'Z', number: 1 }); } catch (e) { console.log('refused:', e.message); }
try { makeSeat({ row: 'A', number: 99 }); } catch (e) { console.log('refused:', e.message); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17function Bus(plate, seatsLeft) {
  this.plate = plate;
  this.seatsLeft = seatsLeft;
}
Bus.prototype.describe = function () { return this.plate + '/' + this.seatsLeft; };

function construct(Ctor, ...args) {
  const obj = Object.create(Ctor.prototype);        // steps 1 and 2
  const result = Ctor.apply(obj, args);             // step 3
  return (typeof result === 'object' && result !== null) ? result : obj;  // step 4
}

const p = construct(Bus, 'LAG-441-XA', 9);
console.log('1 describe works :', p.describe());
console.log('2 instanceof     :', p instanceof Bus);
console.log('3 constructor    :', p.constructor === Bus);
console.log('4 own data only  :', Object.keys(p));

1
2
3
4
5
6
7
8
9
10
11
12
13
14function Stop(label, minutes) {
  this.label = label;
  this.minutes = minutes;
}

Stop.prototype.describe = function () { return this.label + ' @ ' + this.minutes + ' min'; };
Stop.prototype.delay = function (n) { this.minutes += n; return this; };

const a = new Stop('Ore', 90);
const b = new Stop('Lokoja', 240);

console.log(a.delay(3).describe());
console.log('shared?', a.describe === b.describe);
console.log('own keys:', Object.keys(a));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// 1: "LAG-441-XA (sienna)" — plate and kind both own, describe from the prototype
// 2: ["plate", "kind"] — only own properties
// 3: false / true — not own, but reachable up the chain
// 4: "LAG-441-XA (coaster)" — deleting the own copy reveals the inherited one
// 5: undefined — not found anywhere, and that is not an error

function Ride(plate) { this.plate = plate; }
Ride.prototype.kind = 'coaster';
Ride.prototype.describe = function () { return this.plate + ' (' + this.kind + ')'; };

const r = new Ride('LAG-441-XA');
r.kind = 'sienna';
console.log(r.describe());
delete r.kind;
console.log(r.describe());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17function Bus(plate) {
  this.plate = plate;
  this.faults = [];        // a fresh array per instance
}
Bus.prototype.report = function (what) { this.faults.push(what); return this; };

const a = new Bus('LAG-441-XA');
const b = new Bus('ABJ-772-KM');
a.report('cracked windscreen');

console.log('a:', a.faults);
console.log('b:', b.faults);
console.log('same array?', a.faults === b.faults);

// push() mutates the one shared array, so it was visible from every instance.
// Assigning this.faults = [...] inside a method would have created an own
// property, but only for whichever instance happened to be assigned to first.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23class Ticket {
  reserved = false;

  constructor(row, seat) {
    this.row = row;
    this.seat = seat;
  }

  get label() { return this.row + this.seat; }

  reserve() { this.reserved = true; return this; }
}

function makeTicket(row, seat) {
  return { row, seat, reserved: false, get label() { return this.row + this.seat; }, reserve() { this.reserved = true; return this; } };
}

const fromClass = new Ticket('D', 12);
const fromFactory = makeTicket('D', 12);

console.log(fromClass.label, fromClass.reserve().reserved);
console.log(fromFactory.label, fromFactory.reserve().reserved);
console.log('class keeps methods off the instance:', Object.keys(fromClass), 'vs', Object.keys(fromFactory));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32class Kit {
  parts = 0;                                   // public field
  #serial = 'K-001';                           // private field
  static made = 0;                             // static field

  constructor(name) {                          // constructor
    this.name = name;
    Kit.made++;
  }

  add(n) { this.parts += n; return this; }      // method

  get summary() { return `${this.name}: ${this.parts} parts`; }   // getter

  set summary(text) {                          // setter
    const [name, parts] = text.split(':');
    this.name = name.trim();
    this.parts = Number(parts);
  }

  static blank() { return new Kit('blank'); }   // static method

  stamp = () => `${this.name} #${this.#serial}`;  // arrow field, bound forever
}

const k = new Kit('luxury bus kit').add(12);
console.log(k.summary);
k.summary = 'rod kit: 5';
console.log(k.summary);
console.log(Kit.blank().summary, '| made:', Kit.made);
const loose = k.stamp;
console.log('arrow survives detachment:', loose());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30class Bus {
  #seatsLeft;
  #hasBookings = false;

  constructor(plate, seatsLeft) {
    this.plate = plate;
    this.#seatsLeft = seatsLeft;
  }

  get seatsLeft() { return this.#seatsLeft; }
  get hasBookings() { return this.#hasBookings; }

  book(n) {
    if (!Number.isInteger(n) || n < 1) throw new RangeError('Book a whole positive number.');
    if (n > this.#seatsLeft) throw new RangeError(`Only ${this.#seatsLeft} seats left.`);
    this.#seatsLeft -= n;
    this.#hasBookings = true;
    return this;
  }
}

const p = new Bus('LAG-441-XA', 9);
p.book(3);
console.log('seatsLeft:', p.seatsLeft, '| hasBookings:', p.hasBookings);

// There is no setter, so in strict mode the assignment throws outright.
try { p.seatsLeft = 1000; } catch (err) { console.log(err.name + ':', err.message); }
console.log('still:', p.seatsLeft);
console.log('nothing to see:', Object.keys(p), JSON.stringify(p));
try { p.book(99); } catch (err) { console.log('refused:', err.message); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19class Token {
  #brand = true;

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

  static isOne(value) {
    // A private field can only be present on an object this class constructed.
    return typeof value === 'object' && value !== null && #brand in value;
  }
}

const real = new Token('abc');
const fake = { value: 'abc' };
const subclassed = new (class extends Token {})('abc');

console.log('real       :', Token.isOne(real));
console.log('fake       :', Token.isOne(fake));
console.log('subclass   :', Token.isOne(subclassed));
console.log('naive check:', 'value' in fake);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26class Reading {
  #celsius = 0;

  get celsius() { return this.#celsius; }

  set celsius(value) {
    const n = Number(value);
    if (Number.isNaN(n)) throw new TypeError('Temperature must be a number.');
    if (n < -273.15) throw new RangeError(`${n}C is below absolute zero.`);
    this.#celsius = n;
  }

  get fahrenheit() { return this.#celsius * 9 / 5 + 32; }

  set fahrenheit(value) { this.celsius = (Number(value) - 32) * 5 / 9; }

  toString() { return `${this.#celsius}C / ${this.fahrenheit}F`; }
}

const r = new Reading();
r.celsius = 100;
console.log(r.fahrenheit);
r.fahrenheit = 32;
console.log(r.celsius);
console.log(String(r));
try { r.celsius = -300; } catch (err) { console.log('refused:', err.message); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17class Cart {
  #items = [];

  add(price) {
    if (typeof price !== 'number' || price <= 0) throw new RangeError('Price must be positive.');
    this.#items.push(price);
    return this;
  }

  get items() { return [...this.#items]; }        // a snapshot, not the original
  get count() { return this.#items.length; }
  get total() { return this.#items.reduce((n, p) => n + p, 0); }
}

const cart = new Cart().add(12).add(8);
cart.items.push(9999);                            // changes the snapshot only
console.log('items:', cart.items, '| total:', cart.total);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24class Ticket {
  static #next = 1;
  #id;

  constructor(row, seat) {
    this.row = row;
    this.seat = seat;
    this.#id = 'T-' + String(Ticket.#next++).padStart(3, '0');
  }

  get id() { return this.#id; }
  get label() { return this.row + this.seat; }

  static get issued() { return Ticket.#next - 1; }
  static reset() { Ticket.#next = 1; return Ticket; }

  toString() { return `${this.#id} ${this.label}`; }
}

console.log(String(new Ticket('D', 11)));
console.log(String(new Ticket('D', 12)));
console.log('issued:', Ticket.issued);
Ticket.reset();
console.log('after reset:', String(new Ticket('A', 1)));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17class Bus {
  constructor(plate) { this.plate = plate; }

  // `this` in a static method is the class the call was made on.
  static make(plate) { return new this(plate); }
}

class LuxuryBus extends Bus {
  get bar() { return 'airplane bar'; }
}

const p = Bus.make('ABJ-772-KM');
const m = LuxuryBus.make('LAG-441-XA');

console.log(p.constructor.name, p instanceof Bus);
console.log(m.constructor.name, m instanceof LuxuryBus, m instanceof Bus);
console.log('subclass features survive:', m.bar);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21class Stop {
  constructor(label, minutes) { this.label = label; this.minutes = minutes; }
  describe() { return this.label + ' at ' + this.minutes + ' min'; }
  checklist() { return ['confirm timing']; }
}

class RestStop extends Stop {
  constructor(label, minutes, facility) {
    super(label, minutes);
    this.facility = facility;
  }

  describe() { return `${super.describe()} [${this.facility}]`; }

  checklist() { return [...super.checklist(), 'check level', 'confirm output routing']; }
}

for (const c of [new Stop('Ore', 90), new RestStop('Ore', 90, 'canteen')]) {
  console.log(c.describe());
  console.log('  ', c.checklist().join(', '));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26class FullyBookedError extends Error {
  constructor(route, waiting) {
    super(`${route} is fully booked.`);
    this.name = 'FullyBookedError';
    this.route = route;
    this.waiting = waiting;
  }
}

function book(route, left) {
  if (typeof left !== 'number') throw new TypeError('left must be a number');
  if (left === 0) throw new FullyBookedError(route, 14);
  return 'booked ' + route;
}

for (const [route, left] of [['Lagos - Abuja', 2], ['Lagos - Kano', 0], ['Lagos - Jos', 'none']]) {
  try {
    console.log(book(route, left));
  } catch (err) {
    if (err instanceof FullyBookedError) {
      console.log(err.name + ':', err.message, '| waiting:', err.waiting);
    } else {
      console.log('unexpected, would rethrow:', err.name + ':', err.message);
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24class TicketLine {
  static PRICE = { luxury: 18000, economy: 12000 };
  constructor(tier, qty) { this.tier = tier; this.qty = qty; }
  cost() { return TicketLine.PRICE[this.tier] * this.qty; }
  toString() { return `${this.qty} x ${this.tier} seat`; }
}

class LuggageLine {
  constructor(qty) { this.qty = qty; }
  cost() { return 500 * this.qty; }
  toString() { return `${this.qty} x luggage`; }
}

class BookingFeeLine {
  cost() { return 200; }
  toString() { return 'booking fee'; }
}

const lines = [new TicketLine('luxury', 2), new LuggageLine(3), new BookingFeeLine()];

for (const line of lines) console.log(String(line).padEnd(22), '₦' + line.cost());
console.log('total:', '₦' + lines.reduce((n, l) => n + l.cost(), 0));

// A new line type is a new class. This loop never changes again.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27class Fleet {
  #members = [];

  add(name) { this.#members.push(name); return this; }

  get size() { return this.#members.length; }

  *[Symbol.iterator]() {
    for (const m of this.#members) yield m;
  }

  // A second, named iterator for a different view of the same data.
  *entries() {
    for (const [i, m] of this.#members.entries()) yield [i + 1, m];
  }
}

const fleet = new Fleet().add('LAG-441-XA').add('ABJ-772-KM').add('ENU-318-PH');

for (const member of fleet) console.log('for...of:', member);
console.log('spread:', [...fleet]);

const [first, second] = fleet;
console.log('destructured:', first, second);

for (const [position, name] of fleet.entries()) console.log(position + '.', name);
console.log('and the array is still private:', Object.keys(fleet));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29class Vehicle {
  static REQUIRED = ['load', 'checklist'];

  constructor(plate) {
    if (new.target === Vehicle) {
      throw new TypeError('Vehicle is abstract; extend it instead of constructing it.');
    }
    const missing = Vehicle.REQUIRED.filter(name => typeof this[name] !== 'function');
    if (missing.length) {
      throw new TypeError(
        `${new.target.name} is missing ${missing.join(' and ')}. ` +
        `Every Vehicle must implement ${Vehicle.REQUIRED.join(' and ')}.`
      );
    }
    this.plate = plate;
  }
}

class Good extends Vehicle {
  load() { return 'loaded'; }
  checklist() { return ['check the roof rack']; }
}
class Bad extends Vehicle {
  load() { return 'loaded'; }
}

console.log('good:', new Good('LAG-441-XA').load());
try { new Bad('ABJ-772-KM'); } catch (err) { console.log('refused:', err.message); }
try { new Vehicle('ENU-318-PH'); } catch (err) { console.log('refused:', err.message); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29class PostalCode {
  #text;
  constructor(text) { this.#text = text.toUpperCase(); }
  toString() { return this.#text; }
}

class Address {
  #postalCode;
  constructor(pc) { this.#postalCode = new PostalCode(pc); }
  get postalCode() { return String(this.#postalCode); }
}

class Customer {
  #address;
  constructor(name, pc) { this.name = name; this.#address = new Address(pc); }
  get postalCode() { return this.#address.postalCode; }
}

class Booking {
  #customer;
  constructor(customer) { this.#customer = customer; }

  get customerName() { return this.#customer.name; }
  get postalCode() { return this.#customer.postalCode; }
}

const b = new Booking(new Customer('LAG-441-XA', 'se1 9gf'));
console.log(b.customerName, '|', b.postalCode);
console.log('the chain is unreachable:', b.customer);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39class SeatPlan {
  #seatsLeft;
  constructor(seatsLeft) { this.#seatsLeft = seatsLeft; }
  get seatsLeft() { return this.#seatsLeft; }
  refit(n) {
    if (!Number.isInteger(n) || n < 1) throw new RangeError('Need a whole positive number.');
    this.#seatsLeft = n;
    return this;
  }
}

class Vehicle {
  #seatPlan;

  constructor(plate, seatPlan = null) {
    this.plate = plate;
    this.#seatPlan = seatPlan;
  }

  get numbered() { return this.#seatPlan !== null; }
  get seatPlan() {
    if (!this.#seatPlan) throw new Error(`${this.plate} has no seat plan.`);
    return this.#seatPlan;
  }

  describe() {
    return this.numbered
      ? `${this.plate}, ${this.#seatPlan.seatsLeft} numbered seats`
      : `${this.plate}, bench seating`;
  }
}

const fleet = [new Vehicle('LAG-441-XA', new SeatPlan(6)), new Vehicle('KAN-905-BD')];

for (const f of fleet) {
  if (f.numbered) f.seatPlan.refit(9);
  console.log(f.describe());
}
console.log('nothing threw, and nothing pretended to have seats it lacks');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34// A — Single responsibility. Data, formatting, email and disk are four reasons
// to change one file. Split them.
class Report {
  #rows;
  constructor(rows) { this.#rows = [...rows]; }
  get rows() { return [...this.#rows]; }
  get total() { return this.#rows.length; }
}
class CsvFormatter { format(report) { return report.rows.join(','); } }
class Mailer { send(to, body) { return `sending ${body.length} bytes to ${to}`; } }

const report = new Report(['D11', 'D12']);
console.log(new Mailer().send('box@park', new CsvFormatter().format(report)));

// B — Open/closed. Each new shape edits a working function. Make the shape
// answer for itself.
class Circle { constructor(r) { this.r = r; } get area() { return Math.PI * this.r ** 2; } }
class Square { constructor(s) { this.s = s; } get area() { return this.s ** 2; } }
const shapes = [new Circle(2), new Square(3)];
console.log('total area:', shapes.reduce((n, s) => n + s.area, 0).toFixed(2));

// C — Dependency inversion. The rate and the clock are welded in, so this class
// cannot be tested or reused. Inject them.
class Invoice {
  #rate; #now;
  constructor({ rate = 0.2, now = () => new Date().toISOString() } = {}) {
    this.#rate = rate;
    this.#now = now;
  }
  taxOn(naira) { return Math.round(naira * this.#rate); }
  get issuedAt() { return this.#now(); }
}
const fixed = new Invoice({ rate: 0.05, now: () => '2026-01-01T00:00:00.000Z' });
console.log(fixed.taxOn(1000), fixed.issuedAt);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48class Emitter {
  #listeners = new Map();

  on(event, fn) {
    if (typeof fn !== 'function') throw new TypeError('Listener must be a function.');
    if (!this.#listeners.has(event)) this.#listeners.set(event, new Set());
    this.#listeners.get(event).add(fn);
    return () => this.off(event, fn);
  }

  off(event, fn) {
    this.#listeners.get(event)?.delete(fn);
    return this;
  }

  emit(event, payload) {
    for (const fn of [...(this.#listeners.get(event) ?? [])]) {
      try { fn(payload); } catch (err) { console.log('listener threw:', err.message); }
    }
    return this;
  }

  get eventNames() { return [...this.#listeners.keys()]; }
}

class Trip extends Emitter {
  #sold = new Set();
  constructor(route, capacity) { super(); this.route = route; this.capacity = capacity; }
  book(seat) {
    this.#sold.add(seat);
    this.emit('booked', { seat, remaining: this.capacity - this.#sold.size });
    if (this.#sold.size === this.capacity) this.emit('soldout', { route: this.route });
    return this;
  }
}

const trip = new Trip('Lagos - Abuja', 3);
const stopAudit = trip.on('booked', d => console.log('audit:', d.seat));
trip.on('booked', d => console.log('display:', d.remaining, 'left'));
trip.on('soldout', d => console.log('FULLY BOOKED:', d.route));
trip.on('booked', () => { throw new Error('a badly written listener'); });

trip.book('D11');
stopAudit();
trip.book('D12');
trip.book('D13');

console.log('events registered:', trip.eventNames);