title: Performance comparison:Array of Array vs Array of Object
body: <p>I sometimes need a list model to store a lot of different elements with a common structure, for example when using a list of 2D coordinates or a list of RGB values.</p>
  
  <p>Taking the RGB values example, I have two ways to store each element in an Array:</p>
  
  <pre><code>// using small Array
  var arrayOfArray = [[0, 0, 0], [110, 120, 130], ...]
  
  // using Object
  var arrayOfObject = [{r: 0, g: 0, b: 0}, {r: 110, g: 120, b: 130}, ...]
  </code></pre>
  
  <p>Once the array of is defined I need to do some operations: run through each element, get or set a specific value of an element, compare two elements, etc.</p>
  
  <p>However, I am not sure of which method is the best regarding performance. Is it better to use a small Array or to use an Object ?</p>
  
  <p>I have considered using a flat array with typed values (as defined on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays" rel="nofollow noreferrer">MDN</a>), which is how <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data" rel="nofollow noreferrer">image data</a> is stored in a Canvas, but I would prefer one the the strucure above.</p>
  
  <p>I created a <a href="https://jsperf.com/small-array-vs-small-object" rel="nofollow noreferrer">JSPerf test case</a> to compare the two, and the first results (<em>06/03/19</em>) are indicating that using an Array of Objects is faster. </p>