Functions And Closures

// what the parser decides for each variable (part 1), as it shows up at runtime
function handler(evt) {                 // evt: register (nothing captures it)
  const el = evt.target                 // el: context slot (the arrow below captures it)
  const rows = buildRows(evt.data)      // rows: context slot (captured by... see below)
  const id = el.dataset.id              // id: register
  table.replaceChildren(...rows)
  el.addEventListener('click', () => {  // this closure's context = handler's context: {el, rows}
    highlight(el)                       // uses el only. but the context also holds rows.
  })
}
// rows is captured because some inner function references it? no: nothing references rows inside a closure here...
// correction: in this version rows is NOT captured (no inner function reads it) → register → dies with the frame. good.
// add one line:  console.log(() => rows.length)  → now rows is context-allocated, and the click handler retains it forever.

// the rule: a variable is in the context if ANY inner function references it; the context is shared by ALL inner functions.

class Button {
  constructor() { this.clicks = 0 }
  handle() { this.clicks++ }
}
const b = new Button()
el.addEventListener('click', b.handle)            // this = el (the event target): wrong object; clicks is NaN on el
el.addEventListener('click', () => b.handle())    // arrow: b.handle() is a method call; this = b
el.addEventListener('click', b.handle.bind(b))    // bound: this = b; allocates one JSBoundFunction once
class Button2 { handle = () => { this.clicks++ } } // class field arrow: a closure per instance (memory) but this is fixed

// cost ranking for a hot handler, warm: arrow wrapper ≈ bound ≈ field-arrow (all one indirection or inlined)
// memory ranking: prototype method (one fn) < bound (one wrapper per bind) < field arrow (one closure per instance)