Run results for: Getter / Setter vs Proxy vs Events

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser: Firefox 132

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

plain object

290.3M/s

getter / setter

253.3M/s

events (kinda cheating)

10.1M/s

proxy

6.4M/s

events

3.7M/s

View exact numbers

Test name	Executions per second
✓ plain object	290,307,616 Ops/sec
getter / setter	253,318,848 Ops/sec
events (kinda cheating)	10,107,153 Ops/sec
proxy	6,376,990 Ops/sec
events	3,721,198 Ops/sec

Script Preparation code:

data1 = {};
handler = {
  get: (target, prop) => (target[prop]),
  set: (target, prop, value) => (target[prop] = value),
};
proxy = new  Proxy(data1, handler);
data2 = {
  get test() {
    return this._test;
  },
  set test(value) {
    return this._test = value;
  }
};
const EVENTS = new WeakMap();
function pub(object, event, data) {
  if (!EVENTS.has(object)) { return; }
  const callbacks = EVENTS.get(object)[event];
  if (callbacks) {
    for (const callback of callbacks) {
      callback(data);
    }
  }
}
function sub(object, event, callback) {
  let dict;
  if (!EVENTS.has(object)) {
    EVENTS.set(object, dict={});
  } else {
    dict = EVENTS.get(object);
  }
  let evList;
  if (event in dict) {
    (evList = dict[event]).push(callback);
  } else {
    evList = dict[event] = [callback];
  }
  return function unsub() {
    evList.splice(evList.indexOf(callback), 1);
  }
}
data3 = {};
sub(data3, 'set-test', v => data3.test = v);
sub(data3, 'get-test', () => pub(data3, 'getting-test', data3.test));
sub(data3, 'getting-test', v => a += v);
var a = 0;
data4 = {};
data5 = {};
sub(data5, 'set-test', v => { data5.test = v; pub(data5, 'getting-test', data3.test); });
sub(data5, 'getting-test', v => a += v);

Tests:

getter / setter
data2.test = Math.random(); a += data2.test;
proxy
proxy.test = Math.random(); a += proxy.test;
events
pub(data3, 'set-test', Math.random()); pub(data3, 'get-test');
plain object
data4.test = Math.random(); a += data4.test;
events (kinda cheating)
// note that is almost certainly not accurate since it probably ends after this function is called, not when getting-test triggers pub(data3, 'set-test', Math.random());