JavaScript: Fundamental (ES6), part 2, 69–97

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
30const registered = Symbol.for('gradsphere.audit');
const again = Symbol.for('gradsphere.audit');
const local = Symbol('gradsphere.audit');

const sameKey = registered === again;
const differentKey = registered === local;
const keys = [Symbol.keyFor(registered), Symbol.keyFor(local)];

const state = {};
state[registered] = 'Balogun till 3';
state[local] = 'Ikeja till 1';

// Code over here never saw the symbols above, and only one of the two is reachable.
const reachable = state[Symbol.for('gradsphere.audit')];
const unreachable = state[Symbol('gradsphere.audit')] === undefined;
const bothStored = Object.getOwnPropertySymbols(state).length;

const printIdentically = [String(registered), String(local)];
const descriptions = [registered.description, local.description];

const wellKnown = [Symbol.keyFor(Symbol.iterator), Symbol.keyFor(Symbol.toStringTag)];
const iteratorIsGlobalAnyway = Symbol.iterator === Symbol.iterator;

const flatNamespace = Symbol.for('audit') === Symbol.for('gradsphere.audit');
const emptyKeyWorks = Symbol.keyFor(Symbol.for(''));

console.log('same key, different key:', sameKey, differentKey);
console.log('keyFor                 :', keys);
console.log('reachable from nowhere :', reachable);
console.log('both print as          :', printIdentically);

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
48
49
50
51class Fares extends Array {
  totalNaira() { return this.reduce((sum, fare) => sum + fare, 0); }
}
const fares = new Fares();
fares.push(300, 500, 250);

const filtered = fares.filter((fare) => fare >= 300);
const keepsSubclass = [filtered instanceof Fares, Array.isArray(filtered), filtered.totalNaira()];

class PlainResults extends Array {
  static get [Symbol.species]() { return Array; }
  totalNaira() { return this.reduce((sum, fare) => sum + fare, 0); }
}
const plain = new PlainResults();
plain.push(300, 500, 250);
const mapped = plain.map((fare) => fare * 2);
const nowPlain = [mapped instanceof PlainResults, Array.isArray(mapped), typeof mapped.totalNaira];
const originalKeepsIt = plain.totalNaira();

// What the species constructor is called with: the new length.
class Ledger extends Array {
  constructor(till) { super(); this.till = till; }
}
const ledger = new Ledger('Balogun 3');
ledger.push(300, 500);
const mappedCopy = ledger.map((fare) => fare);
const filteredCopy = ledger.filter(() => true);
const tillBecameALength = [mappedCopy.till, filteredCopy.till, mappedCopy.length, mappedCopy instanceof Ledger];

class FixedLedger extends Array {
  static get [Symbol.species]() { return Array; }
  constructor(till) { super(); this.till = till; }
}
const fixed = new FixedLedger('Balogun 3');
fixed.push(300, 500);
const fixedCopy = fixed.filter(() => true);
const noStrayTill = [fixedCopy.till === undefined, fixedCopy.length, fixed.till];

const otherMethods = [
  plain.slice(0, 2) instanceof PlainResults,
  plain.concat([100]) instanceof PlainResults,
  fares.slice(0, 2) instanceof Fares,
];

class Receipts extends Promise {}
const chained = Receipts.resolve('LAG-0070').then((ref) => ref);
const promiseSpecies = [chained instanceof Receipts, chained instanceof Promise];

console.log('filter keeps the subclass:', keepsSubclass);
console.log('species Array           :', nowPlain);
console.log('the till became         :', tillBecameALength, '<- map passes the length, filter passes 0');

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
35const attemptName = (fn) => { try { fn(); return 'no error'; } catch (err) { return err.name; } };
const flags = (obj, key) => {
  const d = Object.getOwnPropertyDescriptor(obj, key);
  return [d.writable, d.enumerable, d.configurable];
};

const order = {};
order.customer = 'Bisi';                                   // by assignment
Object.defineProperty(order, 'ref', { value: 'LAG-0071' }); // by descriptor, no attributes

const byAssignment = flags(order, 'customer');
const byDescriptor = flags(order, 'ref');

const visible = [Object.keys(order), JSON.stringify(order), { ...order }];
const enumerated = [];
for (const key in order) enumerated.push(key);

const readsFine = order.ref;
const foundAnyway = ['ref' in order, Object.getOwnPropertyNames(order), Object.hasOwn(order, 'ref')];

const writeRefused = attemptName(() => { order.ref = 'LAG-9999'; });
const deleteRefused = attemptName(() => { delete order.ref; });
const redefineRefused = attemptName(() => Object.defineProperty(order, 'ref', { value: 'LAG-9999' }));
const unchanged = order.ref;

// Redefining an existing property: unnamed attributes are left as they were.
Object.defineProperty(order, 'customer', { enumerable: false });
const afterPartial = flags(order, 'customer');
order.customer = 'Adaeze';                                  // still writable
const stillWritable = order.customer;
const nowHidden = Object.keys(order);

console.log('assignment vs descriptor:', byAssignment, byDescriptor);
console.log('visible                 :', visible);
console.log('refusals                :', [writeRefused, deleteRefused, redefineRefused]);

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
39const literal = {
  fare: 400,
  get total() { return this.fare + 50; },
};

const defined = { fare: 400 };
Object.defineProperty(defined, 'total', { get() { return this.fare + 50; } });

class Trip {
  constructor(fare) { this.fare = fare; }
  get total() { return this.fare + 50; }
}
const instance = new Trip(400);

const shape = (obj, key) => {
  const d = Object.getOwnPropertyDescriptor(obj, key);
  return d ? [typeof d.get, d.enumerable, d.configurable] : 'no own property';
};

const literalShape = shape(literal, 'total');
const definedShape = shape(defined, 'total');
const instanceShape = shape(instance, 'total');
const prototypeShape = shape(Trip.prototype, 'total');

const allThreeRead = [literal.total, defined.total, instance.total];
const literalVisible = [Object.keys(literal), JSON.stringify(literal)];
const definedVisible = [Object.keys(defined), JSON.stringify(defined)];
const instanceVisible = [Object.keys(instance), JSON.stringify(instance)];

const spreadLiteral = { ...literal };
const spreadShape = shape(spreadLiteral, 'total');
literal.fare = 900;
const gettersFollow = [literal.total, defined.total];
const snapshotDoesNot = spreadLiteral.total;

console.log('descriptors:', literalShape, definedShape, instanceShape);
console.log('literal    :', literalVisible);
console.log('defined    :', definedVisible);
console.log('instance   :', instanceVisible);

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
41const attemptName = (fn) => { try { fn(); return 'no error'; } catch (err) { return err.name; } };
const tryAll = (obj) => [
  attemptName(() => { obj.zone = 'Mainland'; }),   // add
  attemptName(() => { obj.fare = 500; }),          // change
  attemptName(() => { delete obj.till; }),         // delete
];

const noAdding = Object.preventExtensions({ fare: 400, till: 'Balogun 3' });
const sealed = Object.seal({ fare: 400, till: 'Balogun 3' });
const frozen = Object.freeze({ fare: 400, till: 'Balogun 3' });

const preventResults = tryAll(noAdding);
const sealResults = tryAll(sealed);
const freezeResults = tryAll(frozen);
const whatSurvived = [noAdding.fare, sealed.fare, frozen.fare];

const flags = (obj) => [Object.isExtensible(obj), Object.isSealed(obj), Object.isFrozen(obj)];
const matrix = [flags(noAdding), flags(sealed), flags(frozen)];

const attrs = (obj) => {
  const d = Object.getOwnPropertyDescriptor(obj, 'fare');
  return [d.writable, d.configurable];
};
const descriptors = [attrs(noAdding), attrs(sealed), attrs(frozen)];

const frozenList = Object.freeze(['Yaba', 'Ikeja']);
const pushRefused = attemptName(() => frozenList.push('Ojota'));
const elementRefused = attemptName(() => { frozenList[0] = 'Ojota'; });
const listUnchanged = frozenList.slice();

const reflectSays = [
  Reflect.set(frozen, 'fare', 500),
  Reflect.deleteProperty(sealed, 'till'),
  Reflect.defineProperty(noAdding, 'zone', { value: 'Mainland' }),
];
const emptyFrozenByDefault = [Object.isFrozen(Object.preventExtensions({})), Object.isFrozen(Object.preventExtensions({ a: 1 }))];

console.log('preventExtensions:', preventResults);
console.log('seal             :', sealResults);
console.log('freeze           :', freezeResults);
console.log('flags            :', matrix);

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64const attemptName = (fn) => { try { fn(); return 'no error'; } catch (err) { return err.name; } };

const shallow = Object.freeze({ till: 'Balogun 3', limits: { daily: 2000000 } });
const topRefused = attemptName(() => { shallow.till = 'Ikeja 1'; });
const nestedAllowed = attemptName(() => { shallow.limits.daily = 0; });
const nestedNow = shallow.limits.daily;
const frozenFlags = [Object.isFrozen(shallow), Object.isFrozen(shallow.limits)];

const deepFreeze = (value, seen = new WeakSet()) => {
  if (value === null || (typeof value !== 'object' && typeof value !== 'function')) return value;
  if (seen.has(value)) return value;                       // a cycle, already handled
  seen.add(value);
  for (const key of Reflect.ownKeys(value)) {              // symbol keys included
    const desc = Object.getOwnPropertyDescriptor(value, key);
    if (desc && 'value' in desc) deepFreeze(desc.value, seen);   // never runs a getter
  }
  return Object.freeze(value);
};

const AUDIT = Symbol('audit');
const config = {
  till: 'Balogun 3',
  limits: { daily: 2000000, perOrder: { naira: 500000 } },
  stops: ['Yaba', 'Ikeja'],
  [AUDIT]: { by: 'Adaeze' },
};
deepFreeze(config);

const deepRefused = [
  attemptName(() => { config.limits.daily = 0; }),
  attemptName(() => { config.limits.perOrder.naira = 0; }),
  attemptName(() => { config.stops.push('Ojota'); }),
  attemptName(() => { config[AUDIT].by = 'someone else'; }),
];
const frozenAllTheWay = [
  Object.isFrozen(config.limits.perOrder),
  Object.isFrozen(config.stops),
  Object.isFrozen(config[AUDIT]),
];
const dataIntact = [config.limits.perOrder.naira, config.stops.slice()];

const cyclic = { stop: 'Oshodi' };
cyclic.self = cyclic;
deepFreeze(cyclic);
const cycleHandled = [Object.isFrozen(cyclic), Object.isFrozen(cyclic.self), cyclic.self.self.stop];

let getterCalls = 0;
const lazy = { fare: 400, get total() { getterCalls++; return this.fare + 50; } };
deepFreeze(lazy);
const notCalledDuringFreeze = getterCalls;
const stillComputes = [lazy.total, getterCalls];

const till = (() => {
  let naira = 0;
  return { get naira() { return naira; }, set take(amount) { naira += amount; } };
})();
deepFreeze(till);
const setterRan = attemptName(() => { till.take = 45000; });
const stateMoved = till.naira;

console.log('shallow freeze  :', topRefused, nestedAllowed, '-> nested is now', nestedNow);
console.log('deep freeze     :', deepRefused);
console.log('cycle           :', cycleHandled);
console.log('setter          :', setterRan, '-> naira is now', stateMoved);

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
42const attemptName = (fn) => { try { fn(); return 'no error'; } catch (err) { return err.name; } };

const order = { items: [{ naira: 25000 }, { naira: 20000 }] };
Object.defineProperty(order, 'total', {
  get() { return this.items.reduce((sum, item) => sum + item.naira, 0); },
  enumerable: false,
  configurable: true,
});

const computed = order.total;
order.items.push({ naira: 5000 });
const recomputed = order.total;

const assignRefused = attemptName(() => { order.total = 1; });
const hidden = [Object.keys(order), JSON.stringify(order), Object.hasOwn(order, 'total')];
const spreadDropsIt = Object.keys({ ...order });

Object.defineProperty(order, 'total', {
  get() { return this.items.reduce((sum, item) => sum + item.naira, 0); },
  enumerable: true,
  configurable: true,
});
const nowVisible = [Object.keys(order), JSON.parse(JSON.stringify(order)).total];

// A non-writable data property: also refuses assignment, and never recomputes.
const snapshot = { items: order.items };
Object.defineProperty(snapshot, 'total', { value: 50000, writable: false, enumerable: true });
const dataRefused = attemptName(() => { snapshot.total = 1; });
snapshot.items.push({ naira: 100000 });
const staleTotal = snapshot.total;
const liveTotal = order.total;

const bothAtOnce = attemptName(() => Object.defineProperty({}, 'total', { value: 1, get() { return 2; } }));
const kinds = [
  typeof Object.getOwnPropertyDescriptor(order, 'total').get,
  'writable' in Object.getOwnPropertyDescriptor(order, 'total'),
  typeof Object.getOwnPropertyDescriptor(snapshot, 'total').get,
];

console.log('computed, recomputed:', computed, recomputed);
console.log('hidden              :', hidden);
console.log('stale vs live       :', staleTotal, liveTotal);

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
38const attemptName = (fn) => { try { fn(); return 'no error'; } catch (err) { return err.name; } };

const vehicle = {
  wheels: 4,
  describe() { return this.name + ' with ' + this.wheels + ' wheels'; },
};
const danfo = Object.create(vehicle);
danfo.name = 'danfo';

const inherited = [danfo.wheels, Object.hasOwn(danfo, 'wheels'), 'wheels' in danfo];
const methodRuns = danfo.describe();

danfo.wheels = 6;                              // shadows; the prototype is untouched
const afterShadowing = [danfo.wheels, vehicle.wheels, Object.hasOwn(danfo, 'wheels')];
const shadowedDescribe = danfo.describe();

delete danfo.wheels;                           // the shadow goes, the inherited value returns
const afterDelete = [danfo.wheels, Object.hasOwn(danfo, 'wheels')];

const ownOnly = Object.keys(danfo);
const walked = [];
for (const key in danfo) walked.push(key);

const links = [Object.getPrototypeOf(danfo) === vehicle, vehicle.isPrototypeOf(danfo)];
const chain = [];
for (let link = Object.getPrototypeOf(danfo); link !== null; link = Object.getPrototypeOf(link)) {
  chain.push(link === vehicle ? 'vehicle' : link === Object.prototype ? 'Object.prototype' : 'other');
}

const bare = Object.create(null);
bare.name = 'keko';
const bareChecks = [Object.getPrototypeOf(bare), 'toString' in bare, Object.keys(bare)];
const bareThrows = attemptName(() => String(bare));

console.log('inherited      :', inherited);
console.log('after shadowing:', afterShadowing);
console.log('after delete   :', afterDelete);
console.log('chain          :', chain);

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
35const attemptName = (fn) => { try { fn(); return 'no error'; } catch (err) { return err.name; } };

class Bus {
  constructor(route) { this.route = route; }
  label() { return 'bus to ' + this.route; }              // on the prototype
  labelArrow = () => 'bus to ' + this.route;              // own property, per instance
}

const ojota = new Bus('Ojota');
const yaba = new Bus('Yaba');

const bothWork = [ojota.label(), ojota.labelArrow()];
const methodShared = ojota.label === yaba.label;
const fieldPerInstance = ojota.labelArrow === yaba.labelArrow;
const whereTheyLive = [
  Object.hasOwn(ojota, 'label'),
  Object.hasOwn(ojota, 'labelArrow'),
  Object.hasOwn(Bus.prototype, 'label'),
];
const listed = [Object.keys(ojota), JSON.stringify(ojota)];

const moved = ojota.label.call(yaba);
const arrowRefusesToMove = ojota.labelArrow.call(yaba);
const boundCannotHelp = ojota.labelArrow.bind(yaba)();

const detachedMethod = ojota.label;
const detachedArrow = ojota.labelArrow;
const methodLostThis = attemptName(() => detachedMethod());
const arrowStillWorks = detachedArrow();
const rebound = detachedMethod.bind(ojota)();

console.log('shared, per instance:', methodShared, fieldPerInstance);
console.log('own keys            :', listed);
console.log('call on each        :', moved, '|', arrowRefusesToMove);
console.log('detached            :', methodLostThis, '|', arrowStillWorks);

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63const attemptName = (fn) => { try { fn(); return 'no error'; } catch (err) { return err.name; } };

class BusClass {
  static depot = 'Ojota';
  constructor(route) { this.route = route; }
  label() { return 'bus to ' + this.route; }
  get shortRoute() { return this.route.slice(0, 3); }
  static fromText(text) { return new BusClass(text.trim()); }
}

function BusFunction(route) { this.route = route; }
BusFunction.depot = 'Ojota';
BusFunction.prototype.label = function () { return 'bus to ' + this.route; };
BusFunction.fromText = function (text) { return new BusFunction(text.trim()); };

const a = new BusClass('Ojuelegba');
const b = new BusFunction('Ojuelegba');

const sameOutwardly = [
  a.label() === b.label(),
  a instanceof BusClass && b instanceof BusFunction,
  Object.getPrototypeOf(a) === BusClass.prototype && Object.getPrototypeOf(b) === BusFunction.prototype,
  typeof BusClass === typeof BusFunction,
];
const constructorLinks = [BusClass.prototype.constructor === BusClass, BusFunction.prototype.constructor === BusFunction];

const enumerability = [Object.keys(BusClass.prototype), Object.keys(BusFunction.prototype)];
const inForIn = [];
for (const key in b) inForIn.push(key);
const classInForIn = [];
for (const key in a) classInForIn.push(key);

class EmptyClass { constructor() {} }
function emptyFunction() {}
const withoutNew = [
  attemptName(() => BusClass('Ojota')),        // refused for being a class
  attemptName(() => EmptyClass()),             // refused even with a body that does nothing
  attemptName(() => emptyFunction()),          // just runs
  attemptName(() => BusFunction('Ojota')),     // fails for a different reason entirely
];
const strayGlobal = typeof globalThis.route;

let seen = 'never ran';
function Factory() { seen = new.target === undefined ? 'called' : 'constructed'; }
new Factory();
const withNew = seen;
Factory();
const withoutNewSeen = seen;

const staticSide = [
  Object.hasOwn(BusClass, 'depot'),
  Object.hasOwn(BusClass.prototype, 'depot'),
  BusClass.fromText('  Ojota  ').route,
];
const accessorOnPrototype = [
  typeof Object.getOwnPropertyDescriptor(BusClass.prototype, 'shortRoute').get,
  a.shortRoute,
];

console.log('indistinguishable:', sameOutwardly);
console.log('enumerable       :', enumerability);
console.log('without new      :', withoutNew);
console.log('new.target       :', withNew, '/', withoutNewSeen);

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
48
49
50
51
52const attemptName = (fn) => { try { fn(); return 'no error'; } catch (err) { return err.name; } };

class Base {
  describe() { return 'base:' + this.till; }
  static origin() { return 'Base'; }
}
class Middle extends Base {
  describe() { return 'middle -> ' + super.describe(); }
  static origin() { return 'Middle of ' + super.origin(); }
}
class Leaf extends Middle {
  describe() { return 'leaf -> ' + super.describe(); }
}

const leaf = new Leaf();
leaf.till = 'Balogun 3';
const wholeChain = leaf.describe();

// The same method, on an object with nothing to do with these classes.
const alien = { till: 'Ikeja 1', describe: Middle.prototype.describe };
const stillReachesBase = alien.describe();
const alienChain = Object.getPrototypeOf(alien) === Object.prototype;

let depth = 0;
class Naive extends Base {
  describe() {
    depth++;
    if (depth > 3) return 'still going round after ' + depth + ' calls';
    return 'naive -> ' + this.constructor.prototype.describe.call(this);
  }
}
const naive = new Naive();
naive.till = 'Yaba';
const recursed = naive.describe();

const parent = { greet() { return 'from the parent'; } };
const child = { __proto__: parent, greet() { return 'child then ' + super.greet(); } };
const literalSuper = child.greet();
const copied = { ...child };
const copiedStillWorks = [Object.getPrototypeOf(copied) === Object.prototype, copied.greet()];

const staticSuper = Middle.origin();

class TooEarly extends Base {
  constructor() { try { this.till = 'Yaba'; } catch (err) { throw err; } }
}
const beforeSuper = attemptName(() => new TooEarly());

console.log('whole chain     :', wholeChain);
console.log('on an alien     :', stillReachesBase);
console.log('naive version   :', recursed, 'after', depth, 'calls');
console.log('literal super   :', literalSuper, '| copied:', copiedStillWorks[1]);

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
48
49
50
51
52
53
54
55const attemptName = (fn) => { try { fn(); return 'no error'; } catch (err) { return err.name; } };

class Party {
  constructor(name) { this.name = name; }
  describe() { return 'party ' + this.name; }
}

const Auditable = (Base) => class extends Base {
  audit(action) { return this.name + ' ' + action + ', logged'; }
};
const Payable = (Base) => class extends Base {
  pay(naira) { return this.name + ' paid ' + naira; }
};

const AuditableParty = Auditable(Party);
const PayableAuditableParty = Payable(AuditableParty);
class Vendor extends PayableAuditableParty {}

const vendor = new Vendor('Adaeze');
const bothBehaviours = [vendor.pay(45000), vendor.audit('restocked'), vendor.describe()];

const chain = [];
for (let link = Object.getPrototypeOf(vendor); link !== null; link = Object.getPrototypeOf(link)) {
  chain.push(
    link === Vendor.prototype ? 'Vendor'
      : link === PayableAuditableParty.prototype ? 'Payable'
      : link === AuditableParty.prototype ? 'Auditable'
      : link === Party.prototype ? 'Party'
      : 'Object.prototype'
  );
}
const instanceOfEach = [vendor instanceof Vendor, vendor instanceof AuditableParty, vendor instanceof Party];
const whereTheMethodsAre = [
  Object.getOwnPropertyNames(PayableAuditableParty.prototype),
  Object.getOwnPropertyNames(AuditableParty.prototype),
];

const borrower = { name: 'Chidi' };
const called = Vendor.prototype.pay.call(borrower, 5000);
const applied = Vendor.prototype.pay.apply(borrower, [5000]);

const bound = Vendor.prototype.pay.bind({ name: 'Ngozi' });
const boundCall = bound(7000);
const cannotRebind = bound.call({ name: 'somebody else' }, 7000);
const partiallyApplied = Vendor.prototype.pay.bind({ name: 'Ngozi' }, 7000)();
const boundLength = [bound.length, bound.name];

const detached = vendor.pay;
const lostThis = attemptName(() => detached(45000));
const fixedAgain = detached.bind(vendor)(45000);

console.log('both behaviours:', bothBehaviours);
console.log('chain          :', chain);
console.log('borrowed       :', called, '|', applied);
console.log('bound          :', boundCall, '| re-bound:', cannotRebind);

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
30const orders = Array.from({ length: 23 }, (_, i) => 'ORD-' + String(i + 1).padStart(3, '0'));

function paginate(items, { page = 1, perPage = 10 } = {}) {
  const total = items.length;
  const pages = Math.max(1, Math.ceil(total / perPage));   // an empty list is still page 1 of 1
  const current = Math.min(Math.max(1, Math.trunc(page)), pages);
  const from = (current - 1) * perPage;
  const rows = items.slice(from, from + perPage);          // slice clamps for us
  return {
    page: current,
    pages,
    total,
    rows,
    hasNext: current < pages,
    hasPrev: current > 1,
    label: 'Showing ' + (total === 0 ? 0 : from + 1) + '-' + Math.min(from + perPage, total) + ' of ' + total,
  };
}

const first = paginate(orders);
const last = paginate(orders, { page: 3 });
const wayPastTheEnd = paginate(orders, { page: 9 });
const beforeTheStart = paginate(orders, { page: 0 });
const nothingAtAll = paginate([], { perPage: 10 });
const exactFit = paginate(Array.from({ length: 30 }, (_, i) => i + 1), { page: 3, perPage: 10 });

console.log('page 1 :', first.label, '| next?', first.hasNext);
console.log('page 3 :', last.label, '| next?', last.hasNext);
console.log('page 9 :', 'asked for 9, got', wayPastTheEnd.page);
console.log('empty  :', nothingAtAll.label, '| pages', nothingAtAll.pages);

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
48
49const vendors = [
  { id: 1, name: 'Adaeze Fabrics', city: 'Lagos', rating: 4.6, active: true },
  { id: 2, name: 'Balogun Textiles', city: 'Lagos', rating: 3.9, active: true },
  { id: 3, name: 'Chidi Electronics', city: 'Abuja', rating: 4.8, active: false },
  { id: 4, name: 'Ngozi Fabrics', city: 'Ibadan', rating: 4.2, active: true },
  { id: 5, name: 'Yaba Tech Spares', city: 'Lagos', rating: 2.7, active: false },
];

function search(rows, criteria = {}) {
  const tests = [];
  if (criteria.q !== undefined && criteria.q.trim() !== '') {
    const needle = criteria.q.trim().toLowerCase();
    tests.push((r) => r.name.toLowerCase().includes(needle));
  }
  if (criteria.city !== undefined) {
    const cities = [].concat(criteria.city);
    tests.push((r) => cities.includes(r.city));
  }
  if (criteria.minRating !== undefined) tests.push((r) => r.rating >= criteria.minRating);
  if (criteria.active !== undefined) tests.push((r) => r.active === criteria.active);
  return rows.filter((r) => tests.every((t) => t(r)));
}

// The version that checks truthiness instead of presence.
function naiveSearch(rows, criteria = {}) {
  return rows.filter((r) =>
    (!criteria.q || r.name.toLowerCase().includes(criteria.q.toLowerCase())) &&
    (!criteria.city || r.city === criteria.city) &&
    (!criteria.minRating || r.rating >= criteria.minRating) &&
    (!criteria.active || r.active === criteria.active));
}

const names = (rows) => rows.map((r) => r.name);

const everything = search(vendors);
const byText = search(vendors, { q: '  FABRICS ' });
const lagosOnly = search(vendors, { city: 'Lagos' });
const twoCriteria = search(vendors, { city: 'Lagos', minRating: 4 });
const severalCities = search(vendors, { city: ['Abuja', 'Ibadan'] });
const onlyInactive = search(vendors, { active: false });
const naiveInactive = naiveSearch(vendors, { active: false });
const floorOfZero = search(vendors, { minRating: 0 });
const blankQuery = search(vendors, { q: '   ' });
const noMatch = search(vendors, { city: 'Kano', q: 'fabrics' });

console.log('no criteria :', everything.length, 'rows');
console.log('q=fabrics   :', names(byText));
console.log('inactive    :', names(onlyInactive));
console.log('naive same  :', names(naiveInactive), '<- the bug');

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
29const riders = [
  { id: 'R1', name: 'Chinedu', deliveries: 41 },
  { id: 'R2', name: 'Bukola', deliveries: 12 },
  { id: 'R3', name: 'Amaka', deliveries: 63 },
  { id: 'R4', name: 'Zainab', deliveries: 41 },
  { id: 'R5', name: 'Tunde', deliveries: 63 },
];

const compareRiders = (pinnedId) => (a, b) =>
  (a.id === pinnedId ? 0 : 1) - (b.id === pinnedId ? 0 : 1) ||   // pinned row first
  b.deliveries - a.deliveries ||                                  // then deliveries, descending
  a.name.localeCompare(b.name);                                   // then name, A to Z

const rank = (rows, pinnedId) => [...rows].sort(compareRiders(pinnedId));

const names = (rows) => rows.map((r) => r.name);

const withPin = rank(riders, 'R2');
const withoutPin = rank(riders);
const pinNotPresent = rank(riders, 'R99');
const originalUntouched = names(riders);

const pinnedBeatsEverything = compareRiders('R2')(riders[1], riders[2]) < 0;
const identicalRows = compareRiders(null)({ id: 'x', name: 'Amaka', deliveries: 63 }, riders[2]);
const booleanComparator = [riders[1].deliveries > riders[2].deliveries, Number(riders[1].deliveries > riders[2].deliveries)];

console.log('pinned R2 :', names(withPin));
console.log('unpinned  :', names(withoutPin));
console.log('original  :', originalUntouched, '<- still as written');

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
48
49
50
51
52
53
54
55
56// A clock driven by hand. Nothing here sleeps.
function makeClock() {
  let now = 0;
  let seq = 0;
  const jobs = new Map();
  return {
    setTimeout(fn, ms) { jobs.set(++seq, { at: now + ms, fn }); return seq; },
    clearTimeout(id) { jobs.delete(id); },
    advance(ms) {
      now += ms;
      const due = [...jobs].filter(([, j]) => j.at <= now).sort((a, b) => a[1].at - b[1].at);
      for (const [id, job] of due) { jobs.delete(id); job.fn(); }
    },
    get time() { return now; },
    get pending() { return jobs.size; },
  };
}

function debounce(fn, wait, clock) {
  let timer = null;
  const wrapped = (...args) => {
    if (timer !== null) clock.clearTimeout(timer);
    timer = clock.setTimeout(() => { timer = null; fn(...args); }, wait);
  };
  wrapped.cancel = () => { if (timer !== null) { clock.clearTimeout(timer); timer = null; } };
  return wrapped;
}

const clock = makeClock();
const requests = [];
const search = debounce((q) => requests.push(q), 100, clock);

// Someone types "lag" at 30ms a keystroke.
search('l');
clock.advance(30);
search('la');
clock.advance(30);
search('lag');
clock.advance(30);
const duringTheBurst = requests.length;

clock.advance(100);                 // typing stopped, the last timer comes due
const afterTheBurst = [...requests];

// A second, separate burst.
search('ikeja');
clock.advance(150);

// And a call abandoned before it could fire.
search('yaba');
search.cancel();
clock.advance(500);

console.log('during the burst :', duringTheBurst, 'requests');
console.log('after it settled :', afterTheBurst);
console.log('in the end       :', requests, 'at t =', clock.time + 'ms');

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
48
49
50
51
52function makeClock() {
  let now = 0;
  return { now: () => now, advance(ms) { now += ms; }, get time() { return now; } };
}

function tokenBucket({ capacity, perSecond, clock }) {
  let tokens = capacity;                 // start full, so a first burst is allowed
  let last = clock.now();
  const refill = () => {
    const at = clock.now();
    tokens = Math.min(capacity, tokens + ((at - last) / 1000) * perSecond);
    last = at;
  };
  return {
    take(cost = 1) {
      refill();
      if (tokens < cost) return false;
      tokens -= cost;
      return true;
    },
    get available() { refill(); return Math.round(tokens * 100) / 100; },
  };
}

const clock = makeClock();
const sms = tokenBucket({ capacity: 3, perSecond: 2, clock });   // burst of 3, then 1 every 500ms

const burst = [sms.take(), sms.take(), sms.take()];
const fourth = sms.take();
const emptied = sms.available;

clock.advance(500);                    // half a second earns exactly one token
const afterHalfASecond = sms.available;
const fifth = sms.take();

clock.advance(10000);                  // idle for ten seconds
const cappedAtCapacity = sms.available;
const tooBigForTheBucket = sms.take(4);
const stillFull = sms.available;

const pairAtOnce = sms.take(2);
const leftOver = sms.available;

// Ten attempts back to back from a fresh bucket.
const fresh = tokenBucket({ capacity: 3, perSecond: 2, clock });
let accepted = 0;
for (let i = 0; i < 10; i++) if (fresh.take()) accepted++;

console.log('burst of three   :', burst, '| fourth:', fourth);
console.log('after 500ms      :', afterHalfASecond, 'token(s)');
console.log('after 10s idle   :', cappedAtCapacity, '<- capped, not 20');
console.log('ten rapid tries  :', accepted, 'accepted');

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
48
49
50
51
52
53
54
55
56
57function deduplicate(loader) {
  const inFlight = new Map();
  return {
    load(key) {
      const running = inFlight.get(key);
      if (running) return running;                     // the same promise object, not a copy
      // The async wrapper calls loader synchronously and still turns a
      // synchronous throw into a rejection.
      const started = (async () => loader(key))().finally(() => inFlight.delete(key));
      inFlight.set(key, started);
      return started;
    },
    get size() { return inFlight.size; },
  };
}

// A loader we can settle by hand, so nothing depends on timing.
const gates = new Map();
const asked = [];
const loader = (key) => {
  asked.push(key);
  return new Promise((resolve, reject) => gates.set(key, { resolve, reject }));
};

const api = deduplicate(loader);

const a = api.load('vendors?city=lagos');
const b = api.load('vendors?city=lagos');
const c = api.load('vendors?city=abuja');
const sharedPromise = a === b;
const inFlightNow = api.size;
const requestsSoFar = asked.length;

gates.get('vendors?city=lagos').resolve(['Adaeze Fabrics']);
gates.get('vendors?city=abuja').resolve(['Chidi Electronics']);
const [fromA, fromB, fromC] = await Promise.all([a, b, c]);
const clearedAfterSettling = api.size;

// Settled means forgotten, so this really does go out again.
const again = api.load('vendors?city=lagos');
gates.get('vendors?city=lagos').resolve(['Adaeze Fabrics', 'Balogun Textiles']);
const secondAnswer = await again;

// A failure is shared by every waiter, and evicted just the same.
const failing = api.load('vendors?city=kano');
const alsoFailing = api.load('vendors?city=kano');
gates.get('vendors?city=kano').reject(new Error('504 from upstream'));
const bothErrors = await Promise.all([failing.catch((e) => e.message), alsoFailing.catch((e) => e.message)]);
const clearedAfterFailing = api.size;

const retried = api.load('vendors?city=kano');
gates.get('vendors?city=kano').resolve(['Kano Traders']);
const afterRetry = await retried;

console.log('same promise?   :', sharedPromise);
console.log('requests made   :', asked);
console.log('shared failure  :', bothErrors);

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
48
49
50
51
52
53
54async function pool(jobs, limit) {
  const results = new Array(jobs.length);
  let next = 0;
  const worker = async () => {
    while (next < jobs.length) {
      const index = next++;                 // claim it before awaiting, or two workers take it
      results[index] = await jobs[index]();
    }
  };
  const workers = Array.from({ length: Math.min(limit, jobs.length) }, worker);
  await Promise.all(workers);
  return results;
}

// Jobs that record when they start and finish, and how many overlapped.
function traced(names, holds = 2) {
  const log = { started: [], finished: [], peak: 0 };
  let running = 0;
  const jobs = names.map((name) => async () => {
    running++;
    log.peak = Math.max(log.peak, running);
    log.started.push(name);
    for (let i = 0; i < holds; i++) await Promise.resolve();
    running--;
    log.finished.push(name);
    return name.toUpperCase();
  });
  return { jobs, log };
}

const branches = ['ikeja', 'yaba', 'surulere', 'lekki', 'ojota', 'apapa'];

const twoAtATime = traced(branches);
const results = await pool(twoAtATime.jobs, 2);

const serial = traced(branches);
await pool(serial.jobs, 1);

const wideOpen = traced(['ikeja', 'yaba', 'surulere']);
await pool(wideOpen.jobs, 10);

const nothing = await pool([], 4);

// One job rejects while others are already in flight.
const flaky = traced(['ikeja', 'yaba', 'surulere']);
flaky.jobs[1] = async () => { throw new Error('upload failed for yaba'); };
const outcome = await pool(flaky.jobs, 2).then(() => 'resolved', (err) => err.message);
for (let drain = 0; drain < 40; drain++) await Promise.resolve();
const finishedAnyway = flaky.log.finished;

console.log('results        :', results);
console.log('peak of 2      :', twoAtATime.peak, twoAtATime.log.peak);
console.log('serial started :', serial.log.started);
console.log('after a failure:', outcome, '| still finished:', finishedAnyway);

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83function makeClock() {
  let now = 0;
  const jobs = [];
  const drain = async () => { for (let turn = 0; turn < 20; turn++) await Promise.resolve(); };
  return {
    wait(ms) { return new Promise((resolve) => jobs.push({ at: now + ms, resolve })); },
    async advance(ms) {
      // Drain FIRST, then move the clock. Anything mid-attempt has not registered
      // its wait yet, and a wait registered after the clock moved would be timed
      // from the wrong "now" and never come due.
      await drain();
      now += ms;
      for (const job of jobs.filter((j) => j.at <= now)) {
        jobs.splice(jobs.indexOf(job), 1);
        job.resolve();
      }
      await drain();
    },
    get time() { return now; },
  };
}

async function retry(work, { attempts = 4, baseMs = 200, maxMs = 1000, retryable = () => true, clock }) {
  const tries = [];
  let outcome = { ok: false, tries, reason: 'never ran' };
  for (let attempt = 1; attempt <= attempts; attempt++) {
    try {
      const value = await work(attempt);
      outcome = { ok: true, value, attempt, tries };
      break;
    } catch (err) {
      const lastChance = attempt === attempts;
      const stop = lastChance || !retryable(err);
      const delay = stop ? null : Math.min(maxMs, baseMs * 2 ** (attempt - 1));
      tries.push({ attempt, error: err.message, delay });
      if (stop) {
        outcome = { ok: false, tries, reason: lastChance ? 'out of attempts' : 'not retryable' };
        break;
      }
      await clock.wait(delay);
    }
  }
  return outcome;
}

// 1. Always fails, five attempts, so the cap gets exercised.
const clockA = makeClock();
let callsA = 0;
const alwaysDown = async () => { callsA++; throw new Error('503 from paystack'); };
const runA = retry(alwaysDown, { attempts: 5, baseMs: 200, maxMs: 1000, clock: clockA });
await clockA.advance(200);
await clockA.advance(400);
await clockA.advance(800);
await clockA.advance(1000);
const gaveUp = await runA;
const delays = gaveUp.tries.map((t) => t.delay);
const uncappedFourth = 200 * 2 ** 3;

// 2. A 503 then a 400. The 400 is not worth retrying.
const clockB = makeClock();
let callsB = 0;
const thenRejected = async (attempt) => {
  callsB++;
  throw new Error(attempt === 1 ? '503 service unavailable' : '400 invalid account number');
};
const runB = retry(thenRejected, { attempts: 5, baseMs: 200, clock: clockB, retryable: (e) => e.message.startsWith('5') });
await clockB.advance(200);
const bailedOut = await runB;

// 3. Fails twice, then works.
const clockC = makeClock();
const flaky = async (attempt) => {
  if (attempt < 3) throw new Error('503 from paystack');
  return 'receipt/NG-4417';
};
const runC = retry(flaky, { baseMs: 200, clock: clockC });
await clockC.advance(200);
await clockC.advance(400);
const eventually = await runC;

console.log('gave up      :', gaveUp.reason, '| delays', delays);
console.log('bailed out   :', bailedOut.reason, 'after', bailedOut.tries.length, 'attempts');
console.log('eventually   :', eventually.value, 'on attempt', eventually.attempt);

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89function makeClock() {
  let now = 0;
  return { now: () => now, advance(ms) { now += ms; } };
}

function circuitBreaker({ threshold = 3, cooldownMs = 1000, clock }) {
  let phase = 'closed';
  let failures = 0;
  let openedAt = 0;
  let refused = 0;

  // Half-open is a derived phase, not a stored one.
  const view = () =>
    phase === 'open' && clock.now() - openedAt >= cooldownMs ? 'half-open' : phase;

  return {
    get state() { return view(); },
    get refused() { return refused; },
    get failures() { return failures; },
    async call(work) {
      const at = view();
      if (at === 'open') {
        refused++;
        throw new Error('circuit open, upstream not called');
      }
      try {
        const value = await work();
        failures = 0;
        phase = 'closed';
        return value;
      } catch (err) {
        failures++;
        if (at === 'half-open' || failures >= threshold) {
          phase = 'open';
          openedAt = clock.now();
          failures = 0;
        }
        throw err;
      }
    },
  };
}

const clock = makeClock();
let upstreamCalls = 0;
let mode = 'down';
const upstream = async () => {
  upstreamCalls++;
  if (mode === 'down') throw new Error('503 from the bank');
  return 'balance: 148250 kobo';
};

const cb = circuitBreaker({ threshold: 3, cooldownMs: 1000, clock });
const attempt = async () => { try { return await cb.call(upstream); } catch (err) { return err.message; } };

const firstThree = [await attempt(), await attempt(), await attempt()];
const openedState = cb.state;
const callsWhenItOpened = upstreamCalls;

const whileOpen = await attempt();
const untouchedUpstream = upstreamCalls;

clock.advance(1000);
const beforeTheTrial = cb.state;
const failedTrial = await attempt();
const afterFailedTrial = cb.state;

clock.advance(999);
const stillOpen = cb.state;
clock.advance(1);
mode = 'up';
const passedTrial = await attempt();
const afterPassedTrial = cb.state;

// Two failures, then a success, then two more: the count was reset in between.
mode = 'down';
await attempt();
await attempt();
mode = 'up';
await attempt();
mode = 'down';
await attempt();
await attempt();
const stillClosed = [cb.state, cb.failures];

console.log('first three   :', firstThree[2], '-> state', openedState);
console.log('while open    :', whileOpen, '| upstream calls still', untouchedUpstream);
console.log('after cooldown:', beforeTheTrial, '-> trial says', failedTrial);
console.log('trial passes  :', passedTrial, '-> state', afterPassedTrial);

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63function makeClock() {
  let now = 0;
  return { now: () => now, advance(ms) { now += ms; } };
}

function ttlCache({ ttlMs, clock }) {
  const entries = new Map();
  const fresh = (entry) => entry !== undefined && entry.expiresAt > clock.now();
  return {
    set(key, value) {
      entries.set(key, { value, expiresAt: clock.now() + ttlMs });
      return value;
    },
    get(key) {
      const entry = entries.get(key);
      if (fresh(entry)) return entry.value;
      entries.delete(key);                     // lazy eviction, on the read that noticed
      return undefined;
    },
    has(key) { return fresh(entries.get(key)); },
    getOrSet(key, load) {
      const entry = entries.get(key);
      if (fresh(entry)) return entry.value;
      return this.set(key, load(key));
    },
    get rawSize() { return entries.size; },
  };
}

const clock = makeClock();
const rates = ttlCache({ ttlMs: 500, clock });

rates.set('NGN/USD', 1650);
const straightAway = rates.get('NGN/USD');

clock.advance(499);
const justInsideTheWindow = rates.get('NGN/USD');

clock.advance(1);
const sizeBeforeAnyoneLooked = rates.rawSize;
const onceExpired = rates.get('NGN/USD');
const sizeAfterTheRead = rates.rawSize;

let loads = 0;
const load = (key) => { loads++; return key === 'NGN/GBP' ? 2090 : 0; };

const firstLoad = rates.getOrSet('NGN/GBP', load);
const secondLoad = rates.getOrSet('NGN/GBP', load);
const loadsInsideTheWindow = loads;

clock.advance(500);
const afterExpiry = rates.getOrSet('NGN/GBP', load);
const loadsAfterExpiry = loads;

// A cached zero is a real value; a cached undefined is not distinguishable.
const zero = rates.getOrSet('NGN/XOF', load);
rates.set('NGN/GHS', undefined);
const storedUndefined = [rates.get('NGN/GHS'), rates.has('NGN/GHS'), rates.get('never/cached'), rates.has('never/cached')];

console.log('straight away  :', straightAway);
console.log('at 499ms       :', justInsideTheWindow, '| at 500ms:', onceExpired);
console.log('loads          :', loads, 'for three distinct keys');
console.log('undefined vs miss:', storedUndefined);

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
48
49
50
51
52
53
54function createRouter(routes) {
  const compiled = routes.map((route) => ({ ...route, parts: route.path.split('/').filter(Boolean) }));

  const matchParts = (parts, segments) => {
    const params = {};
    for (let i = 0; i < parts.length; i++) {
      const part = parts[i];
      if (part.startsWith('*')) {                       // swallow the remainder, slashes and all
        params[part.slice(1)] = segments.slice(i).map(decodeURIComponent).join('/');
        return params;
      }
      if (i >= segments.length) return null;            // pattern longer than the path
      if (part.startsWith(':')) {
        params[part.slice(1)] = decodeURIComponent(segments[i]);
        continue;
      }
      if (part !== segments[i]) return null;
    }
    return parts.length === segments.length ? params : null;
  };

  return function match(url) {
    const [pathname, search = ''] = url.split('?');
    const segments = pathname.split('/').filter(Boolean);
    for (const route of compiled) {
      const params = matchParts(route.parts, segments);
      if (params !== null) return { name: route.name, params, search };
    }
    return null;
  };
}

const match = createRouter([
  { name: 'home', path: '/' },
  { name: 'newVendor', path: '/vendors/new' },        // must come before /vendors/:id
  { name: 'vendor', path: '/vendors/:id' },
  { name: 'vendorOrder', path: '/vendors/:id/orders/:orderId' },
  { name: 'files', path: '/files/*rest' },
]);

const root = match('/');
const one = match('/vendors/42');
const trailingSlash = match('/vendors/42/');
const staticWins = match('/vendors/new');
const encoded = match('/vendors/Adaeze%20Fabrics');
const nested = match('/vendors/42/orders/ORD-001');
const withQuery = match('/vendors/42?tab=orders&page=2');
const unmatched = match('/nothing/here');
const wildcard = match('/files/2025/lagos/invoice%20final.pdf');

console.log('/vendors/42            :', one.name, one.params);
console.log('/vendors/new           :', staticWins.name, '<- static route declared first');
console.log('/vendors/42?tab=orders :', withQuery.params, 'search:', withQuery.search);
console.log('/files/...             :', wildcard.params);

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67const validate = (values) => {
  const errors = {};
  if (values.fullName.trim() === '') errors.fullName = 'Name is required';
  if (!/^0\d{10}$/.test(values.phone)) errors.phone = 'Enter an 11-digit number, e.g. 08031234567';
  if (!(values.amountKobo > 0)) errors.amountKobo = 'Enter an amount';
  return errors;
};

const createForm = (values) => ({
  values,
  opened: values,
  touched: {},
  errors: validate(values),
  submitted: false,
});

function reduce(state, action) {
  switch (action.type) {
    case 'change': {
      const values = { ...state.values, [action.field]: action.value };
      return { ...state, values, errors: validate(values) };
    }
    case 'blur':
      return { ...state, touched: { ...state.touched, [action.field]: true } };
    case 'submit': {
      const touched = Object.fromEntries(Object.keys(state.values).map((field) => [field, true]));
      return { ...state, touched, submitted: true };
    }
    case 'reset':
      return createForm(state.opened);
    default:
      return state;                       // unknown action: the very same object back
  }
}

const dirtyFields = (state) => Object.keys(state.values).filter((f) => state.values[f] !== state.opened[f]);
const shownErrors = (state) => Object.fromEntries(Object.entries(state.errors).filter(([f]) => state.touched[f]));
const isValid = (state) => Object.keys(state.errors).length === 0;
const drive = (state, ...actions) => actions.reduce(reduce, state);

const fresh = createForm({ fullName: '', phone: '', amountKobo: 0 });

const typed = drive(fresh, { type: 'change', field: 'fullName', value: 'Ada' });
const openedIntact = fresh.values.fullName;

const typedBack = drive(typed, { type: 'change', field: 'fullName', value: '' });

const badPhone = drive(typed, { type: 'change', field: 'phone', value: '0803123' });
const blurred = drive(badPhone, { type: 'blur', field: 'phone' });

const submitted = drive(badPhone, { type: 'submit' });

const good = drive(
  fresh,
  { type: 'change', field: 'fullName', value: 'Adaeze Okonkwo' },
  { type: 'change', field: 'phone', value: '08031234567' },
  { type: 'change', field: 'amountKobo', value: 250000 },
  { type: 'submit' }
);

const afterReset = drive(good, { type: 'reset' });
const ignored = reduce(good, { type: 'nothing-we-know' });

console.log('fresh    : dirty', dirtyFields(fresh), 'shown', shownErrors(fresh), 'valid', isValid(fresh));
console.log('typed    : dirty', dirtyFields(typed));
console.log('blurred  : shown', shownErrors(blurred));
console.log('submitted: shown', Object.keys(shownErrors(submitted)));

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
48
49
50
51
52
53
54
55
56
57
58
59
60function createHistory(initial) {
  const past = [];
  const future = [];
  let present = initial;
  return {
    get present() { return present; },
    commit(next) {
      past.push(present);
      present = next;
      future.length = 0;             // the redo branch is abandoned by a new edit
      return present;
    },
    undo() {
      if (past.length === 0) return present;
      future.push(present);
      present = past.pop();
      return present;
    },
    redo() {
      if (future.length === 0) return present;
      past.push(present);
      present = future.pop();
      return present;
    },
    get canUndo() { return past.length > 0; },
    get canRedo() { return future.length > 0; },
    get depth() { return { past: past.length, future: future.length }; },
  };
}

const editor = createHistory({ title: 'Invoice 001', totalKobo: 0 });
const atTheStart = [editor.canUndo, editor.canRedo];
const nothingToUndo = editor.undo();

editor.commit({ title: 'Invoice 001', totalKobo: 250000 });
editor.commit({ title: 'Invoice 001 (Lagos)', totalKobo: 250000 });
editor.commit({ title: 'Invoice 001 (Lagos)', totalKobo: 412500 });
const afterThreeEdits = editor.depth;

const undoneOnce = editor.undo();
const undoneTwice = editor.undo();
const redone = editor.redo();
const flags = [editor.canUndo, editor.canRedo];

editor.undo();                              // back to the second state
editor.commit({ title: 'Invoice 001 (Ikeja)', totalKobo: 250000 });
const futureDiscarded = editor.depth;
const nothingToRedo = editor.redo();

// The trap: the stacks hold references, not copies.
const shared = { title: 'Receipt', totalKobo: 100 };
const sloppy = createHistory(shared);
shared.totalKobo = 99999;                   // mutating the object the history is holding
sloppy.commit({ title: 'Receipt', totalKobo: 200 });
const undoneAfterMutation = sloppy.undo();

console.log('after three edits :', afterThreeEdits);
console.log('undo, undo, redo  :', redone.totalKobo, 'flags', flags);
console.log('edit after undo   :', futureDiscarded, '<- future gone');
console.log('mutated snapshot  :', undoneAfterMutation);

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
40const naira = (kobo) =>
  '\u20a6' + (kobo / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

const VAT_BPS = 750;   // 7.5%, in basis points

function totalBasket(lines, { discountBps = 0, vatBps = VAT_BPS } = {}) {
  const subtotalKobo = lines.reduce((sum, line) => sum + line.unitKobo * line.qty, 0);
  const discountKobo = Math.round((subtotalKobo * discountBps) / 10000);
  const taxableKobo = subtotalKobo - discountKobo;
  const vatKobo = Math.round((taxableKobo * vatBps) / 10000);
  return {
    subtotalKobo,
    discountKobo,
    taxableKobo,
    vatKobo,
    totalKobo: taxableKobo + vatKobo,
  };
}

const basket = [
  { name: 'Gari, 5kg', unitKobo: 450000, qty: 2 },
  { name: 'Palm oil, 1L', unitKobo: 285000, qty: 1 },
  { name: 'Sachet water, bag', unitKobo: 35000, qty: 3 },
];

const plain = totalBasket(basket, { discountBps: 0 });
const discounted = totalBasket(basket, { discountBps: 1000 });     // 10% off
const everyFieldIsAnInteger = Object.values(discounted).every(Number.isInteger);

const freeOfCharge = totalBasket(basket, { discountBps: 10000 });  // 100% off
const emptyBasket = totalBasket([], { discountBps: 1000 });

// A half-kobo really does turn up: 7.5% of 1999 kobo is 149.925.
const oneOddItem = totalBasket([{ name: 'Sachet, single', unitKobo: 1999, qty: 1 }]);
const unrounded = (1999 * VAT_BPS) / 10000;

console.log('subtotal :', naira(plain.subtotalKobo));
console.log('10% off  :', naira(discounted.discountKobo), '| VAT', naira(discounted.vatKobo));
console.log('to pay   :', naira(discounted.totalKobo));
console.log('one item :', oneOddItem.vatKobo, 'kobo of VAT on', unrounded, 'exactly');

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
46const WIDTH = 40;
const NAME_COL = 22;
const QTY_COL = 3;
const CASH_COL = 15;

const money = (kobo) => (kobo / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const fit = (text, width) => (text.length <= width ? text.padEnd(width) : text.slice(0, width - 1) + '\u2026');
const row = (name, qty, kobo) => fit(name, NAME_COL) + String(qty).padStart(QTY_COL) + money(kobo).padStart(CASH_COL);
const rule = (char) => char.repeat(WIDTH);
const totalRow = (label, kobo) => fit(label, NAME_COL + QTY_COL) + money(kobo).padStart(CASH_COL);

const basket = [
  { name: 'Gari, 5kg', unitKobo: 450000, qty: 2 },
  { name: 'Palm oil, 1L', unitKobo: 285000, qty: 1 },
  { name: 'Sachet water (bag of 20 sachets)', unitKobo: 35000, qty: 3 },
];

const lines = basket.map((line) => row(line.name, line.qty, line.unitKobo * line.qty));
const subtotalKobo = basket.reduce((sum, line) => sum + line.unitKobo * line.qty, 0);
const vatKobo = Math.round((subtotalKobo * 750) / 10000);

const receipt = [
  fit('ADAURA STORES, IKEJA', WIDTH),
  rule('='),
  ...lines,
  rule('-'),
  totalRow('Subtotal', subtotalKobo),
  totalRow('VAT 7.5%', vatKobo),
  totalRow('TOTAL', subtotalKobo + vatKobo),
];

const everyLineIsExactlyWide = receipt.map((line) => line.length);
const longNameFitted = fit('Sachet water (bag of 20 sachets)', NAME_COL);
const decimalPointColumns = lines.map((line) => line.indexOf('.'));

// An amount too wide for its column pushes the row out instead of being cut.
const oversized = row('Generator, 5kVA', 1, 100000000000);

// padEnd counts code units, so a decomposed accent eats a column of padding.
const decomposed = 'Ad\u00e9yemi'.normalize('NFD');
const padded = decomposed.padEnd(10);
const composedPadded = decomposed.normalize('NFC').padEnd(10);

console.log(receipt.join('\n'));
console.log('oversized row length:', oversized.length, '<- pushed past 40');
console.log('padded NFD          :', padded.length, 'code units,', padded.replace(/\p{M}/gu, '').length, 'visible');

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61const needsQuoting = (field) => /[",\r\n]/.test(field) || field !== field.trim();

const writeField = (value) => {
  const text = value === null || value === undefined ? '' : String(value);
  return needsQuoting(text) ? '"' + text.replace(/"/g, '""') + '"' : text;
};

const toCsv = (rows) => rows.map((row) => row.map(writeField).join(',')).join('\r\n');

function fromCsv(text) {
  const rows = [];
  let row = [];
  let field = '';
  let inQuotes = false;
  let i = 0;
  while (i < text.length) {
    const ch = text[i];
    if (inQuotes) {
      if (ch === '"' && text[i + 1] === '"') { field += '"'; i += 2; continue; }   // an escaped quote
      if (ch === '"') { inQuotes = false; i += 1; continue; }
      field += ch; i += 1; continue;
    }
    if (ch === '"') { inQuotes = true; i += 1; continue; }
    if (ch === ',') { row.push(field); field = ''; i += 1; continue; }
    if (ch === '\r' || ch === '\n') {
      row.push(field);
      rows.push(row);
      row = [];
      field = '';
      i += ch === '\r' && text[i + 1] === '\n' ? 2 : 1;
      continue;
    }
    field += ch; i += 1;
  }
  row.push(field);
  rows.push(row);
  return rows;
}

const rows = [
  ['name', 'city', 'note', 'kobo'],
  ['Adaeze Fabrics', 'Lagos', 'Ships Mon, Wed and Fri', '1290000'],
  ['Chidi "Chief" Okoro', 'Abuja', 'Said: "call before 9am"', '450000'],
  ['Ngozi Stores', 'Ibadan', 'Line one\nLine two', ''],
  ['  padded  ', 'Kano', '', '7500'],
];

const csv = toCsv(rows);
const csvLines = csv.split('\r\n');
const backAgain = fromCsv(csv);
const roundTripped = JSON.stringify(backAgain) === JSON.stringify(rows);

const naiveSplit = csvLines[1].split(',').length;
const properly = backAgain[1].length;

const withTrailingBreak = fromCsv('name,city\r\nAdaeze,Lagos\r\n');

console.log(csv);
console.log('round trip :', roundTripped);
console.log('split(",") :', naiveSplit, 'fields where there are', properly);
console.log('trailing \\r\\n gives', withTrailingBreak.length, 'rows:', withTrailingBreak);

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
44function slugify(text, max = 60) {
  const base = text
    .normalize('NFD')
    .replace(/\p{Diacritic}/gu, '')       // fold the accents off
    .toLowerCase()
    .replace(/['\u2019]/g, '')            // an apostrophe disappears rather than becoming a hyphen
    .replace(/[^a-z0-9]+/g, '-')          // everything else collapses to one hyphen
    .replace(/^-+|-+$/g, '');
  if (base.length <= max) return base;
  const oneOver = base.slice(0, max + 1);           // one character past, to see if we cut a word
  const lastHyphen = oneOver.lastIndexOf('-');
  const cut = lastHyphen > 0 ? oneOver.slice(0, lastHyphen) : oneOver.slice(0, max);
  return cut.replace(/-+$/, '');
}

function uniqueSlug(base, taken) {
  if (base === '') return '';
  if (!taken.has(base)) return base;
  let n = 2;
  while (taken.has(base + '-' + n)) n += 1;
  return base + '-' + n;
}

const plain = slugify('Lagos Island Market');
const accented = slugify('Ọlámidé Adéyemi');
const punctuated = slugify('Lagos --- Ibadan!!! Express');
const edges = slugify('  ¡Hola, Naija!  ');
const apostrophe = slugify("Chief's Bar & Grill");

const longTitle = 'Ikeja City Mall, Alausa, Ikeja, Lagos State, Nigeria';
const cappedAt40 = slugify(longTitle, 40);
const cappedAt30 = slugify(longTitle, 30);

const punctuationOnly = slugify('!!! ---');
const otherScript = slugify('文章');

const taken = new Set(['lagos-island-market', 'lagos-island-market-2']);
const firstFree = uniqueSlug(plain, taken);
const noneTaken = uniqueSlug('yaba-market', taken);

console.log('accented   :', accented);
console.log('punctuated :', punctuated, '|', edges, '|', apostrophe);
console.log('capped     :', cappedAt40, '(' + cappedAt40.length + ')');
console.log('unique     :', firstFree);