JavaScript: Fundamental (ES6), part 1, 1–40

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
31function shadow() {
  var loose = 'outer';
  let scoped = 'outer';
  const fixed = 'outer';
  if (true) {
    var loose = 'inner';        // the SAME variable, reassigned
    let scoped = 'inner';       // a NEW variable, dead at the closing brace
    const fixed = 'inner';
  }
  return { loose, scoped, fixed };
}

function afterTheBlock() {
  if (true) {
    var kept = 'still here';
    let dropped = 'gone at the brace';
  }
  let seen;
  try { seen = dropped; } catch (e) { seen = e.constructor.name; }
  return { kept, seen };
}

const rebind = (() => {
  const rate = 1;
  try { rate = 2; return 'allowed'; } catch (e) { return e.constructor.name; }
})();

console.log('shadow()         :', shadow());
console.log('afterTheBlock()  :', afterTheBlock());
console.log('reassigning const:', rebind);
console.log('typeof a name nobody declared:', typeof neverDeclared, '<- no error');

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
41function readLetTooEarly() {
  const seen = [];
  try { seen.push(price); } catch (e) { seen.push(e.constructor.name); }
  let price = 500;
  seen.push(price);
  return seen;
}

function readVarTooEarly() {
  const seen = [];
  seen.push(typeof price);
  var price = 500;
  seen.push(typeof price);
  return seen;
}

function typeofInTheDeadZone() {
  let result;
  try { result = typeof amount; } catch (e) { result = e.constructor.name; }
  let amount = 1;
  return result;
}

const outerRate = 'outer';
function shadowedInTheDeadZone() {
  let seen;
  try { seen = outerRate; } catch (e) { seen = e.constructor.name; }
  let outerRate = 'inner';
  return seen;
}

function callsBeforeDefined() {
  return double(4);
  function double(n) { return n * 2; }
}

console.log('let read too early :', readLetTooEarly());
console.log('var read too early :', readVarTooEarly());
console.log('typeof in the gap  :', typeofInTheDeadZone(), '<- typeof does not save you here');
console.log('shadowed outer name:', shadowedInTheDeadZone());
console.log('function hoisting  :', callsBeforeDefined());

1
2
3
4
5
6
7
8
9
10
11
12
13
14const parses = (src) => {
  try { new Function(src); return 'parsed'; } catch (e) { return e.constructor.name; }
};

const cases = [
  'var a = 1; var a = 2;',
  'let a = 1; let a = 2;',
  'let a = 1; var a = 2;',
  '{ let a = 1; } { let a = 2; }',
  'const a;',
  'const a = 1; a = 2;',
];

for (const src of cases) console.log(src.padEnd(30), '->', parses(src));

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
47function withVar() {
  const out = [];
  for (var i = 0; i < 3; i++) out.push(() => i);
  return out.map((f) => f());
}

function withLet() {
  const out = [];
  for (let i = 0; i < 3; i++) out.push(() => i);
  return out.map((f) => f());
}

function withIife() {
  const out = [];
  for (var i = 0; i < 3; i++) {
    ((n) => out.push(() => n))(i);
  }
  return out.map((f) => f());
}

function overAnIterable() {
  const out = [];
  for (const stop of ['Yaba', 'Mushin']) out.push(() => stop);
  return out.map((f) => f());
}

function varAfterTheLoop() {
  for (var i = 0; i < 3; i++);
  return i;
}

function letAfterTheLoop() {
  for (let i = 0; i < 3; i++);
  try { return i; } catch (e) { return e.constructor.name; }
}

const distinct = (() => {
  const fns = [];
  for (var j = 0; j < 2; j++) fns.push(() => j);
  return fns[0] === fns[1];
})();

console.log('var :', withVar(), '<- the loop finished, i is 3, all three read it');
console.log('let :', withLet());
console.log('iife:', withIife());
console.log('of  :', overAnIterable());
console.log('i after a var loop:', varAfterTheLoop(), ' after a let loop:', letAfterTheLoop());

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
27const account = { owner: 'Adaeze', balanceNgn: 25000 };
account.balanceNgn += 5000;                 // the value is not const

const rebind = (() => {
  try { account = { owner: 'someone else' }; return 'allowed'; }
  catch (e) { return e.constructor.name; }
})();

const branches = ['Ikeja'];
branches.push('Yaba');

const card = Object.freeze({ tier: 'gold' });
const frozenWrite = (() => {
  try { card.tier = 'silver'; return 'allowed'; }
  catch (e) { return e.constructor.name; }
})();

const constInAClassicLoop = (() => {
  try { for (const i = 0; i < 3; i++); return 'ran'; }
  catch (e) { return e.constructor.name; }
})();

console.log('balance after +5000 :', account.balanceNgn);
console.log('rebinding the const :', rebind);
console.log('pushing to a const array:', branches);
console.log('writing to a frozen object:', frozenWrite, '<- strict mode, so it throws');
console.log('const in a for(;;) header :', constInAClassicLoop);

1
2
3
4
5
6
7
8
9
10const double = (n) => n * 2;
const square = n => n * n;                  // parentheses optional for one parameter
const greet = () => 'welcome';              // but required when there are none
const sum = (a, b) => a + b;
const withBlock = (n) => { const t = n * 2; return t + 1; };
const forgotReturn = (n) => { n * 2; };     // a statement, so nothing comes back

for (const f of [double, square, greet, sum, withBlock, forgotReturn]) {
  console.log((f.name + '(2, 3)').padEnd(20), '->', f(2, 3));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const brokenToObject = (name) => { name };          // a body containing one statement
const toObject = (name) => ({ name });              // parentheses: an expression
const toPair = (key, value) => ({ [key]: value });
const rows = ['Ikeja', 'Yaba'].map((city) => ({ city, state: 'Lagos' }));

const labelled = ((n) => { n: n })(5);              // n: is a label, not a key

const parses = (src) => {
  try { new Function(src); return 'parsed'; } catch (e) { return e.constructor.name; }
};

console.log('without parentheses:', brokenToObject('Ada'));
console.log('with parentheses   :', toObject('Ada'));
console.log('a labelled body    :', labelled, '<- legal, and useless');
console.log('two keys in a body :', parses('const f = (n) => { a: 1, b: 2 };'));
console.log('mapped rows        :', rows);

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 shop = {
  name: 'Balogun Market',
  stalls: ['A1', 'A2'],
  withArrow() {
    return this.stalls.map((s) => this.name + ' ' + s);
  },
  withPlainCallback() {
    return this.stalls.map(function () {
      return this === undefined ? 'lost this' : 'kept this';
    });
  },
  withThisArg() {
    return this.stalls.map(function (s) { return this.name + ' ' + s; }, this);
  },
  withBind() {
    return this.stalls.map(function (s) { return this.name + ' ' + s; }.bind(this));
  },
};

function outerThis() {
  const arrow = () => this.tag;
  return arrow.call({ tag: 'ignored' });      // call cannot touch an arrow
}

const plain = function () { return this.tag; };

const stall = {
  code: 'A1',
  viaMethod() { return this.code; },
  viaArrow: () => (this && this.code) ?? 'not A1',
};

console.log('arrow callback     :', shop.withArrow());
console.log('plain callback     :', shop.withPlainCallback());
console.log('map(fn, this)      :', shop.withThisArg());
console.log('fn.bind(this)      :', shop.withBind());
console.log('arrow ignores call :', outerThis.call({ tag: 'outer' }));
console.log('arrow as a method  :', stall.viaArrow(), ' method shorthand:', stall.viaMethod());

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
27function classic() {
  return Array.prototype.slice.call(arguments).reduce((a, b) => a + b, 0);
}

const modern = (...ns) => ns.reduce((a, b) => a + b, 0);

function grab() { return arguments; }
const grabRest = (...xs) => xs;

function outerArguments() {
  const peek = () => arguments.length;        // the outer function's, not its own
  return peek();
}

function bothKinds() {
  const peek = (...own) => ({ own: own.length, outer: arguments.length });
  return peek('x');
}

function withDefault(a, b = 2) { return arguments.length; }

console.log('classic(1, 2, 3)   :', classic(1, 2, 3));
console.log('modern(1, 2, 3)    :', modern(1, 2, 3));
console.log('arguments is an array?', Array.isArray(grab(1, 2)), ' rest is?', Array.isArray(grabRest(1, 2)));
console.log('arrow inside a function sees', outerArguments(1, 2, 3), 'arguments');
console.log('both at once       :', bothKinds(1, 2, 3));
console.log('withDefault(1)     :', withDefault(1), '<- counts what was passed');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25const Point = (x, y) => ({ x, y });
const newedArrow = (() => {
  try { return new Point(1, 2); } catch (e) { return e.constructor.name; }
})();

function Legacy(x) { this.x = x; }

class Money { constructor(amount) { this.amount = amount; } }
const classWithoutNew = (() => {
  try { return Money(500); } catch (e) { return e.constructor.name; }
})();

const tools = { make() { return 'made'; }, older: function () { return 'made'; } };
const newedMethod = (() => {
  try { return new tools.make(); } catch (e) { return e.constructor.name; }
})();
const newedOlder = (() => {
  try { new tools.older(); return 'allowed'; } catch (e) { return e.constructor.name; }
})();

console.log('new on an arrow          :', newedArrow);
console.log('arrow has a prototype?   :', 'prototype' in Point);
console.log('a function declaration?  :', typeof Legacy.prototype);
console.log('calling a class plainly  :', classWithoutNew);
console.log('new on method shorthand  :', newedMethod, ' on a function property:', newedOlder);

1
2
3
4
5
6
7
8
9
10const buyer = 'Chinedu';
const owed = 4500;
const line = `${buyer} owes NGN ${owed}`;

console.log('line           :', line);
console.log('a number       :', `${5}`, typeof `${5}`);
console.log('a plain object :', `${{}}`, '<- String() on an object');
console.log('an array       :', `${[1, 2]}`, '<- joined with commas');
console.log('null, undefined:', `${null} and ${undefined}`);
console.log('quotes inside  :', `He said "yes"`);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const cart = [
  { item: 'rice', qty: 2, priceNgn: 3200 },
  { item: 'beans', qty: 1, priceNgn: 1800 },
];
const total = cart.reduce((n, row) => n + row.qty * row.priceNgn, 0);

const seen = [];
const mark = (x) => { seen.push(x); return x; };
const built = `${mark('a')}-${mark('b')}`;

console.log('total          :', `total ${total}`);
console.log('a method call  :', `${cart[0].item.toUpperCase()}`);
console.log('a ternary      :', `${cart.length === 1 ? 'line' : 'lines'}`);
console.log('a nested map   :', `[${cart.map((r) => `${r.item} x${r.qty}`).join(', ')}]`);
console.log('holes ran in order:', seen, '->', built);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23const receipt = `Ikeja branch
Total: 8200
Thank you`;

const lines = receipt.split('\n');

const indented = () => {
  return `
    one
    two
  `;
};

const dedent = (text) => {
  const rows = text.replace(/^\n/, '').replace(/\n\s*$/, '').split('\n');
  const widths = rows.filter((r) => r.trim() !== '').map((r) => r.length - r.trimStart().length);
  const pad = Math.min(...widths);
  return rows.map((r) => r.slice(pad)).join('\n');
};

console.log('lines        :', lines);
console.log('raw indented :', JSON.stringify(indented()));
console.log('dedented     :', JSON.stringify(dedent(indented())));

1
2
3
4
5
6
7
8
9
10
11const stalls = [
  { code: 'A1', owner: 'Ngozi', rentNgn: 12000, paid: true },
  { code: 'A2', owner: 'Emeka', rentNgn: 9000, paid: false },
];

const row = (s) => `${s.code}: ${s.owner} ${s.paid ? 'paid' : `owes ${s.rentNgn}`}`;
const table = `Stalls\n${stalls.map(row).join('\n')}`;

console.log(table);
console.log('---');
console.log('a hole in a template in a hole:', `${`${1 + 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
30function bracket(strings, ...values) {
  return strings.reduce(
    (out, part, i) => out + part + (i < values.length ? '[' + values[i] + ']' : ''),
    ''
  );
}

const tagged = bracket`Total ${8200} for ${2} items`;

let captured;
const grab = (strings, ...values) => {
  captured = { parts: [...strings], values, raw: typeof strings.raw };
  return 'ignored';
};
grab`a${1}b${2}c`;

const siteOf = () => {
  let seen;
  const tag = (strings) => { seen = strings; return 0; };
  tag`same site`;
  return seen;
};

const adjacent = ((strings) => strings.length)`${1}${2}`;
const asObject = (strings, ...v) => ({ parts: strings.length, v });

console.log('bracket tag   :', tagged);
console.log('captured      :', captured);
console.log('adjacent holes:', adjacent, '<- three pieces, two of them empty');
console.log('same call site:', siteOf() === siteOf());

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
31const attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const basket = ['rice', 'beans', 'yam'];
const [first, second] = basket;
const [, middle] = basket;
const [one, two, three] = ['rice', 'beans'];      // three names, two values
const [letterA, letterB] = 'hi';                  // a string is iterable
const [smallest, next] = new Set([10, 20, 30]);   // so is a Set

const arrayLike = { 0: 'zero', length: 1 };       // looks like an array, is not iterable
const fromArrayLike = attempt(() => {
  const [only] = arrayLike;
  return only;
});

// The pattern pulls only as many values as it has slots.
const pulled = [];
function* counted() {
  for (const n of [1, 2, 3, 4, 5]) { pulled.push(n); yield n; }
}
const [firstPull, secondPull] = counted();

console.log('two names      :', first, second);
console.log('skipped slot   :', middle);
console.log('spare name     :', three, '<- no error, just undefined');
console.log('from a string  :', letterA, letterB);
console.log('from a Set     :', smallest, next);
console.log('from array-like:', fromArrayLike);
console.log('generator pulls:', pulled, '-> got', firstPull, secondPull);

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
33const parses = (src) => {
  try { new Function(src); return 'parsed'; } catch (e) { return e.constructor.name; }
};
const runStrict = (src) => {
  try { return new Function('"use strict";\n' + src)(); } catch (e) { return e.constructor.name; }
};

let a = 1, b = 2;
[a, b] = [b, a];

let x = 'A', y = 'B', z = 'C';
[x, y, z] = [z, x, y];                       // rotate right, one statement

const stalls = ['A1', 'A2', 'A3'];
[stalls[0], stalls[2]] = [stalls[2], stalls[0]];

let owner, rentNgn;
({ owner, rentNgn } = { owner: 'Ngozi', rentNgn: 12000, extra: 'ignored' });

let m, n;
[m, n] = 'xy';                               // any iterable on the right

const asBlock = parses('let o; { o } = { o: 1 };');
const noSemicolon = runStrict('let p = 1, q = 2;\nconst total = 5\n[p, q] = [q, p]\nreturn [p, q];');
const withSemicolon = runStrict('let p = 1, q = 2;\nconst total = 5;\n[p, q] = [q, p];\nreturn [p, q];');

console.log('swap        :', [a, b]);
console.log('rotate      :', [x, y, z]);
console.log('in place    :', stalls);
console.log('into names  :', owner, rentNgn);
console.log('unparenthesised object pattern:', asBlock);
console.log('line above missing a semicolon:', noSemicolon, '<- ran, then failed');
console.log('same code with the semicolon  :', withSemicolon);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21let builds = 0;
const build = () => { builds++; return 'built'; };

const [missing = 'fallback'] = [];
const [explicit = 'fallback'] = [undefined];
const [nulled = 'fallback'] = [null];
const [zero = 'fallback'] = [0];
const [blank = 'fallback'] = [''];

const [width = 2, height = width * 3] = [];       // a later default reads an earlier name
const [, secondOnly = 'filled'] = ['first'];      // the skipped slot is unaffected

const [supplied = build()] = ['given'];           // build() must not run
const [absent = build()] = [];                    // this one must

console.log('missing slot   :', missing);
console.log('explicit undef :', explicit);
console.log('null           :', nulled, '<- kept');
console.log('zero and blank :', zero, JSON.stringify(blank), '<- also kept');
console.log('chained default:', width, height);
console.log('builds counted :', builds, '-> supplied:', supplied, 'absent:', absent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25const parses = (src) => {
  try { new Function(src); return 'parsed'; } catch (e) { return e.constructor.name; }
};

const [head, ...tail] = [1, 2, 3];
const [only, ...none] = ['solo'];
const [...letters] = 'Yaba';

const source = [1, 2, 3];
const [, ...copiedTail] = source;
copiedTail.push(4);                             // the source must not notice

const [firstOfSet, ...restOfSet] = new Set(['a', 'b', 'c']);
const [p, ...[q, r]] = [1, 2, 3];               // a pattern in the rest position

const notLast = parses('const [...r, last] = [1, 2];');
const withDefault = parses('const [...r = []] = [];');
const trailingComma = parses('const [a, ...b,] = [1, 2];');

console.log('head and tail :', head, tail);
console.log('nothing left  :', none, 'length', none.length);
console.log('from a string :', letters);
console.log('source intact :', source, 'tail now', copiedTail);
console.log('nested rest   :', p, q, r);
console.log('rest not last :', notLast, '| with a default:', withDefault, '| trailing comma:', trailingComma);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18const stall = { code: 'A1', owner: 'Ngozi', rentNgn: 12000 };

const { owner, code } = stall;                        // order does not matter
const { code: id, rentNgn: rent } = stall;            // renamed on the way out
const { missing } = stall;
const { code: alias1, code: alias2 } = stall;         // the same key twice
const { length } = 'Ikeja';                           // a string is boxed first

const ledger = { 'rent-2024': 5000, 'due date': '2024-03-01' };
const { 'rent-2024': rent2024, 'due date': dueDate } = ledger;

console.log('by name       :', owner, code);
console.log('renamed       :', id, rent);
console.log('absent key    :', missing);
console.log('twice         :', alias1, alias2);
console.log('from a string :', length);
console.log('quoted keys   :', rent2024, dueDate);
console.log('source intact :', stall);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const opts = { retries: 0, label: null, area: undefined };

const { retries = 3 } = opts;
const { label = 'unnamed' } = opts;
const { area = 'Yaba' } = opts;
const { branch = 'Ikeja' } = opts;                       // key absent entirely

const { rentNgn: rent = 0 } = {};                        // rename and default together
const { width = 2, height = width * 3 } = {};            // chained

const { limits: { daily } = { daily: 50000 } } = {};     // the nesting is missing
const { limits: { daily: dailyPresent } = { daily: 0 } } = { limits: { daily: 999 } };

console.log('zero kept      :', retries);
console.log('null kept      :', label);
console.log('undefined value:', area, '<- default fired');
console.log('absent key     :', branch);
console.log('rename+default :', rent);
console.log('chained        :', width, height);
console.log('nested default :', daily, '| ignored when present:', dailyPresent);

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
31const attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const order = {
  id: 7,
  buyer: { name: 'Emeka', address: { area: 'Yaba', city: 'Lagos' } },
  lines: [
    { item: 'rice', qty: 2 },
    { item: 'beans', qty: 1 },
  ],
};

const { buyer: { name, address: { area } } } = order;
const { lines: [{ item: firstItem, qty: firstQty }] } = order;
const { lines: [, { item: secondItem }] } = order;
const { buyer: { name: buyerName } } = order;

const missingMiddle = attempt(() => {
  const { seller: { name: sellerName } } = order;
  return sellerName;
});
const { seller: { name: guardedSeller } = {} } = order;

console.log('two levels down:', name, area);
console.log('into an array  :', firstItem, firstQty);
console.log('skipping one   :', secondItem);
console.log('renamed deep   :', buyerName);
console.log('buyer bound?   :', typeof buyer, '<- the path is not a variable');
console.log('missing middle :', missingMiddle);
console.log('guarded        :', guardedSeller);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const receipt = ({ branch = 'Ikeja', totalNgn = 0, currency = 'NGN' } = {}) =>
  `${branch}: ${currency} ${totalNgn}`;

const noWholeDefault = ({ branch }) => branch;
const calledBare = attempt(() => noWholeDefault());

const distance = ([x1, y1], [x2, y2]) => Math.abs(x1 - x2) + Math.abs(y1 - y2);
const rentOf = ({ rentNgn: rent }) => rent;
const label = ({ code }, ...tags) => code + ':' + tags.length;

console.log('no argument    :', receipt());
console.log('keys, any order:', receipt({ totalNgn: 8200, branch: 'Yaba' }));
console.log('partial        :', receipt({ totalNgn: 500 }));
console.log('no = {}        :', calledBare);
console.log('array pattern  :', distance([0, 0], [3, 4]));
console.log('arity          :', receipt.length, noWholeDefault.length, distance.length, label.length);

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 parses = (src) => {
  try { new Function(src); return 'parsed'; } catch (e) { return e.constructor.name; }
};

const row = { id: 9, name: 'Emeka', pin: '1234', area: 'Yaba' };
const { pin, ...safe } = row;
const { name: who, ...others } = row;              // a renamed pick is still omitted

const nested = { id: 1, meta: { seen: true } };
const { id, ...restOfNested } = nested;

const proto = { inherited: 'from the prototype' };
const child = Object.create(proto);
child.own = 'own value';
const { ...ownOnly } = child;

const hidden = {};
Object.defineProperty(hidden, 'secret', { value: 'not enumerable', enumerable: false });
hidden.shown = 'enumerable';
const { ...visible } = hidden;

const notLast = parses('const { ...r, a } = {};');

console.log('without the pin :', safe);
console.log('key order kept  :', Object.keys(safe));
console.log('source intact   :', 'pin' in row);
console.log('renamed pick    :', who, '->', Object.keys(others));
console.log('nested shared   :', restOfNested.meta === nested.meta);
console.log('inherited       :', ownOnly, '| non-enumerable:', visible);
console.log('rest not last   :', notLast);

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
27const attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const fromNull = attempt(() => { const { a } = null; return a; });
const fromUndefined = attempt(() => { const { a } = undefined; return a; });
const emptyOnNull = attempt(() => { const {} = null; return 'no throw'; });
const emptyOnString = attempt(() => { const {} = 'anything'; return 'no throw'; });
const arrayOnNull = attempt(() => { const [only] = null; return only; });

const { length: townLength } = 'Lagos';
const { toFixed } = 12000;

const field = 'rentNgn';
const { [field]: rent } = { rentNgn: 12000 };
const { [field.toUpperCase()]: shouted = 'none' } = { RENTNGN: 'loud' };

let reads = 0;
const keyOf = () => { reads++; return 'code'; };
const { [keyOf()]: code } = { code: 'A1' };

console.log('null       :', fromNull, '| undefined:', fromUndefined);
console.log('empty {}   :', emptyOnNull, 'on null,', emptyOnString, 'on a string');
console.log('array on null:', arrayOnNull);
console.log('primitives :', townLength, typeof toFixed);
console.log('computed   :', rent, '| with an expression:', shouted);
console.log('key reads  :', reads, '->', code);

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 attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const week1 = [1200, 900];
const week2 = [1500];

const joined = [...week1, ...week2];
const copy = [...week1];
copy.push(0);                                    // must not reach week1
const surrounded = [0, ...week1, 9999];

const letters = [...'Yaba'];
const unique = [...new Set([1, 1, 2, 2, 3])];
const pairs = [...new Map([['A1', 12000]])];

const holey = [1, , 3];                          // index 1 is a hole
const filled = [...holey];

const astral = 'a' + String.fromCodePoint(0x1d7d8);   // one letter, one astral digit
const intoArray = attempt(() => [...{ code: 'A1' }]);

console.log('joined     :', joined);
console.log('copy       :', copy, 'source still', week1);
console.log('anywhere   :', surrounded);
console.log('a string   :', letters);
console.log('a Set      :', unique, '| a Map:', pairs);
console.log('hole before:', 1 in holey, 'after:', 1 in filled);
console.log('code units :', astral.length, 'code points:', [...astral].length);
console.log('an object  :', intoArray);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22const deepCopy = (o) =>
  typeof structuredClone === 'function' ? structuredClone(o) : JSON.parse(JSON.stringify(o));

const stall = { code: 'A1', owner: { name: 'Ngozi' }, tags: ['fabric'] };
const copy = { ...stall };

copy.code = 'A2';                 // top level: private to the copy
copy.owner.name = 'Emeka';        // one level down: shared
copy.tags.push('lace');           // same story for an array

const rows = [{ qty: 1 }];
const rowsCopy = [...rows];
rowsCopy[0].qty = 99;             // array spread is shallow too

const clone = deepCopy(stall);
clone.owner.name = 'Bola';

console.log('source code   :', stall.code, '| copy:', copy.code);
console.log('shared owner  :', stall.owner.name, copy.owner === stall.owner);
console.log('shared tags   :', stall.tags);
console.log('array of rows :', rows[0].qty);
console.log('deep clone    :', clone.owner.name, 'source still', stall.owner.name);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19const defaults = { branch: 'Ikeja', currency: 'NGN', discount: 0 };
const given = { branch: 'Yaba', discount: undefined };

const merged = { ...defaults, ...given };
const reversed = { ...given, ...defaults };
const literalAfter = { ...defaults, branch: 'Lekki' };
const literalBefore = { branch: 'Lekki', ...defaults };

const clean = Object.fromEntries(Object.entries(given).filter(([, v]) => v !== undefined));
const cleaned = { ...defaults, ...clean };

const viaAssign = Object.assign({}, defaults, given);

console.log('merged        :', merged, '<- discount is gone from the log');
console.log('key list      :', Object.keys(merged), '<- but the key is there');
console.log('reversed      :', reversed.branch);
console.log('literal after :', literalAfter.branch, '| before:', literalBefore.branch);
console.log('cleaned       :', cleaned);
console.log('Object.assign :', viaAssign.branch);

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
28const attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const nums = [3, 41, 7];
const label = (a, b, c) => [a, b, c].join('-');

class Money {
  constructor(major, minor) { this.kobo = major * 100 + minor; }
}

let taken = 0;
function* three() {
  for (const n of [1, 2, 3]) { taken++; yield n; }
}
const fromGenerator = label(...three());

const big = Array.from({ length: 200000 }, (_, i) => i);
const spreadBig = attempt(() => Math.max(...big));
const outcome = typeof spreadBig === 'number' ? 'a number' : spreadBig;
const byReduce = big.reduce((m, x) => (x > m ? x : m), -Infinity);

console.log('spread     :', Math.max(...nums), '| apply:', Math.max.apply(null, nums));
console.log('mixed      :', label(...['x', 'y'], 'z'), label('x', ...['y', 'z']));
console.log('any iterable:', Math.min(...new Set([9, 4, 4])));
console.log('with new   :', new Money(...[120, 50]).kobo);
console.log('generator  :', fromGenerator, 'values taken:', taken);
console.log('200k spread:', outcome, '| the same answer by reduce:', byReduce);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25const attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const sum = (...ns) => ns.reduce((a, b) => a + b, 0);

const seen = [];
const traced = (fn) => (...args) => { seen.push(args); return fn(...args); };
const tracedSum = traced(sum);

const partial = (fn, ...bound) => (...rest) => fn(...bound, ...rest);
const rentFor = (branch, code, amount) => `${branch}/${code}: ${amount}`;
const ikeja = partial(rentFor, 'Ikeja');

const keepsThis = (fn) => function (...args) { return fn.apply(this, args); };
const till = { total: 100, take(n) { return this.total - n; } };
till.takeWrapped = keepsThis(till.take);
const bareMethod = till.take;
const lostReceiver = attempt(() => bareMethod(40));

console.log('through the relay:', tracedSum(1, 2, 3), tracedSum(), tracedSum(...[4, 5]));
console.log('what it saw      :', seen);
console.log('partial          :', ikeja('A1', 12000));
console.log('arity            :', rentFor.length, '->', ikeja.length, '| sum:', sum.length);
console.log('receiver kept    :', till.takeWrapped(40), '| lost:', lostReceiver);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24let issued = 0;
const nextId = () => ++issued;
const ticket = (label, id = nextId()) => `${label}#${id}`;

const first = ticket('rice');
const second = ticket('beans');
const supplied = ticket('yam', 99);

const collect = (item, into = []) => { into.push(item); return into; };
const freshA = collect('a');
const freshB = collect('b');

const shared = [];
const collectShared = (item, into = shared) => { into.push(item); return into.length; };
const sharedA = collectShared('a');
const sharedB = collectShared('b');

const greet = (name = 'guest') => name;

console.log('per call     :', first, second);
console.log('value passed :', supplied, '| ids issued:', issued);
console.log('fresh array  :', freshA, freshB);
console.log('shared array :', sharedA, sharedB, shared);
console.log('triggers     :', greet(), greet(undefined), greet(null), JSON.stringify(greet('')));

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
31const parses = (src) => {
  try { new Function(src); return 'parsed'; } catch (e) { return e.constructor.name; }
};
const attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const area = (w, h = w) => w * h;                 // reads the parameter to its left

const forwardParses = parses('function f(a = b, b = 1) { return [a, b]; }');
const forwardRuns = attempt(() => {
  const f = (a = b, b = 1) => [a, b];
  return f();
});

const bodyVar = attempt(() => {
  function g(a = inner) { var inner = 1; return a; }
  return g();
});

const letShadow = parses('function h(a) { let a = 1; }');
const varShadow = parses('function h(a) { var a = 1; return a; }');
const dupSloppy = parses('function f(a, a) { return a; }');
const dupStrict = parses('"use strict"; function f(a, a) { return a; }');
const dupWithDefault = parses('function f(a, a = 1) { return a; }');

console.log('reads to the left :', area(3), area(3, 4));
console.log('reads to the right:', forwardParses, 'then', forwardRuns);
console.log('reads a body var  :', bodyVar);
console.log('let over a param  :', letShadow, '| var over a param:', varShadow);
console.log('duplicate names   :', dupSloppy, 'sloppy,', dupStrict, 'strict,', dupWithDefault, 'with a default');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25const code = 'A1';
const owner = 'Ngozi';
const rentNgn = 12000;

const stall = { code, owner };                    // shorthand

const till = {
  rentNgn,
  describe() { return `rent ${this.rentNgn}`; },
  get doubled() { return this.rentNgn * 2; },
  set doubled(value) { this.rentNgn = value / 2; },
};

const meter = {
  rentNgn: 12000,
  get doubled() { return this.rentNgn * 2; },
  set doubled(value) { this.rentNgn = value / 2; },
};
meter.doubled = 30000;                            // the setter runs

console.log('shorthand   :', stall);
console.log('method      :', till.describe(), '| named', till.describe.name);
console.log('getter      :', till.doubled);
console.log('setter ran  :', meter.rentNgn);
console.log('serialised  :', JSON.stringify(till), '<- method gone, getter called');

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
26const field = 'rentNgn';
const record = { [field]: 12000, [field + 'Paid']: true, ['A' + 1]: 'stall' };

const numeric = { 1: 'one' };

const asKey = { toString: () => 'custom' };
const bag = { [asKey]: 'from an object' };

const k1 = {};
const k2 = {};
const collided = { [k1]: 'first' };
collided[k2] = 'second';                        // a different object, the same key

const id = Symbol('id');
const withSymbol = { [id]: 'hidden', plain: 'visible' };

let evaluated = 0;
const keyName = () => { evaluated++; return 'once'; };
const timed = { [keyName()]: true };

console.log('computed keys :', Object.keys(record));
console.log('numeric key   :', Object.keys(numeric), numeric[1] === numeric['1']);
console.log('object as key :', Object.keys(bag));
console.log('collision     :', Object.keys(collided), '->', collided[k1]);
console.log('symbol        :', withSymbol[id], '| visible keys:', Object.keys(withSymbol));
console.log('evaluations   :', evaluated);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const mixed = { b: 1, 2: 'two', a: 3, 1: 'one', '-1': 'minus', '1.5': 'float', 10: 'ten' };

const edge = { '4294967294': 'last index', '4294967295': 'one past it', '0': 'first' };

const strings = { a: 1, b: 2 };
delete strings.a;
strings.a = 3;                                    // re-added, so it goes to the end

const integers = { 1: 'x', 2: 'y' };
delete integers[1];
integers[1] = 'z';                                // re-added, back to its numeric slot

const asMap = new Map([['b', 1], [2, 'two'], ['a', 3]]);

console.log('mixed keys  :', Object.keys(mixed));
console.log('as JSON     :', JSON.stringify(mixed));
console.log('index limit :', Object.keys(edge));
console.log('string re-add :', Object.keys(strings));
console.log('integer re-add:', Object.keys(integers));
console.log('a Map       :', [...asMap.keys()]);

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
31const attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const target = { a: 1 };
const returned = Object.assign(target, { b: 2 });
const spreadOut = { ...target, c: 3 };            // target must not change

const written = [];
const holder = {
  _v: 'fixed',
  get name() { return this._v; },
  set name(value) { written.push(value); },        // deliberately does not store
};
Object.assign(holder, { name: 'Ngozi' });
const snapshot = { ...holder };

const proto = { inherited: 'from the prototype' };
const child = Object.create(proto);
child.own = 'own value';
const spreadChild = { ...child };

const assignNull = attempt(() => Object.assign(null, { a: 1 }));
const spreadNull = { ...null, ...undefined };

console.log('assign returns its target:', returned === target, target);
console.log('spread leaves it alone   :', Object.keys(target), '->', spreadOut);
console.log('setter saw               :', written, '| holder.name still', holder.name);
console.log('spread snapshot          :', snapshot.name, 'as a plain value');
console.log('inherited                :', spreadChild);
console.log('null                     :', assignNull, '|', spreadNull);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24const rents = { A1: 12000, A2: 9000, B1: 15000 };

const labels = [];
for (const [code, amount] of Object.entries(rents)) labels.push(`${code}=${amount}`);

const total = Object.entries(rents).reduce((sum, [, amount]) => sum + amount, 0);
const roundTrip = Object.fromEntries(Object.entries(rents));
const raised = Object.fromEntries(Object.entries(rents).map(([code, amount]) => [code, amount + 1000]));
const inverted = Object.fromEntries(Object.entries(rents).map(([code, amount]) => [amount, code]));

const fromMap = Object.fromEntries(new Map([['A1', 1]]));
const duplicated = Object.fromEntries([['a', 1], ['a', 2]]);

const proto = { inherited: 'skipped' };
const child = Object.create(proto);
child.own = 'listed';

console.log('entries   :', Object.entries(rents));
console.log('destructured in a loop:', labels);
console.log('total     :', total);
console.log('raised    :', raised);
console.log('inverted  :', inverted, '<- keys reordered numerically');
console.log('from a Map:', fromMap, '| duplicate key:', duplicated);
console.log('own only  :', Object.keys(child));

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
33const attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};

const config = Object.freeze({ branch: 'Ikeja', limits: { daily: 50000 } });

const written = attempt(() => { config.branch = 'Yaba'; return 'no throw'; });
const added = attempt(() => { config.extra = true; return 'no throw'; });
const removed = attempt(() => { delete config.branch; return 'no throw'; });

config.limits.daily = 1;                          // nothing stops this

const frozenList = Object.freeze([1, 2]);
const pushed = attempt(() => frozenList.push(3));

const deepFreeze = (o) => {
  for (const value of Object.values(o)) {
    if (value && typeof value === 'object') deepFreeze(value);
  }
  return Object.freeze(o);
};
const locked = deepFreeze({ branch: 'Yaba', limits: { daily: 5 } });
const deepWrite = attempt(() => { locked.limits.daily = 6; return 'no throw'; });

let holder = Object.freeze({ x: 1 });
holder = { x: 2 };                                // the variable was never frozen

console.log('write  :', written, '| add:', added, '| delete:', removed);
console.log('nested :', config.limits.daily, '<- changed');
console.log('frozen?:', Object.isFrozen(config), Object.isFrozen(config.limits));
console.log('array  :', pushed);
console.log('deep   :', deepWrite);
console.log('rebound:', holder);

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 attempt = (fn) => {
  try { return fn(); } catch (e) { return e.constructor.name; }
};
const parses = (src) => {
  try { new Function(src); return 'parsed'; } catch (e) { return e.constructor.name; }
};

const order = {
  id: 7,
  buyer: { name: 'Emeka' },
  lines: [{ item: 'rice' }],
  count: 0,
};

const present = order.buyer?.name;
const absent = order.seller?.name;
const unguarded = attempt(() => order.seller.name);

const indexed = order.lines?.[0]?.item;
const past = order.lines?.[5]?.item;

const calledMissing = order.describe?.();
const calledUnguarded = attempt(() => order.describe());

let evaluated = 0;
const idx = () => { evaluated++; return 0; };
const shortCircuit = order.seller?.lines[idx()];

const onZero = order.count?.toFixed(1);
const notAFunction = attempt(() => order.buyer.name?.());
const asTarget = parses('const o = {}; o?.a = 1;');

console.log('present   :', present, '| absent:', absent);
console.log('unguarded :', unguarded);
console.log('index     :', indexed, '| past the end:', past);
console.log('call      :', calledMissing, '| unguarded:', calledUnguarded);
console.log('skipped   :', shortCircuit, 'and idx() ran', evaluated, 'times');
console.log('on zero   :', onZero, '<- 0 is not nullish');
console.log('not a fn  :', notAFunction, '| as a target:', asTarget);

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 parses = (src) => {
  try { new Function(src); return 'parsed'; } catch (e) { return e.constructor.name; }
};

const given = { discount: 0, note: '', branch: null };

const withNullish = given.discount ?? 10;
const withOr = given.discount || 10;
const nullBranch = given.branch ?? 'Ikeja';
const blankNote = given.note ?? 'none';

const cfg = { retries: 0, label: null };
cfg.retries ??= 3;                                // 0 is not nullish: left alone
cfg.label ??= 'unnamed';

const loose = { retries: 0 };
loose.retries ||= 3;                              // 0 is falsy: overwritten

const stall = { owner: 'ngozi', area: undefined };
stall.owner &&= stall.owner.toUpperCase();
stall.area &&= 'never assigned';

let writes = 0;
const box = {
  _v: 'set',
  get v() { return this._v; },
  set v(value) { writes++; this._v = value; },
};
box.v ??= 'other';                                // getter is not nullish, so no write

const mixedUp = parses('const a = 1, b = 2, c = 3; return a ?? b || c;');
const parenthesised = parses('const a = 1, b = 2, c = 3; return (a ?? b) || c;');

console.log('?? on 0   :', withNullish, '| || on 0:', withOr);
console.log('?? on null:', nullBranch, '| on an empty string:', JSON.stringify(blankNote));
console.log('??=       :', cfg, '| ||=:', loose);
console.log('&&=       :', stall.owner, stall.area, 'key still there:', 'area' in stall);
console.log('setter    :', writes, 'writes, value still', box.v);
console.log('mixing    :', mixedUp, '| parenthesised:', parenthesised);