What is the most efficient way to handle points / small vectors in JavaScript?

Question

Currently I'm creating an web based (= JavaScript) application thata is using a lot of "points" (= small, fixed size vectors). There are basically two obvious ways of representing them:

var pointA = [ xValue, yValue ];

and

var pointB = { x: xValue, y: yValue };

So translating my point a bit would look like:

var pointAtrans = [ pointA[0] + 3, pointA[1] + 4 ];
var pointBtrans = { x: pointB.x + 3, pointB.y + 4 };

Both are easy to handle from a programmer point of view (the object variant is a bit more readable, especially as I'm mostly dealing with 2D data, seldom with 3D and hardly with 4D - but never more. It'll allways fit into x,y,z and w)

But my question is now:
What is the most efficient way from the language perspective - theoretically and in real implementations?
What are the memory requirements?
What are the setup costs of an array vs. an object?
...

My target browsers are FireFox and the Webkit based ones (Chromium, Safari), but it wouldn't hurt to have a great (= fast) experience under IE and Opera as well...

Answer 1

Arrays are faster to create, but if you consider access time it's the other way around. Also note, that constructor form is fast to create and access. It has the best of both words in modern implementations new Vector(x, y) - [Test]

Browsers tested: Chrome 10, Firefox 3.6, Firefox Beta 4.0b9, IE 9 Preview 7, Opera 11