JavaScript: Object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22const student = { name: 'David Rayy', sclass: 'VI', rollno: 12 };

const listProperties = (obj) => Object.keys(obj).join(',');

// for...in walks the prototype chain too. Same answer here, different answer
// as soon as anything is inherited.
function listByForIn(obj) {
  const keys = [];
  for (const key in obj) keys.push(key);
  return keys.join(',');
}

// Something with an inherited property, to show the difference.
const base = { fare: 4500 };
const trip = Object.create(base);
trip.plate = 'LAG-441-XA';

console.log('Object.keys :', listProperties(student));
console.log('for...in    :', listByForIn(student));
console.log('--- with an inherited property ---');
console.log('Object.keys :', listProperties(trip), '<- own only');
console.log('for...in    :', listByForIn(trip), '<- includes the inherited fare');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17const student = { name: 'David Rayy', sclass: 'VI', rollno: 12 };

console.log('before:', JSON.stringify(student));

// Non-destructive: pull the key out into its own variable and keep the rest.
const { rollno, ...withoutRollno } = student;
console.log('copy without rollno:', JSON.stringify(withoutRollno));
console.log('original still intact:', JSON.stringify(student));

// The difference between deleting and blanking.
const blanked = { ...student, rollno: undefined };
console.log('set to undefined:', JSON.stringify(blanked), '<- JSON drops it...');
console.log('...but the key is still there:', Object.keys(blanked));

// Destructive, as the question asks.
const removed = delete student.rollno;
console.log('after delete:', JSON.stringify(student), ' delete returned', removed);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17const student = { name: 'David Rayy', sclass: 'VI', rollno: 12 };

const size = (obj) => Object.keys(obj).length;

// An object with one of each kind of property, to show what each count includes.
const mixed = { visible: 1 };
Object.defineProperty(mixed, 'hidden', { value: 2, enumerable: false });
mixed[Symbol('tag')] = 3;
const inheriting = Object.create(mixed);
inheriting.own = 4;

console.log('size(student):', size(student), ' (objects have no .length:', student.length, ')');
console.log('--- the three levels of counting ---');
console.log('Object.keys              :', Object.keys(mixed), '-> enumerable string keys');
console.log('Object.getOwnPropertyNames:', Object.getOwnPropertyNames(mixed), '-> plus non-enumerable');
console.log('Reflect.ownKeys          :', Reflect.ownKeys(mixed).map(String), '-> plus symbols');
console.log('a Map does have .size    :', new Map([['a', 1]]).size);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19const library = [
  { author: 'Bill Gates', title: 'The Road Ahead', readingStatus: true },
  { author: 'Steve Jobs', title: 'Walter Isaacson', readingStatus: true },
  { author: 'Suzanne Collins', title: 'Mockingjay: The Final Book of The Hunger Games', readingStatus: false },
];

const describe = ({ title, author, readingStatus }) =>
  `${title} by ${author} — ${readingStatus ? 'already read' : 'not read yet'}`;

const report = (books) => books.map(describe);

// Split the list into the two groups.
const read = library.filter((b) => b.readingStatus);
const unread = library.filter((b) => !b.readingStatus);

for (const line of report(library)) console.log(line);
console.log('---');
console.log('read:', read.length, ' unread:', unread.length);
console.log('titles read:', read.map((b) => b.title));

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
33class Cylinder {
  constructor(radius, height) {
    if (radius <= 0 || height <= 0) throw new RangeError('radius and height must be positive');
    this.radius = radius;
    this.height = height;
  }

  // Computed on read, so it stays correct if radius or height changes.
  get volume() {
    return Math.PI * this.radius ** 2 * this.height;
  }

  get surfaceArea() {
    return 2 * Math.PI * this.radius * (this.radius + this.height);
  }

  // Formatting is a separate job from calculating.
  toFixed(places = 4) {
    return this.volume.toFixed(places);
  }
}

const tank = new Cylinder(4, 10);
const refused = (() => { try { new Cylinder(0, 5); return 'no error'; } catch (e) { return e.constructor.name; } })();

console.log('radius 4, height 10');
console.log('exact volume  :', tank.volume);
console.log('to 4 decimals :', tank.toFixed());
console.log('surface area  :', tank.surfaceArea.toFixed(4));
console.log('negative input:', refused);
console.log('--- a getter recomputes, so changing the radius updates the volume ---');
tank.radius = 2;
console.log('radius now 2  :', tank.toFixed());

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
28function bubbleSort(input) {
  const values = input.slice();              // do not modify the caller's array
  let passes = 0;

  for (let end = values.length - 1; end > 0; end--) {
    let swapped = false;
    for (let i = 0; i < end; i++) {          // end shrinks: the tail is done
      if (values[i] > values[i + 1]) {
        [values[i], values[i + 1]] = [values[i + 1], values[i]];
        swapped = true;
      }
    }
    passes++;
    if (!swapped) break;                     // already sorted, stop
  }
  return { values, passes };
}

const sort = (input) => bubbleSort(input).values;

const sample = [6, 4, 0, 3, -2, 1];

console.log('input :', sample);
console.log('sorted:', sort(sample));
console.log('input afterwards:', sample, '<- unchanged');
console.log('--- the early exit earns its place ---');
console.log('passes for already-sorted [1,2,3,4,5]:', bubbleSort([1, 2, 3, 4, 5]).passes);
console.log('passes for reversed      [5,4,3,2,1]:', bubbleSort([5, 4, 3, 2, 1]).passes);

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// Every contiguous run, ordered by start then by length. That is exactly the
// ordering the source's expected output shows.
function substrings(text) {
  const out = [];
  for (let start = 0; start < text.length; start++) {
    for (let end = start + 1; end <= text.length; end++) {
      out.push(text.slice(start, end));
    }
  }
  return out;
}

// A subsequence keeps order but allows gaps, so 'dg' IS included. Different
// question, and the source's expected output rules it out.
function subsequences(text) {
  if (text.length === 0) return [''];
  const [first, ...rest] = text;
  const without = subsequences(rest.join(''));
  return [...without, ...without.map((s) => first + s)].filter((s) => s !== '');
}

console.log("substrings('dog')  :", substrings('dog'));
console.log("subsequences('dog'):", subsequences('dog').sort(), '<- note "dg"');
console.log('count for a 4-letter word:', substrings('bus').length, 'vs', substrings('trip').length);
console.log('n(n+1)/2 for n=4:', (4 * 5) / 2);

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// ---- the stand-in ----------------------------------------------------------
// The build has no second to wait, so time is injected. makeClock is the fake;
// the real setInterval and Date are what you would pass in a browser.
function makeClock(startSeconds = 0) {
  let now = startSeconds;
  let jobs = [];
  return {
    now: () => now,
    setInterval(fn, ms) {
      const job = { fn, ms, next: now + ms / 1000 };
      jobs.push(job);
      return job;
    },
    clearInterval(job) { jobs = jobs.filter((j) => j !== job); },
    // Drive time forward and fire whatever is due.
    advance(seconds) {
      const target = now + seconds;
      while (true) {
        const due = jobs.filter((j) => j.next <= target).sort((a, b) => a.next - b.next)[0];
        if (!due) break;
        now = due.next;
        due.next += due.ms / 1000;
        due.fn();
      }
      now = target;
    },
  };
}

// ---- the answer ------------------------------------------------------------
const two = (n) => String(n).padStart(2, '0');

const formatTime = (totalSeconds) => {
  const s = ((totalSeconds % 86400) + 86400) % 86400;      // wrap at midnight
  return [Math.floor(s / 3600), Math.floor(s / 60) % 60, s % 60].map(two).join(':');
};

function startClock(clock, onTick) {
  const handle = clock.setInterval(() => onTick(formatTime(clock.now())), 1000);
  return () => clock.clearInterval(handle);
}

// In a browser this line is the whole thing:
// setInterval(() => console.log(new Date().toTimeString().slice(0, 8)), 1000);

// 14:37:42 is 52662 seconds past midnight, matching the source's sample output.
const clock = makeClock(14 * 3600 + 37 * 60 + 42);
const ticks = [];
const stop = startClock(clock, (t) => ticks.push(t));

clock.advance(6);        // six seconds, instantly
stop();
clock.advance(10);       // nothing more should arrive

for (const t of ticks) console.log(t);

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
37class Circle {
  constructor(radius) {
    if (!Number.isFinite(radius) || radius <= 0) {
      throw new RangeError('radius must be a positive, finite number');
    }
    this.radius = radius;
  }

  area() { return Math.PI * this.radius ** 2; }
  perimeter() { return 2 * Math.PI * this.radius; }

  // Formatting kept apart from the maths.
  report(places = 4) {
    return `r=${this.radius} area=${this.area().toFixed(places)} perimeter=${this.perimeter().toFixed(places)}`;
  }
}

const bad = (value) => {
  try { new Circle(value); return 'accepted'; } catch (e) { return e.constructor.name; }
};

// Comparing computed floats needs a tolerance, not ===. See the note.
const close = (a, b, tolerance = 1e-12) => Math.abs(a - b) < tolerance;

const c = new Circle(3);
console.log(c.report());
console.log('area      :', c.area());
console.log('perimeter :', c.perimeter());
console.log('--- area / perimeter should be exactly r / 2 ---');
for (const r of [3, 7]) {
  const circle = new Circle(r);
  const ratio = circle.area() / circle.perimeter();
  console.log(`r=${r}  ratio=${ratio}  r/2=${r / 2}  exactly equal? ${ratio === r / 2}`);
}
console.log('<- true for r=3, false for r=7, and the maths is identical');
console.log('--- rejected inputs ---');
for (const v of [0, -1, NaN, Infinity, '3']) console.log(String(v).padEnd(10), bad(v));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21const library = [
  { title: 'The Road Ahead', author: 'Bill Gates', libraryID: 1254 },
  { title: 'Walter Isaacson', author: 'Steve Jobs', libraryID: 4264 },
  { title: 'Mockingjay: The Final Book of The Hunger Games', author: 'Suzanne Collins', libraryID: 3245 },
];

// Copy first: sort() would reorder the caller's array.
const byNumber = (list, key) => list.slice().sort((a, b) => a[key] - b[key]);
const byNumberDesc = (list, key) => list.slice().sort((a, b) => b[key] - a[key]);

// Text needs localeCompare, and it needs an explicit locale or the result
// depends on the machine running it.
const byText = (list, key) => list.slice().sort((a, b) => a[key].localeCompare(b[key], 'en'));

console.log('by ID ascending :', byNumber(library, 'libraryID').map((b) => b.libraryID));
console.log('by ID descending:', byNumberDesc(library, 'libraryID').map((b) => b.libraryID));
console.log("<- descending is the order in the source's expected output");
console.log('by author       :', byText(library, 'author').map((b) => b.author));
console.log('original untouched:', library.map((b) => b.libraryID));
console.log('--- and the reason to pass a comparator at all ---');
console.log('IDs sorted with no comparator:', [1254, 4264, 3245].slice().sort(), '<- text order');

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
33function methodsOf(obj) {
  return Object.getOwnPropertyNames(obj).filter((key) => {
    // Some properties are accessors that throw when read (fn.caller in strict
    // mode). A plain typeof check would blow up on them.
    try { return typeof obj[key] === 'function'; } catch { return false; }
  });
}

// Own methods only misses inherited ones, which is usually what you want to see.
function allMethodsOf(obj) {
  const found = new Set();
  for (let o = obj; o && o !== Object.prototype; o = Object.getPrototypeOf(o)) {
    for (const key of methodsOf(o)) found.add(key);
  }
  return [...found];
}

class Bus {
  constructor(plate) { this.plate = plate; }
  board() {}
  depart() {}
}

console.log('own property names of Array:', Object.getOwnPropertyNames(Array));
console.log('methods of Array           :', methodsOf(Array));
console.log("--- the source's list is from an older engine ---");
for (const name of ['isArray', 'from', 'of', 'observe', 'unobserve', 'arguments', 'caller']) {
  console.log(String(name).padEnd(12), 'own property of Array?', Object.getOwnPropertyNames(Array).includes(name));
}
console.log('--- a class puts its methods on the prototype ---');
console.log('own methods of an instance :', methodsOf(new Bus('LAG-441-XA')));
console.log('methods on the prototype   :', methodsOf(Bus.prototype));
console.log('walking the chain          :', allMethodsOf(new Bus('LAG-441-XA')));

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
28function parseUrl(input) {
  let url;
  try { url = new URL(input); } catch { return null; }     // invalid: say so, do not throw

  return {
    protocol: url.protocol,          // includes the ':'
    hostname: url.hostname,          // no port
    host: url.host,                  // with port, if any
    port: url.port,                  // '' when default for the protocol
    pathname: url.pathname,
    search: url.search,
    hash: url.hash,
    query: Object.fromEntries(url.searchParams),
  };
}

const sample = 'https://www.example.com:8080/routes/lagos?from=Ojota&to=Abuja#seats';
const parsed = parseUrl(sample);

console.log(parsed);
console.log('--- defaults and edge cases ---');
console.log("port when default   :", JSON.stringify(parseUrl('https://example.com/').port), '<- empty, not 443');
console.log('pathname when absent:', JSON.stringify(parseUrl('https://example.com').pathname), '<- always at least /');
console.log('invalid input       :', parseUrl('not a url'));
console.log('--- repeated query keys ---');
const repeated = new URL('https://x.com/?tag=a&tag=b');
console.log('fromEntries keeps the last:', Object.fromEntries(repeated.searchParams));
console.log('getAll keeps both        :', repeated.searchParams.getAll('tag'));

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
43function allPropertyNames(obj) {
  const found = new Set();
  for (let o = obj; o !== null; o = Object.getPrototypeOf(o)) {
    for (const key of Object.getOwnPropertyNames(o)) found.add(key);
  }
  return [...found];
}

// Stopping before Object.prototype, which is usually the useful version:
// otherwise every answer ends in toString, valueOf, hasOwnProperty...
function ownAndInherited(obj) {
  const found = new Set();
  for (let o = obj; o && o !== Object.prototype; o = Object.getPrototypeOf(o)) {
    for (const key of Object.getOwnPropertyNames(o)) found.add(key);
  }
  return [...found];
}

// for...in: inherited, but enumerable only.
function enumerableNames(obj) {
  const keys = [];
  for (const key in obj) keys.push(key);
  return keys;
}

class Vehicle {
  constructor() { this.wheels = 4; }
  move() {}
}
class Bus extends Vehicle {
  constructor() { super(); this.seats = 14; }
  board() {}
  move() {}                       // shadows Vehicle.move
}

const bus = new Bus();

console.log('own only            :', Object.getOwnPropertyNames(bus));
console.log('own and inherited   :', ownAndInherited(bus));
console.log('for...in            :', enumerableNames(bus), '<- class methods are not enumerable');
console.log('all the way up      :', allPropertyNames(bus).length, 'names, ending at Object.prototype');
console.log('includes toString?  :', allPropertyNames(bus).includes('toString'));
console.log('move appears once?  :', ownAndInherited(bus).filter((k) => k === 'move').length, '<- shadowed, not duplicated');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const student = { name: 'David Rayy', sclass: 'VI', rollno: 12 };

const valuesOf = (obj) => Object.values(obj);

// Before Object.values existed, this was the way. Still useful for the shape.
const valuesByMap = (obj) => Object.keys(obj).map((k) => obj[k]);

const withInherited = Object.create({ inherited: 'not mine' });
withInherited.own = 'mine';

console.log('values :', valuesOf(student));
console.log('keys   :', Object.keys(student));
console.log('entries:', Object.entries(student));
console.log('inherited value is skipped:', valuesOf(withInherited), '<- own only');
console.log('but readable:', withInherited.inherited);
console.log('duplicates are kept:', valuesOf({ a: 1, b: 1, c: 2 }));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const student = { name: 'David Rayy', sclass: 'VI', rollno: 12 };

const toPairs = (obj) => Object.entries(obj);
const fromPairs = (pairs) => Object.fromEntries(pairs);

// Pairs are what make transforming an object convenient.
const mapValues = (obj, fn) => fromPairs(toPairs(obj).map(([k, v]) => [k, fn(v)]));
const filterKeys = (obj, keep) => fromPairs(toPairs(obj).filter(([k]) => keep(k)));

// The round trip is shallow: the nested object is the SAME object.
const nested = { id: 1, seats: { total: 14, taken: 3 } };
const copy = fromPairs(toPairs(nested));
copy.seats.taken = 9;

console.log('pairs        :', toPairs(student));
console.log('back again   :', fromPairs(toPairs(student)));
console.log('as a Map     :', new Map(toPairs(student)));
console.log('uppercased   :', mapValues({ a: 'x', b: 'y' }, (v) => v.toUpperCase()));
console.log('--- the round trip is shallow ---');
console.log('changed the copy, and the original says:', nested.seats.taken);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21const invert = (obj) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));

// Keeping every key that shared a value, rather than losing all but one.
const invertToLists = (obj) => {
  const out = {};
  for (const [k, v] of Object.entries(obj)) (out[v] ??= []).push(k);
  return out;
};

const codes = { lagos: 'LOS', abuja: 'ABV', kano: 'KAN' };
const collides = { ojota: 'lagos', yaba: 'lagos', wuse: 'abuja' };
const numeric = { a: 1, b: 2 };

console.log('codes inverted   :', invert(codes));
console.log('twice gets back  :', invert(invert(codes)));
console.log('--- values that collide ---');
console.log('naive invert     :', invert(collides), '<- ojota is gone');
console.log('grouped invert   :', invertToLists(collides));
console.log('--- values that were not strings ---');
console.log('numeric inverted :', invert(numeric));
console.log('key types        :', Object.keys(invert(numeric)).map((k) => typeof k), '<- 1 became "1"');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23const byUndefined = (obj, key) => obj[key] !== undefined;      // careless
const byIn = (obj, key) => key in obj;                          // own + inherited
const byHasOwn = (obj, key) => Object.hasOwn(obj, key);         // own only
const byKeys = (obj, key) => Object.keys(obj).includes(key);    // own + enumerable

const bus = { plate: 'LAG-441-XA', driver: undefined };
const inheriting = Object.create({ fare: 4500 });
inheriting.plate = 'ABJ-772-KM';

// hasOwnProperty is inherited, so an object without a prototype does not have it.
const bare = Object.create(null);
bare.plate = 'ENU-318-PH';
const bareHasOwnProperty = typeof bare.hasOwnProperty;

console.log('--- a property whose value IS undefined ---');
console.log('driver !== undefined:', byUndefined(bus, 'driver'), '<- says no, wrongly');
console.log("'driver' in bus     :", byIn(bus, 'driver'), '<- says yes, correctly');
console.log('--- an inherited property ---');
console.log("'fare' in inheriting     :", byIn(inheriting, 'fare'));
console.log('Object.hasOwn(.., fare)  :', byHasOwn(inheriting, 'fare'), '<- own only');
console.log('--- a prototype-less object ---');
console.log('bare.hasOwnProperty is', bareHasOwnProperty, '<- calling it would throw');
console.log('Object.hasOwn still works:', byHasOwn(bare, 'plate'));

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// ---- the stand-in ----------------------------------------------------------
// The build runs in Node, which has no DOM, so these fakes stand in for real
// elements. They carry the exact properties the check looks at, which is the
// point: the check is duck-typed, so a faithful fake passes and a lookalike
// with the wrong nodeType does not.
const fakeElement = { nodeType: 1, nodeName: 'DIV', tagName: 'DIV' };
const fakeTextNode = { nodeType: 3, nodeName: '#text' };
const fakeDocument = { nodeType: 9, nodeName: '#document' };

// ---- the answer ------------------------------------------------------------
// Duck-typing: nodeType 1 is ELEMENT_NODE, and nodeName must be a string.
// Works in Node, in a browser, and across iframes.
function isElement(v) {
  return typeof v === 'object'
    && v !== null
    && v.nodeType === 1
    && typeof v.nodeName === 'string';
}

// instanceof, guarded so it does not throw where the global is missing.
function isElementByInstance(v) {
  return typeof HTMLElement !== 'undefined' && v instanceof HTMLElement;
}

const hasDom = typeof HTMLElement !== 'undefined';

// In a browser this is the real thing:
// isElement(document.querySelector('h1'))  ->  true

console.log('running with a real DOM?', hasDom);
console.log('fake element   :', isElement(fakeElement));
console.log('fake text node :', isElement(fakeTextNode), '<- nodeType 3, not an element');
console.log('fake document  :', isElement(fakeDocument), '<- nodeType 9');
console.log('plain object   :', isElement({}));
console.log('the guarded instanceof check did not throw:', isElementByInstance(fakeElement));