Property Getter / Setter Techniques (v25)

Revision 25 of this benchmark created on

Description

Testing various techniques for creating getters / setters in JavaScript.

Testing a variation of 'Combined getter / setter method'. I had heard that using the 'arguments' object requires a heavy performance hit

Preparation HTML

<script>
  var global = this;

  (function() {
    global.obj1 = {
      start: {
        row: 1,
        col: 1
      }
    };

    global.obj2 = {
      _start: {
        row: 1,
        col: 1
      },
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      }
    };

    global.obj4 = {
      _start: 1,
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      }
    };

    global.obj5 = {
      _start: {
        row: 1,
        col: 1
      },
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      },
      modifyRow: function(delta) {
        this.row += delta;
      }
    };


    global.obj6 = {
      _start: {
        row: 1,
        col: 1
      },
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      },
      modify: function(key, delta) {
        this[key] += delta;
      }
    };

    global.obj7 = {
      _start: {
        row: 1,
        col: 1
      },
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      },
      modifyRow: function(delta) {
        this.row = this.row + delta;
      }
    };


    function Cell() {
      this._start = {
        row: 1,
        col: 1
      }
    }
    Cell.prototype = {
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      },
      modifyRow: function(delta) {
        this.row = this.row + delta;
      },
      modifyCol: function(delta) {
        this.col = this.col + delta;
      }
    };
    global.obj8 = new Cell();
    global.obj9 = new Cell();

    function Cell2() {
      this._start = {
        row: 1,
        col: 1
      }
    }
    Cell2.prototype = {
      start: function(val) {
        if (val) {
          this._start.row = val.row;
          this._start.col = val.col;
        } else {
          return this._start;
        }
      },
      modifyRow: function(delta) {
        this.row = this.row + delta;
      },
      modifyCol: function(delta) {
        this.col = this.col + delta;
      }
    };
    global.obj10 = new Cell2();
  })();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Direct property change
var old = global.obj1.start;
global.obj1.start = {
  row: old.row + 1,
  col: old.col
}
ready
Getter/setter method
var old = global.obj2.start();
global.obj2.start({
  row: old.row + 1,
  col: old.col
});
ready
Direct property change w/body
var old = global.obj1.start;
global.obj1.start = {
  row: old.row + 1,
  col: old.col,
  element: document.getElementsByTagName('DIV')[0]
}
ready
Primitive
var old = global.obj4.start();
global.obj4.start(old + 1);
ready
Modify row
global.obj5.modifyRow(1);
ready
Modify [key]
global.obj6.modify('row', 1);
ready
Modify row without sugar
global.obj7.modifyRow(1);
ready
Using an object
global.obj8.modifyRow(1);
ready
Set all object
global.obj9.start({
  row: 4,
  col: 7
});
ready
Set all object (using props)
global.obj10.start({
  row: 4,
  col: 7
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.