Run results for: Direct access vs Class accessors vs Object.defineProperty

Run details:

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

Browser: Chrome 136

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Creation of basic object	5553372.5 Ops/sec
Creation of setter object	2430836.8 Ops/sec
Creation of accessor object	65086.1 Ops/sec
Creation of basic class	5521134.0 Ops/sec
Creation of setter class	5542558.5 Ops/sec
Creation of accessor class	5505871.5 Ops/sec
Increment basic object value	142708.9 Ops/sec
Increment setter object value	140263.7 Ops/sec
Increment accessor object value	193267.8 Ops/sec
Increment basic class value	141701.2 Ops/sec
Increment setter class value	142035.9 Ops/sec
Increment accessor class value	5567861.5 Ops/sec

Script Preparation code:


function createBasicObject() {
  return { value: 0, dirty: false }
}

function createSetterObject() {
  const object = {
    value: 0,
    dirty: false,

    setValue(value) {
      if (value !== object.value) {
        object.value = value;
        object.dirty = true;
      }
    }
  }
  return object
}

function createAccessorObject() {
  let _value = 0;

  const object = {
    value: _value,
    dirty: false,
  };

  Object.defineProperty(object, "value", {
    get() {
      return _value;
    },
    set(value) {
      if (value !== _value) {
        _value = value;
        this.dirty = true;
      }
    },
  });

  return object;
}

class BasicClass {
  value = 0;
  dirty = false;
}

class SetterClass {
  value = 0;
  dirty = false;

  setValue(value) {
    if (value !== this.value) {
      this.value = value;
      this.dirty = true;
    }
  }
}

class AccessorClass {
  dirty = false;

  _value = 0;

  get value() {
    return this._value;
  }

  set value(value) {
    if (value !== this._value) {
      this._value = value;
      this.dirty = true;
    }
  }
}

const COUNT = 100

const basicObjects = new Array(COUNT)
for (let i=0; i<100; i++) {
  basicObjects[i] = createBasicObject()
}

const setterObjects = new Array(COUNT)
for (let i=0; i<100; i++) {
  setterObjects[i] = createSetterObject()
}

const accessorObjects = new Array(COUNT)
for (let i=0; i<100; i++) {
  accessorObjects[i] = createAccessorObject()
}

const basicClasses = new Array(COUNT)
for (let i=0; i<100; i++) {
  basicClasses[i] = new BasicClass()
}

const setterClasses = new Array(COUNT)
for (let i=0; i<100; i++) {
  setterClasses[i] = new SetterClass()
}

const accessorClasses = new Array(COUNT)
for (let i=0; i<100; i++) {
  accessorClasses[i] = new AccessorClass()
}

Tests:

Creation of basic object
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = createBasicObject() }
Creation of setter object
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = createSetterObject() }
Creation of accessor object
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = createAccessorObject() }
Creation of basic class
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = new BasicClass() }
Creation of setter class
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = new SetterClass() }
Creation of accessor class
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = new AccessorClass() }
Increment basic object value
for (let i=0; i<100; i++) { obj = basicObjects[i] obj.value++ obj.dirty = true }
Increment setter object value
for (let i=0; i<100; i++) { obj = setterObjects[i] obj.setValue(obj.value + 1) }
Increment accessor object value
for (let i=0; i<100; i++) { accessorObjects[i].value++ }
Increment basic class value
for (let i=0; i<100; i++) { obj = basicClasses[i] obj.value++ obj.dirty = true }
Increment setter class value
for (let i=0; i<100; i++) { obj = setterClasses[i] obj.setValue(obj.value + 1) }
Increment accessor class value
for (let i=0; i<100; i++) { accessorClasses[i].value++ }

Run results for: Direct access vs Class accessors vs Object.defineProperty

Creation of basic object

Creation of setter object

Creation of accessor object

Creation of basic class

Creation of setter class

Creation of accessor class

Increment basic object value

Increment setter object value

Increment accessor object value

Increment basic class value

Increment setter class value

Increment accessor class value