JavaScript Deep Dive — Module 4: Advanced Performance, Optimization & Memory

// BAD WAY (Don't Do This): properties added in DIFFERENT orders across instances
// of 'the same kind of thing' produce DIFFERENT Shapes, forcing every call site
// that touches both to go polymorphic/megamorphic instead of monomorphic.
function createPointBad(x, y) {
  const p = {};
  if (x > 0) {
    p.x = x; // this branch assigns x, then y -- Shape A
    p.y = y;
  } else {
    p.y = y; // this branch assigns y, then x -- Shape B, even though the final
    p.x = x; // object looks identical when you log it
  }
  return p;
}

// ARCHITECT WAY (Do This): always initialize every property, in the same fixed
// order, ideally all in the constructor/literal itself. Every instance gets the
// exact same Shape from the moment it's created.
function createPointGood(x, y) {
  return { x, y }; // same order, every single call -- one Shape, forever
}

class PointGood {
  constructor(x, y) {
    this.x = x; // always assigned first
    this.y = y; // always assigned second
    // NEVER conditionally add/omit a field after this -- that creates a Shape
    // transition mid-lifecycle. If a field is sometimes absent, initialize it
    // to null/undefined explicitly instead of omitting the assignment.
  }
}

// LEAK 1: Accidental global variables.
// In non-strict mode, assigning to an undeclared identifier creates a property
// on the global object -- which is a GC root, so it NEVER becomes unreachable.
function leaky() {
  accidentalGlobal = new Array(1_000_000).fill('*'); // missing let/const/var
}

// FIX: 'use strict' turns this into a ReferenceError at the point of the bug
// instead of a silent, permanent allocation.
function fixed() {
  'use strict';
  const scoped = new Array(1_000_000).fill('*'); // freed once fixed() returns
}

// LEAK 2: Forgotten timers and callbacks.
// The interval callback closes over `hugeCache`, and setInterval's internal
// registration is itself a GC root reference to that callback -- so as long as
// the interval is running, `hugeCache` can never be collected, even if the
// component/module that created it is long gone.
function startPollingBad() {
  const hugeCache = new Map(); // accumulates data forever
  setInterval(() => {
    hugeCache.set(Date.now(), fetchLatestData());
  }, 1000);
  // no reference to the interval ID is ever kept -- it can NEVER be stopped
}

// FIX: keep the interval ID and explicitly clear it when the owning
// component/module is torn down.
function startPollingGood() {
  const cache = new Map();
  const intervalId = setInterval(() => {
    cache.set(Date.now(), fetchLatestData());
  }, 1000);
  return function stopPolling() {
    clearInterval(intervalId); // releases the callback and its closure
  };
}

// LEAK 3: Out-of-DOM (detached) references.
// Removing a node from the document does NOT free it if JavaScript still
// holds a reference -- the node, and its entire subtree, stays reachable.
const detachedNodes = []; // module-level cache
function cacheRowBad(row) {
  detachedNodes.push(row); // row removed from DOM later, but still referenced here
}

function removeRowBad(row) {
  row.remove(); // gone from the visible DOM tree...
  // ...but detachedNodes still points at it -- the entire subtree leaks
}

// FIX: don't hold long-lived references to DOM nodes you don't need anymore;
// if you must cache something about a row, cache the DATA, not the element.
function removeRowGood(row, cache) {
  const id = row.dataset.id;
  row.remove();
  cache.delete(id); // drop any reference keyed to this row at the same time
}

// LEAK 4: Closures holding large variables alive longer than intended.
// (First introduced in Module 1's closure section -- here is the concrete fix.)
function attachHandlerBad(button) {
  const massiveDataset = loadMassiveDataset(); // large, only needed once, upfront
  const summary = summarize(massiveDataset);

  // This closure only needs `summary`, but because both variables share the
  // SAME Lexical Environment record, `massiveDataset` is kept alive for as
  // long as the listener exists -- potentially the lifetime of the page.
  button.addEventListener('click', () => {
    console.log(summary);
  });
}

// FIX: null out large intermediates you no longer need, or better, scope them
// in a nested block/function so they fall out of the closure's reach entirely.
function attachHandlerGood(button) {
  const summary = (() => {
    const massiveDataset = loadMassiveDataset();
    return summarize(massiveDataset); // massiveDataset's environment record can
  })();                              // be collected once this IIFE returns

  button.addEventListener('click', () => {
    console.log(summary); // closure only ever touched `summary`
  });
}