title: Store a data table as array of row objects, or as an object of column arrays?
body: <ul>
  <li>Main question: whether to store a data table as array of row objects, or as an object of column arrays.</li>
  <li>Proximate question: How to measure the memory footprint of an object.</li>
  <li>Practical question: How do I read the memory profiler in Chrome?  </li>
  </ul>
  
  <p><strong>Background</strong> </p>
  
  <p>Working with rectangular data tables in Javascript, both in browser and/or Node.js.  Many leading libraries like D3 and Crossfilter store data as arrays of objects, e.g. </p>
  
  <pre><code>var rows = 
    [{name: 'apple', price: 1.79, ...}, 
     {name: 'berry', price: 3.49, ...}, 
     {name: 'cherry', price: 4.29, ...}, ...
    ]
  </code></pre>
  
  <p>However, it seems with many columns (my use case) and potentially many rows, the overhead of storing keys can become very heavy, and it would be more efficient to store the data (and iterate over it) storing each column as an array, as in: </p>
  
  <pre><code>var cols = {
     name: ['apple', 'berry', 'cherry', ...],
     price: [1.79, 3.49, 4.29, ...], 
     ...
  }
  </code></pre>
  
  <p><strong>Profiling question</strong> </p>
  
  <p>One answer to this post describes using the Chrome memory profile:  <a href="https://stackoverflow.com/questions/1248302/javascript-object-size">JavaScript object size</a></p>
  
  <p>I set up the following simplistic benchmark below.  The code can be copied/pasted to the console of Chrome and executed.  I then looked at the Chrome profiler, but not sure how to read it.</p>
  
  <p>At first glance, the retained size seems clearly in favor of columns:</p>
  
  <ul>
  <li><code>window.rowData:  294,170,760 bytes</code></li>
  <li><code>window.colData:   44,575,896 bytes</code></li>
  </ul>
  
  <p>But if I click on each, they give me the same (huge) retained size:</p>
  
  <ul>
  <li><code>window.rowData</code>: <code>338,926,668 bytes</code></li>
  <li><code>window.colData</code>: <code>338,926,668 bytes</code></li>
  </ul>
  
  <p><strong>Benchmark code</strong> </p>
  
  <p>The following code can be copy/pasted to Chrome console:</p>
  
  <pre><code>function makeid(len) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  
    for (var i = 0; i &lt; len; i++)
      text += possible.charAt(Math.floor(Math.random() * possible.length));
  
    return text;
  }
  
  
  /* create set of 400 string keys with 8 random characters.*/
  var keys = window.keys = [], i, c;
  for ( i=0;  i &lt; 400; i++) {
    keys.push(makeid(8));
  }
  
  /* METHOD 1:  Create array of objects with {colName: cellValue} pairs */
  var rows = window.rowData = [];
  for ( i = 0; i &lt; 10000; i++) {
    var row = {};
    for ( c = 0; c &lt; 400; c++) {
      row[keys[c]] = Math.random();
    }
  
    rows.push(row);
  }
  /* METHOD 2: Create set of columns { colName: [values]} */
  var cols = window.colData = {};
  for ( c=0; c&lt;400; c++) {
    var col = cols[keys[c]] = [];
    for ( i=0; i&lt;10000; i++) {
      col[i] = rows[i][keys[c]];
    }
  }
  </code></pre>