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; rv:138.0) Gecko/20100101 Firefox/138.0

Browser: Firefox 138

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Creation of basic object	2912916.2 Ops/sec
Creation of setter object	1188749.4 Ops/sec
Creation of accessor object	27030.9 Ops/sec
Creation of basic class	1246028.2 Ops/sec
Creation of setter class	1249191.6 Ops/sec
Creation of accessor class	1247496.8 Ops/sec
Increment basic object value	4033589.8 Ops/sec
Increment setter object value	2327034.2 Ops/sec
Increment accessor object value	149901.6 Ops/sec
Increment basic class value	4041847.0 Ops/sec
Increment setter class value	3423087.0 Ops/sec
Increment accessor class value	4904254.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