Why is it always faster to access object properties than array items? [closed]

Question

I have benchmarked two methods:

Access array items

var object = [10, 15, 20];
var x = object[0];
var y = object[1];
var z = object[2];

and Access object properties

var object = {
  x: 10,
  y: 15,
  z: 20
};
var x = object.x;
var y = object.y;
var z = object.z;

I expected the access to array items to be much faster, since there's no property name resolution involved.

However, to my surprise, accessing object properties was roughly 30% faster across all browsers.

[URL to benchmark]

That benchmark results made me confused. For what reason should the former method be so much slower than the latter?

Answer 1

You have included the creation of the object and the array in the test. If you put that in the initialisation code, the difference becomes very small:

http://jsperf.com/object-properties-and-array-items/2