Run results for: Closures vs Calls

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Browser: Chrome 113

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Call separate closures for each calc	25083.4 Ops/sec
Call the same calc function with different arguments	23637.5 Ops/sec

Script Preparation code:

const data = [
  {a: 1, b: 10},
  {a: 2, b: 9},
  {a: 3, b: 8},
  {a: 4, b: 7},
  {a: 5, b: 6},
  {a: 6, b: 5},
  {a: 7, b: 4},
  {a: 8, b: 3},
  {a: 9, b: 2},
  {a: 10, b: 1},
]

window.fns = []

for (let c = 0; c < data.length; c++) {
  const {a, b} = data[c];
  const fn = function() {
    return `${a} + ${b} + ${c} = ${a + b + c}`
  }
  fns.push(fn)
}


class DataItem {
  a
  b

  constructor(a, b, c) {
    this.a = a
    this.b = b
  }

  calc(c) {
    return `${this.a} + ${this.b} + ${c} = ${this.a + this.b + c}`
  }
}

window.fnCalls = []

for (let c = 0; c < data.length; c++) {
  const { a, b } = data[c]
  const dataItem = new DataItem(a, b)
  fnCalls.push([dataItem.calc, dataItem, [c]])
}

Tests:

Call separate closures for each calc
fns.forEach(fn => console.log(fn()))
Call the same calc function with different arguments
fnCalls.forEach(([fn, thisArg, args] = call) => console.log(fn.apply(thisArg, args)) )

Run results for: Closures vs Calls

Call separate closures for each calc

Call the same calc function with different arguments