JavaScript Part 2 cheat sheet

• An object is a bag of properties plus one hidden [[Prototype]] link. A read walks the chain until null; a write makes an own property.
• Fn.prototype becomes the prototype of new Fn() objects. __proto__ reads or writes any object's link; prefer Object.getPrototypeOf.
• new = create an object from Fn.prototype, run Fn with this = it, return it (unless Fn returns another object).

function myNew(Ctor, ...args) {
  const obj = Object.create(Ctor.prototype);
  const r = Ctor.apply(obj, args);
  return r instanceof Object ? r : obj;
}

Watch out: obj.count++ on an inherited count creates an own property. obj.list.push(1) on an inherited array changes the shared one. Put mutable defaults in the constructor.

• All three are shallow. Sloppy mode fails silently; strict mode throws TypeError.
• Descriptor: value, writable, enumerable, configurable (or get, set). Assignment sets all on; defineProperty sets all off.
• in and for...in see the whole chain. Object.hasOwn, keys, entries see own properties only.

fn.call(x, a, b)

Run now, arguments listed

fn.apply(x, [a, b])

Run now, arguments in an array

fn.bind(x, a)

Return a new function, this fixed, not run

Watch out: const f = obj.method; f() loses this. Fix: wrapper () => obj.method(), bind, or an arrow field. removeEventListener needs the same reference.

class Animal {
  #age = 0;                 // truly private
  static count = 0;
  constructor(name) { this.name = name; }
  speak() { return this.name; }
}
class Dog extends Animal {
  constructor(name) {
    super(name);       // before any this
    this.tricks = [];
  }
}

• A class is a function; methods sit on Class.prototype. Extras over functions: needs new, always strict, methods not enumerable, #private.
• #x is enforced and hidden from keys and JSON; _x is only a habit.
• this before super() is a ReferenceError. Child fields are not set while the parent constructor runs.
• instanceof checks Ctor.prototype on the chain. Use Array.isArray for arrays. Mixin: const M = Base => class extends Base {}.

• States: pending, then fulfilled or rejected, once. Handlers always run later as microtasks.
• then returns a new promise: a returned value fulfills, a returned promise is followed, a throw rejects, a missing handler passes through.
• Order: sync code, then nextTick (Node CJS), then promise microtasks, then timers. Microtasks always beat the next timer.

setTimeout(() => log("timer"), 0);
Promise.resolve().then(() => log("p"));
process.nextTick(() => log("tick"));
log("sync");
// sync, tick, p (promise), timer

const [a, b] = await Promise.all(
  [getA(), getB()]);
const ctl = new AbortController();
fetch(url, { signal: ctl.signal });
ctl.abort();                    // cancel
AbortSignal.timeout(3000);   // TimeoutError

Watch out: forEach does not wait for await. return await is needed inside try/catch. An unhandled rejection ends a Node 15+ process with exit code 1.

• exports only points at module.exports. exports = {} does nothing; module.exports = {} replaces all.
• Node: .mjs is ESM, .cjs is CJS, .js follows package.json "type". ESM needs full file extensions.
• CJS loads ESM with await import(); require() works on Node 22.12+ unless the module uses top-level await.

const m = await import("./chart.js");

Watch out: Cycles: CJS gives a partly filled export; ESM const exports hit the temporal dead zone. Fix by moving shared code to a third module. Tree shaking is blocked by CJS and side effects.

• Iterable: has a Symbol.iterator method. Iterator: has next() returning { value, done }. A generator is both.
• for...of calls Symbol.iterator, loops next(), and calls return() on break, return or throw.
• for...in gives string keys, inherited too. for...of gives values and throws on plain objects.
• next(x) becomes the paused yield's result; the first next argument is dropped. throw() and return() finish it.

function* naturals() {
  let n = 1;
  while (true) yield n++;  // infinite
}
const odd = naturals()
  .filter(n => n % 2).take(3);
odd.toArray();      // [1, 3, 5] Node 22

async function* pages() {  // for await
  for (let i = 1; ; i++)
    yield await load(i);
}

Symbol.iterator

Powers for...of and spread

Symbol.asyncIterator

Powers for await

Symbol.toPrimitive

Hint: default, string or number

Symbol.toStringTag

The X in [object X]

Symbol.hasInstance

Customises instanceof

Symbol.species

Constructor used by map/filter in subclasses

Tip: Symbols are unique, hidden from keys and JSON, but not private: getOwnPropertySymbols finds them. Use #private for privacy.

• Phases: capture (down), target, bubble (up). Default listeners run on bubble; { capture: true } runs on the way down.
• Use textContent for untrusted text. innerHTML can run code (XSS) and += destroys listeners.
• focus, blur, mouseenter do not bubble; use focusin, focusout.

list.addEventListener("click", e => {
  const li = e.target.closest("li");
  if (li) select(li);
}, { signal: ctl.signal });

el.dispatchEvent(new CustomEvent(
  "app:save",
  { detail: { id: 1 }, bubbles: true }));

• Options: once, capture, passive (promise not to preventDefault, keeps scrolling smooth), signal.
• removeEventListener needs the same function reference; a new arrow never matches.
• Setting .value fires no input/change. input fires per edit; change on commit. jsdom has no layout (all sizes 0).

class AppError extends Error {
  constructor(msg, opts) {
    super(msg, opts);   // passes cause
    this.name = "AppError";
  }
}
try { await load(); }  // await inside try
catch (e) {
  throw new AppError("load", { cause: e });
}
finally { release(); }

• Throw Error objects: they have stack, cause and instanceof. A thrown string has no stack.
• return inside finally replaces the earlier return and any error.
• JSON.stringify(err) is {}: message and stack are not enumerable. Build { name, message, stack, cause }.
• try { asyncFn(); } misses the rejection. Use await inside try, or .catch.

const user = new Proxy({}, {
  set(t, k, v, r) {
    if (k === "age" && !Number.isInteger(v))
      throw new TypeError("age");
    return Reflect.set(t, k, v, r);
  },
});

• Traps cover get, set, delete, in, keys and calls. Use cases: validation, logging reads.
• Limits: #private fields fail through a proxy, invariants block lies about read-only props, and reads were about 6x slower in the lesson run.

const next = { ...state,
  user: { ...state.user,
    prefs: { ...state.user.prefs,
      theme: "light" } } };
const s = arr.toSorted((a, b) => a - b);
// also toReversed, toSpliced, with(i, v)

Watch out: Object.freeze is shallow: nested edits and a frozen Map's set still work. Use a recursive deepFreeze, or readonly types.

• Freed by reachability from roots (globals, stack, timers, listeners), not by whether you still use it.
• Five usual leaks: unbounded cache, forgotten listener, uncleared timer, closure capturing too much, detached DOM node.
• WeakMap/WeakSet: keys are objects, held weakly, not iterable, no size. WeakRef and FinalizationRegistry are never for correctness.
• Buffers live outside the heap: watch arrayBuffers and rss, not only heapUsed.

1. Confirm growth in rss and heapUsed; reproduce in a loop with --expose-gc.
2. Take two heap snapshots (--inspect or v8.writeHeapSnapshot()).
3. Compare, sort by retained size, follow the retainer chain to a root.
4. Cut that path, then check memory stays flat.