Run results for: Closures vs Calls (with setup incl)

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 the same calc function with different arguments	181.0 Ops/sec
Call separate closures for each calc	250.4 Ops/sec

Script Preparation code:

window.data = []
for (let i = 0; i < 1000; i++) {
  window.data.push({a: Math.floor(Math.random() * 100), b: Math.floor(Math.random() * 100)})
}

Tests:

Call the same calc function with different arguments
const { data } = window 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}` } } const 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]]) } fnCalls.forEach(([fn, thisArg, args] = call) => console.log(fn.apply(thisArg, args)) )
Call separate closures for each calc
const { data } = window const 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) } fns.forEach(fn => console.log(fn()))